突破前端性能瓶颈

参考：漫谈前端性能，突破React应用瓶颈

浏览器渲染

1. 简单流程：
   • 解析渲染 DOM Tree；
   • 解析渲染 CSS Tree；
   • DOM Tree + CSS Tree => Render Tree；
   • 解析执行 JavaScript;
2. 因为 JavaScript 可以操作 DOM，影响渲染，所以 JavaScript 引擎线程和 UI 线程是互斥的;
3. JavaScript main thread

性能瓶颈

1. JavaScript 引擎线程和 UI 线程是互斥的，JavaScript 引擎线程和 UI 线程是互斥的；
2. 如果调用栈 call stack 运行一个很耗时的脚本，比如解析一个图片，call stack 就会像北京上下班高峰期的环路入口一样，被这个复杂任务堵塞。主线程其他任务都要排队，进而阻塞 UI 响应。这时候用户点击、输入、页面动画等都没有了响应。

突破性能瓶颈

1. 方法一：将耗时高、成本高、易阻塞的长任务切片，分成子任务，并异步执行；
   这样一来，这些子任务会在不同的 call stack tick 周期执行，进而主线程就可以在子任务间隙当中执行 UI 更新操作。设想常见的一个场景：如果我们需要渲染一个由十万条数据组成的列表，那么相比一次性渲染全部数据，我们可以将数据分段，使用 setTimeout API 去分步处理，构建渲染列表的工作就被分成了不同的子任务在浏览器中执行。在这些子任务间隙，浏览器得以处理 UI 更新；
2. 方法二：使用HTML5 Web worker；
   Web worker 允许我们将 JavaScript 脚本在不同的浏览器线程中执行。因此，一些耗时的计算过程我们都可以放在 Web worker 开启的线程当中处理。