浏览器渲染过程
- 根据HTML构建HTML树(DOM)
- 根据CSS构建CSS数(CSSOM)
- 将两棵数合并成一棵渲染树(render tree)
- Layout布局(文档流、盒模型、计算大小和位置)
- Paint绘制(把边框颜色、文字颜色、阴影等画出来)
- Compose合成(根据层叠关系展示画面)
更新样式的方式
一般使用Javascript来更新样式，例如可以直接使用style属性更改HTML元素的样式，还可以使用classList.add()通过增加类的方式修改HTML元素的样式。
像素管道概念
像素管道关键点包括以下五点。
- JavaScript：使用JS实现视觉变化效果
- Style(样式计算)：根据匹配选择器计算出哪些元素应用哪些CSS规则
- Layout(布局)：计算元素要占据扽空间大小及其在屏幕扽位置
- Paint(绘制)：填充像素的过程
- Composite(合成)：由于页面各部分可能被绘制到多层，因此需要按正确顺序绘制到屏幕上，以便正确渲染页面
根据样式类型扽不同存在三种不同的样式更新过程
- Javascript>Style(样式计算)>Layout(布局)>绘制(Paint)>合成(Composite)，例如：使用div.remove()
- Javascript>Style(样式计算)>绘制(Paint)>合成(Composite)，例如：修改背景颜色
- Javascript>Style(样式计算)>合成(Composite)，例如：使用transform属性
三种不同样式更新过程所对应的属性
所有CSS属性所对应的样式更新过程可以查看网站：CSStriggers
渲染性能优化方法
渲染性能优化方法从像素管道五大关键点，及JavaScript、Style、Layout、Paint和Composite展开，每一个关键点都包含若干优化方法，具体内容如下。
优化JavaScript执行
- 使用 requestAnimationFrame 来实现视觉变化
- 降低复杂性或使用 Web Worker
- 了解 JavaScript 的“帧税”
- 避免微优化 JavaScript
缩小样式计算的范围并降低其复杂性
- 降低选择器的复杂性
- 减少要计算样式的元素数量
- 测量样式重新计算的开销
- 使用块、元素、修饰符
避免大型、复杂的布局和布局抖动
- 尽可能避免布局操作
- 使用 flexbox 而不是较早的布局模型
- 避免强制同步布局
- 避免布局抖动
简化绘制的复杂度、减小绘制区域
- 触发布局与绘制
- 使用 Chrome DevTools 快速确定绘制瓶颈
- 提升移动或淡出的元素
- 减少绘制区域
- 降低绘制的复杂性
使用仅需合成的属性和管理层计数
- 使用 transform 和 opacity 属性更改来实现动画
- 提升您打算设置动画的元素
- 管理层并避免层数激增
- 使用 Chrome DevTools 来了解应用中的层
使输入处理程序去除抖动
- 避免长时间运行输入处理程序
- 避免在输入处理程序中更改样式
渲染性能优化参考链接
以上仅列举渲染性能优化关键点，更详细内容可以参考链接：谷歌开发者文档/渲染性能
