简单理解重绘、回流（重排）

2024-07-10 23:02| 来源: 网络整理| 查看: 265

一、是什么？重绘和回流经常被提起，但是我之前只知道它和性能优化有关，具体的不是很清楚，这段时间看了一些博客和资料，整理一下。（回流和重排是一个含义）重绘和回流涉及到浏览器底层的渲染，所以我们先来了解一下浏览器的渲染过程。

解析html，生成dom树；解析css，生成css dom树dom树和css dom树结合生成渲染树对渲染树进行布局绘制渲染树

浏览器渲染过程当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建就叫回流（reflow）。当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的就叫重绘（repaint）。简单来说，当我们删除增加节点，或者修改元素的宽高的时候，页面布局会发生变化，DOM树结构会发生变化，那么会重新构建DOM树，DOM树构建完后，又会重新构造渲染树，再去渲染界面，这个过程就叫做回流。当我们改变元素的属性，只会影响外观不会影响到布局的时候，dom不需要重新构造，只会改变渲染树，然后重新渲染界面，这就叫重绘。所以，回流一定会引起重绘，重绘不一定会引起回流。因此，回流的开销要比重绘大，我们要尽量避免引起回流。 tips: display:none的节点是不会渲染的（脱离了文档流），但是visibility和opacity隐藏的几点还是会渲染的。script、meta、link这些节点也不会渲染。

二、哪些行为会产生回流？

添加或删除可见的DOM元素元素的位置发生变化元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。页面一开始渲染的时候（所有组件都要进行首次布局，这是开销最大的一次回流）浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）resize事件发生时

三、哪些行为会产生重绘？元素的属性改变，只会影响外观不会影响布局的时候会产生重绘

四、怎么减少回流？

对于几何属性的变化，元素高度变化，字体大小变化这些，如果要修改多个属性，最好放到一个class中，直接修改class名称。将position属性设置为absolute或fixed，设置为脱离文档流，它的改变不会影响到其他元素布局。离线处理：当对 dom 节点有较大改动的时候，先将元素脱离文档流，然后对元素进行操作，最后再把操作后的元素放回文档流。只会在隐藏和展现的时候引发两次回流和重绘。 1）改变 display 属性，改为none，临时将某个元素从文档流中脱离，然后再block恢复它 var ul = document.getElementById('list'); ul.style.display = 'none'; // 对 ul 进行操作 ul.style.display = 'block'

2）createDocumentFragment，创建文档片段，操作后一次性把文档片段添加到文档流中（适用于需要添加很多节点的时候）

var fragment = document.createDocumentFragment() // 在 fragment 上进行一系列操作 document.getElementById('list').appendChild(fragment)

3）通过在需要操作的节点上创建副本（cloneNode），然后在副本上进行操作，最后进行替换（replaceChild）

var ul = document.getElementById('list'); var clone = ul.cloneNode(true); // 对 clone 节点进行操作 ul.parentNode.replaceChild(clone, ul);

参考于： https://segmentfault.com/a/1190000017329980 https://www.cnblogs.com/echolun/p/10105223.html

【本文地址】

公司简介

联系我们