Repaints and Reflows 重绘和重排版

Posted 2020-07-31 参天树

当浏览器下载完所有页面html标记，javascript，CSS，图片之后，它解析文件并创建两个内部数据

 一棵DOM树 表示页面结构

一棵渲染树 表示DOM节点如何显示

渲染树中为每个需要显示的DOM树节点存放至少一个节点（隐藏DOM元素在渲染树中没有对应节点）。渲染树上的节点称为“框”或者“盒”，符合CSS模型的定义，将页面元素看作一个具有填充、边距、 边框和位置的盒。一旦DOM树和渲染树构造完毕，浏览器就可以显示（绘制）页面上的元素了

 

当DOM改变影响到元素的几何属性（宽和高）——例如改变了边框宽度或在段落中添加文字，将发生一系列后续动作——浏览器需要重新计算元素的几何属性，而且其他元素的几何属性和位置也会因此改变受到影响。浏览器使渲染树上受到影响的部分失效，然后重构渲染树。这个过程被称作重排版。

重排版完成时，浏览器在一个重绘进程中重新绘制受影响的部分到屏幕中， 该过程称为"重绘"

重绘和重排版是负担很重的操作，可能导致网页应用的用户界面失去相应。所以 尽可能减少这类事情的发生

 

在下述情况中会发生重排版：

添加或删除可见的DOM元素
元素位置改变
元素尺寸改变（因为边距，填充，边框宽度，宽度，高度等属性改变）
内容改变，例如，文本改变或图片被另一个不同尺寸的所替代
最初的页面渲染
浏览器窗口改变尺寸

获取布局信息的操作将导致刷新队列动作，例如：下面这些方法

 offsetTop, offsetLeft, offsetWidth, offsetHeight
• scrollTop, scrollLeft, scrollWidth, scrollHeight
• clientTop, clientLeft, clientWidth, clientHeight
• getComputedStyle() (currentStyle in IE)（在IE中此函数称为currentStyle）
 布局信息由这些属性和方法返回最新的数据，所以浏览器不得不运行渲染队列中待改变的项目并重新排版以返回正确的值

最小化重绘和重排版

1.将所有改变合并在一起执行，只修改DOM一次 例如 定义数组， 把所有动态创建的dom 放入数组 一次加入页面。

2.从文档流中摘除该元素 有三种基本方法可以将DOM从文档中摘除

2.1隐藏元素，进行修改，然后再显示它。

2.2在文档之外创建文档片断
var tempDom = document.createDocumentFragment();
appendDataToElement(tempDom , data);
document.getElementById(‘mylist‘).appendChild(tempDom );
推荐用文档片断（第二种解决方案）因为它最少数量的DOM操作和重排版。

2.3第三种解决方法首先创建要更新节点的副本，然后在副本上操作，最后用新节点覆盖老节点：
 var old = document.getElementById(‘mylist‘);
var clone = old.cloneNode(true);
appendDataToElement(clone, data);
old.parentNode.replaceChild(clone, old);

让元素脱离动画流
使用以下步骤可以避免对大部分页面进行重排版：

1.使用绝对坐标定位页面动画的元素，使它位于页面布局流之外。
2.启动元素动画。当它扩大时，它临时覆盖部分页面。这是一个重绘过程，但只影响页面的一小部分，避免重排版并重绘一大块页面。
3.动画结束时，恢复定位，从而只一次下移文档其他元素的位置。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

当浏览器下载完所有页面HTML标记，JavaScript，CSS，图片之后，它解析文件并创建两个内部数据

结构：