详细理解重绘与回流/重排的过程

清疚 2022-01-29 06:06 317阅读 0赞

**前言：重绘与回流是由于浏览器的再次渲染所引起的一个话题，所以我们需要先了解浏览器的渲染过程；  
一个前端页面无非就是有html、css、JavaScript组成的。**

tips:网上有回流和重排两个说法，其实都是一个意思

通常来说，渲染引擎会解析HTML文档来构建DOM树，与此同时，渲染引擎也会用CSS解析器解析CSS文档构建CSSOM树。接下来，DOM树和CSSOM树关联起来构成渲染树（RenderTree），这一过程称为Attachment。然后浏览器按照渲染树进行布局（Layout），最后一步通过绘制显示出整个页面。  
整体图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70]  
详细图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70 1]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70 2]  
当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。

## 注意：回流必将引起重绘，而重绘不一定会引起回流。回流会导致渲染树需要重新计算，开销比重绘大，所以我们要尽量避免回流的产生 ##

## 回流的产生： ##

1.页面第一次渲染 在页面发生首次渲染的时候，所有组件都要进行首次布局，这是开销最大的一次回流。  
2.浏览器窗口尺寸改变  
3.元素位置和尺寸发生改变的时候  
4.新增和删除可见元素  
5.内容发生改变（文字数量或图片大小等等）  
6.元素字体大小变化。  
7.激活CSS伪类（例如：:hover）。  
8.设置style属性  
9.查询某些属性或调用某些方法。比如说：  
offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight  
除此之外，当我们调用getComputedStyle方法，或者IE里的currentStyle时，也会触发回流，原理是一样的，都为求一个“即时性”和“准确性”。

## 重绘的产生： ##

当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如  
visibility、outline、背景色等属性的改变。

## 下面的代码是影响回流和重绘的: ##

var s = document.body.style;
    s.padding = "2px"; // 回流+重绘
    s.border = "1px solid red"; // 再一次 回流+重绘
    s.color = "blue"; // 重绘
    s.backgroundColor = "#ccc"; // 重绘
    s.fontSize = "14px"; // 再一次 回流+重绘
    document.body.appendChild(document.createTextNode('abc!'));// 添加node，再一次 回流+重绘

**因为 JavaScript 可以同时修改 DOM 和 CSSOM。  
由于浏览器不确定特定的JavaScript会做什么，所以它采取的预防措施是停止整个DOM构造，一般情况我们会将JavaScript  
放到页面的底部，等页面要渲染结束再引进来，JavaScript是影响回流和重绘的关键。**

## 常见的避免方法： ##

**1.样式集中改变**  
通过class和cssText进行集中改变样式 未进行优化的代码是这样的：

//bad
    var left = 10;
    var top = 10;
    el.style.left = left + "px";
    el.style.top = top + "px";

虽然现在大部分现代浏览器都会有Flush队列进行渲染队列优化，但是有些老版本的浏览器比如IE6这样的坑货效率依然低下： 这时我们就可以通过上面所说的利用class和cssText属性集中改变样式

//good
    el.className += " className";
    //or
    el.style.cssText += "; left: " + left + "px; top: " + top + "px;";

**2. 缓存布局信息**

// bad 强制刷新 触发两次回流
    div.style.left = div.offsetLeft + 1 + 'px';
    div.style.top = div.offsetTop + 1 + 'px';
    // good 缓存布局信息 相当于读写分离
    var curLeft = div.offsetLeft;
    var curTop = div.offsetTop;
    div.style.left = curLeft + 1 + 'px';
    div.style.top = curTop + 1 + 'px';

**3.将position属性设置为absolute或fixed，position属性为absolute或fixed的元素，回流开销比较小，不用考虑它对其他元素的影响**

**4.让要操作的元素进行”离线处理”**  
处理完后一起更新使用DocumentFragment进行缓存操作,引发一次回流和重绘；  
可以参考这篇文章 了解DocumentFragment 给我们带来的性能优化使用display:none技术，只引发两次回流和重绘；前面也提到,如果影响到页面布局就会导致回流 那么先把元素设置为 display:none 最后再 display:block 即可使用cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘；

[参考][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70]: /images/20220129/c2f6054fca254fcb860a73d234446ab4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2019052111032346.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70 2]: /images/20220129/326c327e62e0474584062f3e1018c89c.png
[Link 1]: http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/