前端学习——重排（回流）和重绘

浏览器的渲染机制

浏览器采用流式布局模型（Flow Based Layout） 浏览器会把 HTML 解析成 DOM，把 CSS 解析成 CSSOM，DOM 和 CSSOM 合并就 产生了渲染树（Render Tree）。 有了RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上。

重绘

一个元素外观改变触发浏览器的行为，浏览器会根据元素的新属性重新回值，使元素呈现新的外观；

通俗来说就是，某一个元素的样式改变了，虽然并不影响其在文档流中的位置，但是浏览器就会对元素进行重新绘制，这就是重绘；

重绘的触发条件

color、backgroundColor、size等改变元素外观的属性

重绘一般发生在 UI 界面；是一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重 新绘制，使元素呈现新的外观。

重排（回流）

当渲染树中的一部分或全部因为元素的规模尺寸、布局、隐藏等改变而需要重新构建，就叫做回流（重排）。每个界面至少需要一次回流（重排）。

通俗来说就是：当增加或删除dom节点，改变元素的尺寸或者触发某些属性，引起页面结构改变时，浏览器就会重新构造dom树会重新渲染页面，这就是回流；

回流的触发条件：
任何页面布局和几何属性的改变都会触发重排。

回流的范围：
在触发回流（重排）的时候，由于浏览器渲染页面是基于流式布局的，所以当触发回流时，会导致周围的 DOM 元素重新排列，它的影响范围有两种：

1、全局范围：从根节点开始，对整个渲染树进行重新布局

2、局部范围：对渲染树的某部分或者一个渲染对象进行重新布局

两者的联系：

回流一定会触发重绘，但是重绘不一定会引起回流。

如何优化或减少回流和重绘：

1、集中改变样式className

2、如果需要创建多个dom节点，可以使⽤ DocumentFragment 创建完后一次性加入 document

3、将需要多次重排的元素，position 属性设为 absolute 或 fixed ，元素脱离了文档流，它的变化不会影响到其他元素

4、display：none；先设置元素为display：none；然后进行页面布局等操作；设置完成后将元素设置为 display：block；这样的话就只引发两次重绘和重排；

5、使用 cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘；

6、不要使用 table 布局， 一个小的改动可能会使整个 table 进行重新；

7、操作 DOM 时，尽量在低层级的 DOM 节点进行操作;

参考链接：https://blog.csdn.net/leoxingc/article/details/127913057