【基础】浏览器渲染原理 + 理解回流和重绘

浏览器渲染过程：

1. 解析HTML，生成DOM树，解析CSS，生成CSSOM树
2. 将DOM树和CSSOM树结合，去除不可见元素，生成Render Tree渲染树

1. 回流（Layout)：根据生成的渲染树，进行回流，得到节点的几何信息（位置，大小）
2. 重绘（Painting）：根据渲染树以及回流得到的几何信息，得到节点的绝对像素。

1. Display：将像素发送给GPU，展示在页面上。

构建渲染树流程：

1. 从DOM树的根节点开始遍历每个可见节点。
2. 对每个可见节点，找到CSSOM树中对应的规则，并且应用。

1. 根据每个可见节点以及对应样式，组合生成渲染树。

不可见节点：

1. 一些不会渲染输出的节点，比如script，meta，link等。
2. 一些在CSS中隐藏的节点，比如display:none。使用visibility和opacity隐藏的节点，还是会显示在渲染树上（还占据文档空间）只有display：none的节点才不会显示在渲染树上。

回流和重绘的原理：

渲染树上的元素被称为渲染对象，每个渲染对象都代表一个矩形区域，通常对应相关节点的Css属性，包含宽度，高度，位置等几何信息。框的类型受与节点相关的display属性的影响，根据不同display类型创建不同渲染对象。

• RenderInline
• RenderBlock

• RenderListItem

每个渲染对象都有layout（回流）,paint（重绘）方法。

布局是一个递归过程，根渲染对象是从HTML元素开始，递归遍历部分或者全部数结构，每个渲染对象都会调用需要进行布局的子代 layout和paint方法。

回流：

渲染对象在创建完成到添加到渲染树时，只是将DOM节点和它对应的样式结合起来，并不包含位置和大小信息。所以需要 layout(回流)这个过程来计算位置和大小，称作回流

会导致回流的操作：

• 页面首次渲染
• 浏览器窗口大小发生改变

• 元素尺寸或位置发生改变
• 元素内容变化（文字数量或图片大小等等）

• 元素字体大小变化
• 添加或者删除可见的DOM元素

• 激活CSS伪类（例如：:hover）
• 查询某些属性或调用某些方法

一些常用且会导致回流的属性和方法：

• clientWidth、clientHeight、clientTop、clientLeft
• offsetWidth、offsetHeight、offsetTop、offsetLeft

• scrollWidth、scrollHeight、scrollTop、scrollLeft
• scrollIntoView()、scrollIntoViewIfNeeded()

• getComputedStyle()
• getBoundingClientRect()

• scrollTo()

重绘：

通过构建渲染树和回流，知道哪些节点可见，以及可见节点样式和具体的几何信息，那么我们可以将渲染树的每个节点转换为屏幕上的实际像素，这个过程叫重绘。

触发：当页面中元素的样式改变不影响它在文档流中的位置，比如（color,background-color,visibility等）浏览器会将新样式重新绘制。

总结：回流必将引起重绘，重绘不一定会引起回流。

如何减少回流和重绘：

1. 减少强制同步布局：避免频繁读取会引发回流/重绘的属性，如果需要多次使用，就用一个变量缓存起来。（因为读取offset家族，scroll家族，client家族属性或者是调用getComputedStyle()，getBoundingCliendRect()方法时，会立即清空队列。
2. 避免频繁操作DOM，可以创建一个documentFragment，DOM操作都在上面执行，最后再将它挂载在DOM树上。

1. 开启GPU加速：CSS的will-change属性，不支持will-change属性的可以用translateZ(0)
2. 使用requestAnimationFrame()

1. 使用requestIdleCallback()

Css:

• 避免使用table布局。
• 尽可能在DOM树的最末端改变class。

• 避免设置多层内联样式。
• 将动画效果应用到position属性为absolute或fixed的元素上。

• 避免使用CSS表达式（例如：calc()）。

js:

• 避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性。
• 避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。

• 也可以先为元素设置display: none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。
• 避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。

• 对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。

参考：

浏览器渲染过程与性能优化 - 掘金

https://juejin.cn/post/6844903569087266823

浏览器渲染之回流重绘 - 掘金