浏览器的渲染步骤
浏览器对内容渲染的步骤
- 根据 html 构建 html 树(DOM)
- 根据 css 构建 css 树(cssom)
- 将两棵树合并成一颗渲染树(render tree)
- Layout 布局(文档流,盒模型,计算大小和位置)
- Paint 绘制(把边框颜色,文章内容,阴影等画出来)
- composite 合成(根据层叠关系展示画面)
浏览器的更新方式
![b736efdd9fda706b753b77bfbaf02a2f.png](https://i-blog.csdnimg.cn/blog_migrate/49c49c8bd014d01c1ba58bb39db034b8.png)
浏览器的渲染优化
- 对于动画效果的实现,避免使用 setTimeout 或 setInterval,请使用requestAnimationFrame。
- 将长时间运行的 JavaScript 从主线程移到 Web Worker。
- 使用微任务来执行对多个帧的 DOM 更改。
- 使用 Chrome DevTools 的 Timeline 和 JavaScript 分析器来评估 JavaScript 的影响。
- 降低选择器的复杂性;使用以类为中心的方法,例如 BEM。
- 减少必须计算其样式的元素数量。
- 布局的作用范围一般为整个文档。
- DOM 元素的数量将影响性能;应尽可能避免触发布局。
- 评估布局模型的性能;新版 Flexbox 一般比旧版 Flexbox 或基于浮动的布局模型更快。
- 避免强制同步布局和布局抖动;先读取样式值,然后进行样式更改。
- 除 transform 或 opacity 属性之外,更改任何属性始终都会触发绘制。
- 绘制通常是像素管道中开销最大的部分;应尽可能避免绘制。
- 通过层的提升和动画的编排来减少绘制区域。
- 使用 Chrome DevTools 绘制分析器来评估绘制的复杂性和开销;应尽可能降低复杂性并减少开销。
- 坚持使用 transform 和 opacity 属性更改来实现动画。
- 使用
will-change
或translateZ
提升移动的元素。 - 避免过度使用提升规则;各层都需要内存和管理开销。
css 动画
transform 的属性
- translate 位移
translateX(<length-percentage>) //X轴移动
translateY(<length-percentage>) //Y轴移动
translateZ(<length-percentage>) //Z轴移动
- scale 缩放
scaleX(<number>) //X轴缩放
scaleY(<number>) //Y轴缩放
scale(<number>,<number>) //整体缩放
- rotate 旋转
rotate([<angle>/<zero>]) //整体旋转
- skew 倾斜
skewX([<angle>/<zero>]) //X轴倾斜
skewY([<angle>/<zero>]) //Y轴倾斜
- transition 过渡 作用:补充中间帧
语法:属性名 | 时长 | 过渡方式 | 延迟
注: 并不是所有属性都能过渡 display: none
一般改成 visibility: hidden
@keyframes 完整语法
@keyframes slidein {
from {
transform: translateX(0%);
}
to {
transform: translateX(100%);
}
@keyframes identifier {
0% { top: 0; left: 0;}
60% { top: 50px;}
100% { top: 100px; left: 100%;}
}
animation 的属性
animation 语法:
animation: 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名
时长: 1s或者1000ms
过渡方式: 和transition取值一样,如linear
次数: 3,2.4,infinite(无限)
方向: reverse(结束到开始)、alternate(开始与结束相互循环)
填充模式: forward(定格在最后一帧)
是否暂停: paused | running