浏览器的渲染步骤，回流，重绘

一：浏览器的渲染步骤

　　1.处理 HTML 并构建 DOM 树。

　　2.处理 CSS 构建 CSSOM 树。

　　3.将 DOM 与 CSSOM 合并成一个渲染树。

　　4.根据渲染树来布局，计算每个节点的位置。

　　5.调用 GPU 绘制，合成图层，显示在屏幕上。

二：回流

　　布局改变，或者DOM的尺寸等属性改变（比如修改元素的 width、height、top）时。浏览器需要重新计算元素的属性，然后再将计算的结果绘制出来，这个过程叫做回流。

三：重绘

　　只修改样式，而不影响页面布局（比如修改元素的 visibility、color、background-color 等）。浏览器不需重新计算元素的位置尺寸等，直接为该元素绘制新的样式。这个过程叫做重绘。

 

 回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变深层次的节点很可能导致父节点的一系列回流。

四：会导致回流的操作：

• 页面首次渲染
• 浏览器窗口大小发生改变
• 元素尺寸或位置发生改变
• 元素内容变化（文字数量或图片大小等等）
• 元素字体大小变化
• 添加或者删除可见的DOM元素
• 激活CSS伪类（例如：:hover）
• 查询某些属性或调用某些方法

参考链接：https://juejin.cn/post/6844903781084168206

　　　　   https://juejin.cn/post/6844904119157669902