云音乐大前端专栏

在canvas中进行排版布局的一些实践，方案在web以及各类小程序如微信小程序上适用。

本文将对 unified 的相关插件生态、工作原理作介绍，并对一些使用例子作解析，帮助读者了解 unified 体系的能力、原理和用途。

设备硬件性能的提升、浏览器内核的升级给在网页端实现流畅动画提供了可能。目前，常规设备的刷新频率是 60HZ，也就是说，如果要让用户感受不到明显卡顿，浏览器的渲染流水线需要每秒输出 60 张图片（60 FPS）。本文会从基础的渲染树出发，介绍浏览器渲染流水线，以及常用的优化动画性能的方法。

为了快速定位并解决CMS使用过程中遇到的问题，开发了问题一键上报插件，用于还原问题现场。本文会简要阐述问题上报插件的设计，以问题上报插件作为一个入口去探索rrweb库的实现原理，主要会从事件监听、DOM 序列化、自定义计时器三方面去着重阐述。

之前分享了一篇关于 Android 隐私静态合规检查的文章，今天我们继续分享一下如何针对 so 调用、查找隐私方法调用入口等场景进行静态检查工作。

在最近的活动开发中，笔者完成了一款大富翁的游戏。其技术细节暂且忽略，在这里主要想探讨下地图绘制的问题。在整个地图中，有很多的组成路径的方格以及作为房产的方格，如果一个个手动去调整位置，工作量是很大的。因此需要一个方案能够帮助我们快速确定方格在地图中的位置。下面便是笔者所采用的方法。

Eggjs虽然提供了入门教程，但是有大量的约定俗成，对于理解上有一定的成本和门槛。本文以快速入门的例子通过不同的角度进行解读，阐述相关编程思想，希望能帮助大家能更好的掌握这一框架

目前，国内对应用程序安全隐私问题监管变的越来越严格。各个应用市场对APP上架也有比较严格的检查。云音乐今年也在Google Play上上架了一些海外的社交类业务。Google Play在审核应用的时候，也有相应的政策。当我们每次遇到问题的时候，需要根据检查方的信息对一些代码逻辑进行排查。笔者开发了一个辅助定位隐私API调用的静态检查工具。在这里进行一个简单的分享。

基于 DrawIO 源码，简单的介绍 DrawIO 的二次开发流程，完成一个团队图表绘制管理系统。

本文主要介绍 WebAssembly 核心原理以及如何实现一个 WebAssembly 解释器。

前段时间，网易云音乐上线了一个基于熟人社交投票玩法的 h5 活动，本文主要介绍了该活动是如何基于矩形树图算法来实现一个无缝挤压动效以及在这其中遇到一些问题。

本文将介绍 AGP 由 3.5.0 升级到 4.1.3 的适配过程，对遇到的问题进行分析，并给出相应的解决方案。

本文介绍了 Java 和 Kotlin 相关的异常知识，对于现实开发中经常遇到的一些关于异常处理的问题（如何抛出异常，如何捕捉异常，Java 和 Kotlin 异常对齐），并阐明了云音乐对这块的态度和规范。

介绍车载应用开发过程的一些心得体会

本文介绍android agp 4.1.0 如何支持 R 文件内联以及 R 文件的一些历史问题。

当你需要开发web动画时，这里可以给你提供一个清晰的思路

想知道刷屏朋友圈的颜色测试 H5 是如何开发出来的吗？想知道测试结果又是如何计算的吗？本次活动的核心开发人员将为大家揭秘颜色测试活动的技术细节。

当要深入了解 v8 内部的内存管理细节时，首先需要了解对象在 v8 中的处理方式，本文将结合源码对 v8 中的对象处理进行简单介绍

苹果在 iOS 中加入了新的性能指标`wakeup`，这里让我们来看看其原理与解决思路。

对 Node.js 的学习，无论如何都绕不开 Libuv。本文选择沿着 Libuv 的 Linux 实现的脉络对其内部一探究竟

解析 heapsnapshot 文件内容，并做点有趣的事情

本文通过云音乐广告合约系统的微前端落地来介绍 qiankun 的应用实践

单元测试的技术方案很多，不同工具之间有互相协同，也存在功能重合，给我们搭配测试方案带来不小的困难，而且随着 ES6, TypeScript 的出现，单元测试又增加了很多其他步骤，完整配置起来往往需要很大的时间成本。

在苹果推出 WebKit 后，UIWebView 正在退出历史舞台，WKWebView 凭借着速度快、占用内存小等优势逐渐的被大家广泛使用。云音乐在 WebView 上的使用要求有离线包加载以及免流等能力，这一切都得依赖请求拦截能力。本文总结了我们在实现 WKWebView 请求拦截的一些经验，希望能帮助到正在研究该方面的同学。

函数组合是函数式编程的核心，而「异步非阻塞」是 JavaScript 世界的主流；本篇文章将会介绍 Monad 的概念，以及如何优雅的实现异步函数的组合。

在我们接入 Flutter 技术的时候，必然会用到大量的图片，本文将讨论构建一个图片控件的方案与优化过程。

lottie-web 可以帮我们实现非常炫酷的动画效果，那么它是如何实现的呢？笔者对动画实现和原理做了一次梳理，整理了下面的文档供大家参考。

Poplayer 名词来自阿里的一篇文章，结合 Android 场景来看，其实就是页面上层再加一层，称作 Poplayer。通过Poplayer 层我们可以将一些临时业务交由这一层去处理维护，而这一层又交由 WebView 去承载，在增加动态性的同时又不影响既有稳定业务。

React 为我们提供了一套虚拟的事件系统，这套虚拟事件系统是如何工作的，笔者对源码做了一次梳理，整理了下面的文档供大家参考。

本文来自于内部分享，整理成文，涉及两部分内容，ReactFiber 和 Custom Renderer，探究一些 Fiber 的起因及 Fiber 衍生产物 Custom Renderer 的实施。

本文介绍网易云音乐 Android 客户端中几种视频无缝播放的实现方案和一些注意事项。

最近笔者研究 Android 中使用自定义 View 提供原生组件给 React Native（下面统一写成 RN） 端的时候，遇到一些实际问题，在这里从 RN 的一些工作机制入手，分享一下问题的原因和解决方案。

IoC（Inversion of Control）控制反转，是面向对象编程中的一种设计原则，用来降低计算机代码之间的耦合度。本文通过梳理控制反转的概念，优势以及基于 TypeScript 的实现，为大家在日常编码中写出可维护性更高的代码提供一些参考。

提升 Web 与 React Native 双端页面性能优化实践。

随着 React Native 技术在云音乐业务中广泛的应用，一些比较重要的功能也开始采用 React Native 的方案来进行了，这就给 React Native 页面的打开速度提出了更高的要求，本次优化采用拆包与预热方案，让我们来看看是如何实现的吧。

当你开始学习函数式编程的时候，你肯定听说过“纯函数”，“副作用”，“柯里化”等概念，本章将从这些基础概念入手开始，开始讲解把一个函数装进 “Box” 中的理念，然后引出“应用函子”的概念，并给出实际的应用案例。

在流量红利逐渐消失的现在，数据的采集、分析和精细化的运营显得更加重要，所以埋点在互联网产品中是很常见的，它可以更好的辅助我们去迭代、完善产品功能。

苹果在今年的 WWDC20 上发布了小组件（WidgetKit），支持在 iOS、iPadOS 主屏幕展示动态信息和个性化内容。作者刚刚完成云音乐小组件的初版开发工作，本文从实际开发的角度谈谈小组件开发的方方面面，希望能给大家带来帮助。

本文主要介绍 LOOK 直播运营后台基于 qiankun 的微前端落地实践，以及共享公共依赖的预研工作。

JavaScript 作为天生的单线程语言，社区经常聊 JavaScript 就聊异步、聊 Event Loop，看起来它们好像难舍难分，实际上可能只有五毛钱的关系。本文把这些串起来讲讲，希望能给读者带来一些收获，如果能消除一些误解那就最好了。

UIButton 做为 iOS 开发中最常用的控件，它的状态只有 normal、highlighted、selected、disabled 吗？

本文主要介绍 CodeSandbox 大致原理，以及如何将 CodeSandbox 私有化部署并且在此基础上进行定制开发。

权限体系在中后台系统中至关重要，本文将围绕权限做一个介绍并分享下 RBAC 模型在项目中的实践。

文字垂直居中是一个 CSS 常见的操作，可是我们平时的方法其实并没有达到真正意义上的垂直居中。本文将介绍字体的相关概念，并说明如何找到真正居中的位置。

本文介绍了云音乐引入 React Native 0.33 版本历史，RN 自动部署平台和离线包服务平台实现，0.33 版本如何升级到 0.6 版本，业界首个 RN codemod 框架推出，三端方案落地，基础设施完善，RN 现状及未来规划。

当一个前端工程代码量越来越大时，开发发布流程中代码检查、构建的时间也越来越久。本文将介绍用「增量」思想提升代码检查、打包构建环节的速度，从而实现开发过程的效率提升。

表单涉及到联动、校验、布局等复杂场景，经常是开发者的需要耗费精力去解决的点，虽然传统的开发表单的方式已经足够的灵活但是依然有提效的空间，所以针对复杂的表单开发场景我们总结了一套表单开发方案

React Fiber 由来已久，是 React 设计思想的一个典型表现。了解 Fiber 原理对我们更好理解 React 运行机制以及后续版本的新增特性，比如异步渲染能力等都有很大的帮助。本文基于 React v16 的源码，输出一些理解，希望对你也有帮助。

在云音乐的直播开发中会常遇到动画播放的需求，每个需求的应用场景不同，体积较小的动画大都采用 APNG 格式。

Web 应用如果要更新列表数据，一般会选择点击左上角刷新按钮，或使用快捷键 Ctrl+F5，进行页面资源和数据的全量更新。如果页面提供了刷新按钮或是翻页按钮，也可以点击只做数据更新。但移动客户端屏幕寸土寸金，无论是加上一个刷新按钮，还是配合越来越少的手机按键来做刷新操作，都不是十分便捷的方案。

本文希望通过 Rust 敲一敲 WebAssembly 的大门。作为一篇入门文章，期望能够帮你了解 WebAssembly 以及构建一个简单的 WebAssembly 应用。在不考虑IE的情况，目前大部分主流的浏览器已经支持 WebAssembly，尤其在移动端，主流的UC、X5内核、Safari等都已支持。读完本文，希望能够帮助你将 WebAssembly 应用在生产环境中。

本文将为大家介绍自动化控制 iOS 模拟器的原理，为开发基于 iOS 模拟器的前端调试方案提供帮助。

在疫情期间，上班族开启了远程办公，体验了各种远程办公软件。老师做起了主播，学生们感受到了被钉钉支配的恐惧，歌手们开启了在线演唱会，许多综艺节目也变成了在线直播。在这全民互动直播的时期，我们来聊聊互动直播中的即时通讯技术在前端中的使用。

在过去的几个月里，React Hooks 在我们的项目中得到了充分利用。在实际使用过程中，我发现 React Hooks 除了带来简洁的代码外，也存在对其使用不当的情况。这篇文章中，我想总结我过去几个月来对 React Hooks 使用，分享我对它的看法以及我认为的最佳实践，供大家参考。

2019 年初的时候，我们业务组上线了一个新的 Node.js 应用，主要提供C端的 API 服务。 随着应用流量的逐渐增加，线上监控平台会偶发性报警，提示磁盘 disk_io 平均等待时间超出 1000ms，随后观察发现磁盘 IO 每秒写字节量突然飙高，但很快又下降。

CLI 工具作为开发者们亲密无间的好伙伴，996 风雨无阻地陪伴着我们进行日常的开发工作。身为前端开发，你一定也亲自开发过一套属于你自己的 CLI 小工具！

随着 React 生态的快速发展，社区基于 React 的状态管理方案层出不穷，这意味着很多方案开发者依然要做很多选择，没有约定的团队，沟通成本和跨团队协作成本，以及长期的维护是非常高的，这时候统一一套开发模式就显得尤为重要。

对于视频的在线播放，按视频内容的实时性可以分为点播（VOD）和直播（Live Streaming）。现如今在 Web 环境下需要进行视频播放时，通常可以使用 video 标签，通过它将视频播放的各个环节都托管给浏览器。

本文以音频能力中的全局播放为切入点，探讨单例模式在前端业务中的应用。文中代码均为 React 组件内代码。

Three.js（下面简称 Three） 作为一个 3D 库，不仅减少了我们学习 OpenGL 和 WebGL 的成本，还大大提升了前端在可视化上给用户带来更多的真实、沉浸式的体验。众所周知，Three 更多的是用 3D 模型 + 投影相机 + 用户交互的方式来构建一个「3D 世界」。

服务端渲染有很多坑会踩，针对路由本文提出一种解决方案，在服务端不使用中心化的路由配置，结合 Code Splitting ，通过一次预渲染，获取当前 URL 对应的模块名和数据获取方法。

本文作者由于工作经历上的特殊性，积累了一些关于前端 DSL 的实践经验（主要是外部 DSL），在所维护的开源项目中也有一些体现，同时作者在社区也有过一些不成体系的回答如《如何写一个类似 LESS 的编译工具》。这次我会尝试从前端开发的视角来完整探讨下 DSL 这个「难以细说」的议题。

韩国某著名男子天团之前在我们平台上架了一张重磅数字专辑，本来是一件喜大普奔的好事，结果上架后投诉蜂拥而至。部分用户反馈页面打开就崩溃，紧急排查后发现真凶就是下面这段代码。

市面上，音频编辑软件非常多，比如 cubase、sonar 等等。虽然它们功能强大，但是在 Web 上的应用却显得心有余而力不足。因为 Web 应用的大多数资源都是存放在网络服务器中的，用 cubase 这些软件，首先要把音频文件下载下来，修改完之后再上传到服务器，最后还要作更新操作，操作效率极其低下。如果能让音频直接在 Web 端进行编辑并更新到服务器，则可以大大提高运营人员的工作效率。下面就为大家介绍一下如何运用 Web 技术实现高性能的音频编辑器。

本系列文章适合拥有扎实的 JavaScript 基础和有一定函数式编程经验的人阅读，本文的目的是结合 JavaScript 的语言特性来讲解范畴论的一些概念和逻辑在编程中的实际应用。

叮叮当，叮叮当，吊儿个郎当，一年一度的圣诞节到咯，我不由的回想起了前两年票圈被圣诞帽支配的恐惧。对于懒人的我来说，自己调整一个圣诞帽子佩戴还是太麻烦了。于是我就想了，有没有什么办法能让我的头像自动佩戴上圣诞帽呢？还真给我想到了，这就是今天的主题，用纯前端的方式给你做一个自动佩戴圣诞帽的网站。

流在开发中是一个很常见的概念。有了流，在处理大文件时就不再需要等待整个数据获取完毕后才处理数据，而是可以一段一段地拿到数据，在获得数据的同时直接解析数据。这样既可以高效利用 CPU 等资源，还减少了存放整个数据的内存占用。不过在过去，客户端 JavaScript 上都没有流的概念，而随着 Streams API 在各大浏览器上的逐步实现，我们终于可以使用原生的 API 以流的角度来看待数据了，例如从 fetch 请求上可以得到一个网络流。

如果使用了 Node.js 作为服务端开发语言，我们肯定要开发 API 接口。本文用一个示例需求，来讲述一下如何高效开发高质量的服务端 API 接口。

将网页保存为图片（以下简称为快照），是用户记录和分享页面信息的有效手段，在各种兴趣测试和营销推广等形式的活动页面中尤为常见。

本文仅用于简单普及，达到的目的是给没接触过或者很少接触过这方面的人一点感觉，阅读起来会比较轻松，作者深知短篇幅文章是不可能真正教会什么的，所以也不会出现 RTFM 的内容。

长列表渲染、无限下拉也算是前端开发老生常谈的问题之一了，本文将介绍一种简洁、巧妙、高效的方式来实现。

看完本文希望读者能够了解到，Docker 的基本原理，Kubernetes 是怎么工作的， 对于前端 Kubernetes 有哪些优势与玩法。

目前 Web 开发普遍都切换到了前后端分离的开发模式。虽然在工程和职能上已经分离了，但在实际工作中，前后端在开发进度上往往会出现不一致的情况，此时就会极大地影响开发效率。 接口 mock 在此时就发挥出了巨大价值，它磨平了这个时间差，最终实现高效的前后端分离开发。

云音乐前端性能监控平台，底层使用了 Lighthouse 进行审计评分，在实践过程中我们积累了一些 Lighthouse 内部实现的研究经验，希望通过这篇文章可以分享给各位读者。

先简单回顾下位运算，平时用的少，相信不少人和我一样忘的差不多了，根据位运算的特点，设计一个权限系统（添加、删除、判断等）

Zergling 是我们团队自研的埋点管理平台，默认的数据格式有点特殊，需要一个自定义的 json parser 来规范输入问题，总的分为词法分析和语法分析两部分

本文将介绍一款全新的前端开发工具，希望它能给你的前端开发带来看起来和现在一样但其实又不那么一样的体验。

本文有两个关键词：`音频可视化`和`Web Audio`。前者是实践，后者是其背后的技术支持。 Web Audio 是很大的知识点，本文会将重点放在**如何获取音频数据**这块。

Serverless 是一种执行模型（execution model）。在这种模型中，云服务商负责通过动态地分配资源来执行一段代码。

早在 1950 年代，随着 Lisp 语言的创建，函数式编程（ Functional Programming，简称 FP）就已经开始出现在大家视野。

前不久，我参与开发了团队中的一个 web 应用，过程中让用户能够进行操作的**撤销、重做**会提高编辑效率，大大提高用户体验，而本文要讲的正是在这个功能实现中的探索与总结。