参考 goole文章
浏览器渲染步骤
- 根据HTML构建HTML树(DOM)
- 根据CSS构建CSS树(CSSOM)
- 将两棵树合并成一棵渲染树(render tree)
- Layout布局(文档流、盒模型、计算大小和位置)
- Paint绘制(把边框颜色、文字颜色、阴影等画出来)
- Compose合成(根据层叠关系展示画面)
如何更新样式
一般用JS来更新样式
div.style.background = 'green'
div.classList.add('green')
div.remove()
这些方法有什么不同吗？
- 有三种不同的渲染方式
第一种，全走
div.remove() 会触发当前消失，其他元素 relayout
第二种，跳过 layout
改变背景颜色，直接 repaint + composite
第三种，跳过 layout 和 paint
改变 transform，只需 composite
注意：查看每个属性触发什么流程 csstriggers.com/
优化渲染性能(Rendering Performance)
优化 JavaScript 执行
- 对于动画效果的实现，避免使用 setTimeout 或 setInterval，请使用 requestAnimationFrame API。
- 降低JavaScript 代码的复杂性或将JavaScript 从主线程移到 Web Worker。
样式布局优化
- 降低选择器的复杂性，避免嵌套多层
- 减少必须计算其样式的元素数量，避免为计算到不需要样式的元素
- 避免大型、复杂的布局和布局抖动
- 尽量使用 flexbox布局
简化绘制的复杂度、减小绘制区域
- 绘制是填充像素的过程，像素最终合成到用户的屏幕上。 它往往是管道中运行时间最长的任务，应尽可能避免此任务，除 transform 或 opacity 属性之外，更改任何属性始终都会触发绘制。通过层的提升和动画的编排来减少绘制区域。
坚持仅合成器的属性和管理层计数
合成是将页面的已绘制部分放在一起以在屏幕上显示的过程。此方面有两个关键因素影响页面的性能：需要管理的合成器层数量，以及您用于动画的属性。
- 尽量使用 transform 和 opacity 属性更改来实现动画。
- 合理使用 will-change 或 translateZ 提升移动的元素。
- 避免过度使用提升规则；各层都需要内存和管理开销。
- 管理层并避免层数激增
使输入处理程序去除抖动
- 避免长时间运行输入处理程序；它们可能阻止滚动
- 不要在输入处理程序中进行样式更改
- 使处理程序去除抖动；存储事件值并在下一个 requestAnimationFrame 回调中处理样式更改
优化加载性能(Loading Performance)
一个网站的性能，可以分为Rendering Performance（渲染性能）和 Loading Performance（加载性能）。
优化内容效率
优化内容效率的关键在于：避免不必要的下载、通过各种压缩技术优化每个资源的传送编码以及尽可能利用缓存来避免多余的下载。 优化内容效率的主要措施：
- 避免不必要的下载
- 优化资源编码和大小
- 图像优化，使用正确的格式，懒加载模式
- 网页字体优化
- 合理利用HTTP缓存
JavaScript 启动优化
- 防止内存泄漏
- 减少DOM操作
- 预加载关键资源
- 使用代码拆分减少JavaScript负载
- 延迟加载资源，使用Intersection Observer API
CSS优化
- 精简CSS代码及文件
- 合理的使用媒体查询
- 不滥用浮动
- 尽量不使用id选择器
- 避免嵌套CSS文件
