前端性能优化 -- 渲染优化

[shuangmianxiaoQ]

浏览器的渲染流程

JavaScript -> Style -> Layout -> Paint -> Composite

1. 浏览器构建对象模型
   • 构建DOM对象：HTML => DOM
   • 构建CSSOM对象：CSS => CSSOM
2. 浏览器构建渲染数 DOM + CSSOM => Render Tree
3. JavaScript
4. Style
5. Layout 计算元素位置和大小
6. Paint 绘制
7. Composite 合成，类似PS图层组合（transform, opacity）

布局与绘制

布局 -- 影响回流(Reflow)的操作

• 添加/删除元素
• display: none
• 移动位置元素
• 操作style
• offsetLeft, scrollTop, clientWidth
• 修改浏览器大小，字体大小

避免布局抖动(Layout thrashing)

• 避免回流
• 读写分离：fastdom

绘制 -- 减少重绘

• 利用DevTools识别 paint 的瓶颈：Rendering -> Paint flashing
• 利用will-change创建新图层(transform, opacity)，也要避免过多的图层，