从浏览器的渲染角度来进行性能优化

从浏览器的渲染角度来进行性能优化

性能瓶颈

• js 执行引擎与渲染引擎是互斥的，他们是共同存在与浏览器的 UI 线程里面
• js 引擎负责执行我们的 js 代码从而产生 Dom 树， 渲染引擎则是依据 Dom 树，样式树来构建渲染树，然后排版与绘制，然后组合，从而计算出显示的像素点。
• 整个的流程需要在一帧内完成，这样才能达到很好的性能要求，通常是 16ms,如果时间超过这个时间，就会出现所谓的丢帧的现象。
• 对于渲染引擎而言，排版与绘制是比较耗时的。所以要尽量减少重绘重排的情况。

强制渲染

• 如果我们在 js 里面修改了 DOM 的某些影响布局的属性，紧接着，我们尝试读取这些属性，那么这样的代码会导致强制渲染，这种读写混合的写法就称为Layout Thrashing
• 如果我们的 js 代码只是修改 DOM 的这些影响布局的属性，但是不读取，那么浏览器会去做渲染合并，从而提供性能

React/Angular/Vue 这样的前端 SPA 框架是如何提升性能的

• 他们采用 Virtual Dom 的计算来记录当前 Dom 的状态，在执行变更检测的时候，读写的对象是来自于 Virtual DOM, 避免了Layout Thrashing.这个过程也就是我们常说的 Render 阶段
• 然后计算出新旧 Virtual Dom 的差异后，它会将真正需要变化的更新到真正的 DOM 上，这个是一个只写的操作，这个过程也就是我们常说的 Commit 阶段
• 这个点就是这些框架实现读写分离的地方

---

性能优化的点很大，这个是从浏览器的角度通过读写分离的方式来优化性能。这也是为什么我们避免直接去操作 DOM,或者说直接操作 DOM 会带来性能问题的原因