渲染性能优化

渲染原理

关键渲染路径

1. HTML解析：解析HTML生成DOM树
2. CSS解析：解析CSS生成CSSOM树
3. DOM + CSSOM = Render Tree：生成渲染树
4. 布局（Layout）：计算元素的位置和大小
5. 绘制（Paint）：绘制元素的内容
6. 合成（Composite）：将绘制结果合成到屏幕上

渲染性能瓶颈

• 布局抖动：频繁的布局操作
• 重排（Reflow）：元素位置或大小改变
• 重绘（Repaint）：元素样式改变但位置不变
• 长任务：执行时间超过50ms的JavaScript任务

加载中...