四.渲染机制

1.浏览器的渲染过程

• 1.html 和 css 经过各自解析，生成 dom 树和 cssos 树
• 2.合并为渲染树
• 3.根据渲染树进行布局
• 4.最后调用 GPU 进行绘制，显示在屏幕上

2.根据渲染机制加快首屏速度

• 1.优化文件大小：HTML 和 CSS 的加载和解析都会阻塞渲染树的生成，从而影响首屏展示速度，因此我们可以通过优化文件大小，减少 CSS 文件层级的方法来加快首屏速度
• 2.避免资源下载阻塞文档解析：浏览器解析到 script 标签是，会阻塞文档解析，直到脚本执行完成，因此我们通常把 script 标签放在底部，或者加上 defer、async 来进行异步下载

3.什么是回流（重排）

• 当元素的尺寸或者位置发生了变化，就需要重新计算渲染树，这就是回流
• DOM 元素的几何属性(width/height/padding/margin/border)发生变化时会触发回流
• DOM 元素移动或增加会触发回流
• 读写 offset/scroll/client 等属性时会触发回流
• 调用 window.getComputedStyle 会触发回流

4.什么是重绘

• DOM 样式发生了变化，但没有影响 DOM 的几何属性时，会触发重绘，而不会触发回流。重绘由于 DOM 位置信息不需要更新，省去了布局过程，因而性能上由于回流

5.什么是 GPU 加速

• 优点：使用 transform、opacity、filters 等属性时，会直接在 GPU 中完成处理，这些属性的变化不会引起回流重绘。
• 缺点：GPU 渲染字体会导致字体模糊，过多的 GPU 处理会导致内存问题。

6.如何减少回流

• 使用 class 替代 style，减少 style 的使用
• 使用 resize、scroll 时进行防抖和节流处理，这两者会直接导致回流
• 使用 visibility 替换 display：none，因为前者只会引起重绘，后者会引发回流
• 批量修复元素时，可以先让元素脱离文档流，等修改完毕后，再放入文档流
• 避免触发同步布局事件，我们在获取 offsetWeith 这类属性的值时，可以使用变量将查询结果存起来，避免多次查询，每次对 offset/scroll/client 等属性查询时都会触发回流
• 对于复杂动画效果，使用绝对定位让其脱离文档流，复杂的动画修改会频繁的触发回流重绘，我们可以将动画元素设置绝对定位从而脱离文档流避免反复回流重绘。

7.重排和重绘

• 部分渲染树（或者整个渲染树）需要重新分析并且节点尺寸需要重新计算。这被称为重排。注意这里至少会有一次重排-初始化页面布局。
• 由于节点的几何属性发生改变或者由于样式发生改变，例如改变元素背景色时，屏幕上的部分内容需要更新。这样的更新被称为重绘。

8.什么情况会触发重排和重绘

• 添加、删除、更新 DOM 节点
• 通过 display: none 隐藏一个 DOM 节点-触发重排和重绘
• 通过 visibility: hidden 隐藏一个 DOM 节点-只触发重绘，因为没有几何变化
• 移动或者给页面中的 DOM 节点添加动画
• 添加一个样式表，调整样式属性
• 用户行为，例如调整窗口大小，改变字号，或者滚动。