渲染引擎 ​

浏览器的内核主要分为渲染引擎与 JS 引擎，如 chrome 浏览器的 V8 引擎就是 JS 引擎。

什么是重绘与回流 ​

• 重绘（repaint）：元素的外观发生改变，但没有改变布局，浏览器会把元素外观重新绘制
• 重排/回流（reflow）：当DOM的变化影响了元素的几何信息，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。表现为重新生成布局，重新排列元素。

重绘不一定导致重排，但重排一定会导致重绘

哪些操作会导致重排？ ​

• 页面初始化渲染
• 添加或删除可见 dom 元素
• 改变元素位置、大小、边距、内容、字体大小等
• 改变浏览器窗口大小
• 激活 css 伪类
• 动态设置 style 值
• 使用某些查询元素尺寸的方法，如 offsetWidth、getComputedStyle 等（因为要计算当前的位置与尺寸）

哪些操作会导致重绘？ ​

元素外观发生改变，如：color、border-style、visibility、background、border-radius、box-shadow 等

如何减少重排？ ​

1. 合并样式修改 将需要动态修改的 css 样式一次性设置，这样浏览器会将修改在下一次屏幕刷新（显示器hz）时一次性重排；

2. 使用 absolute、fixed 脱离文档流

3. 动画元素脱离文档流，开启GPU加速 利用 css 属性 transform 、will-change 等，比如改变元素位置，我们使用 translate 会比使用绝对定位改变其 left 、top 等来的高效，因为它不会触发重排或重绘，transform 使浏览器为元素创建一个 GPU 图层，这使得动画元素在一个独立的层中进行渲染。当元素的内容没有发生改变，就没有必要进行重绘。

现代浏览器已经没有了渲染树 Render Tree了，会生成一颗布局树，然后分层，在提交到合成线程进行光栅化，生成位图，期间可以使用gpu进程来加速生成位图，然后由浏览器进程绘制到屏幕上。transform做动画之所以性能好，是因为只影响图层合成，合成发生在合成线程，不阻塞渲染进程的主线程