渲染机制
渲染步骤
浏览器的渲染机制一般分为以下几个步骤:
1. 处理 HTML 并构建 DOM 树。
2. 处理 CSS 构建 CSSOM 树。
3. 将 DOM 与 CSSOM 合并成一个渲染树。
4. 根据渲染树来布局，计算每个节点的位置。
5. 调用 GPU 绘制，合成图层，显示在屏幕上。
注意:
- 在构建 CSSOM 树时，会阻塞渲染，直至 CSSOM 树构建完成。并且构建 CSSOM 树是一个十分消耗性能的过程，所以应该尽量保证层级扁平，减少过度层叠，越是具体的 CSS 选择器，执行速度越慢。
- 当 HTML 解析到 script 标签时，会暂停构建 DOM， 完成后才会从暂停的地方重新开始。也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载 JS 文件。并且 CSS 也会影响 JS 的执行，只有当解析完样式表才会执行 JS，所以也可以认为这种情况下，CSS 也会暂停构建 DOM。
Load 和 DOMContentLoaded 区别
- Load 事件触发代表页面中的 DOM，CSS，JS，图片已经全部加载完毕。
- DOMContentLoaded 事件触发代表初始的 HTML 被完全加载和解析，不需要等待 CSS，JS，图片加载。
图层
一般来说，可以把普通文档流看成一个图层。特定的属性可以生成一个新的图层。不同的图层渲染互不影响，所以对于某些频繁需要渲染的建议单独生成一个新图层，提高性能。但也不能生成过多的图层，会引起反作用。
通过以下几个常用属性可以生成新图层
- 3D 变换：
translate3d、translateZ will-change-
video、iframe标签 - 通过动画实现的
opacity动画转换 position: fixed
重绘（Repaint）和回流（Reflow）
概念
重绘和回流是渲染步骤中的一小节，但是这两个步骤对于性能影响很大。
-
重绘是 当节点需要更改外观而不会影响布局的，比如改变
color、background-color、visibility等就叫称为重绘 - 回流是 布局或者几何属性需要改变 就称为回流。
注意： 回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变深层次的节点很可能导致父节点的一系列回流。
会导致回流的操作：
- 页面首次渲染
- 浏览器窗口大小发生改变
- 元素尺寸或位置发生改变
- 元素内容变化（文字数量或图片大小等等）
- 元素字体大小变化
- 添加或者删除可见的
DOM元素 - 激活
CSS伪类（例如：:hover） - 查询某些属性或调用某些方法
一些常用且会导致回流的属性和方法：
-
clientWidth、clientHeight、clientTop、clientLeft -
offsetWidth、offsetHeight、offsetTop、offsetLeft -
scrollWidth、scrollHeight、scrollTop、scrollLeft -
scrollIntoView()、scrollIntoViewIfNeeded() getComputedStyle()getBoundingClientRect()scrollTo()
重绘和回流与Event loop关系
很多人不知道的是，重绘和回流其实和 Event loop 有关。
1. 当 Event loop 执行完 Microtasks 后，会判断 document 是否需要更新。因为浏览器是 60Hz 的刷新率，每 16ms 才会更新一次。
2. 然后判断是否有 resize 或者 scroll ，有的话会去触发事件，所以 resize 和 scroll 事件也是至少 16ms 才会触发一次，并且自带节流功能。
3. 判断是否触发了 media query
4. 更新动画并且发送事件
5. 判断是否有全屏操作事件
6. 执行 requestAnimationFrame 回调
7. 执行 IntersectionObserver 回调，该方法用于判断元素是否可见，可以用于懒加载上，但是兼容性不好
8. 更新界面
9. 以上就是一帧中可能会做的事情。如果在一帧中有空闲时间，就会去执行 requestIdleCallback 回调。
减少重绘和回流
- 使用
translate替代top - 使用
visibility替换display: none，因为前者只会引起重绘，后者会引发回流（改变了布局） - 把 DOM 离线后修改，比如：先把 DOM 给
display:none(有一次 Reflow)，然后你修改 100 次，然后再把它显示出来 - 不要把 DOM 结点的属性值放在一个循环里当成循环里的变量
- 不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局
- 动画实现的速度的选择，动画速度越快，回流次数越多，也可以选择使用
requestAnimationFrame - CSS 选择符从右往左匹配查找，避免 DOM 深度过深
- 将频繁运行的动画变为图层，图层能够阻止该节点回流影响别的元素。比如对于
video标签，浏览器会自动将该节点变为图层。
CSS
- 避免使用
table布局。 - 尽可能在
DOM树的最末端改变class。 - 避免设置多层内联样式。
- 将动画效果应用到
position属性为absolute或fixed的元素上。 - 避免使用
CSS表达式（例如：calc()）。
JavaScript
- 避免频繁操作样式，最好一次性重写
style属性，或者将样式列表定义为class并一次性更改class属性。 - 避免频繁操作
DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。 - 也可以先为元素设置
display: none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。 - 避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。
- 对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。
网友评论