浏览器的重绘和重排的影响

Posted 2020-09-21 lxjshuju

   浏览器下载完页面中全部的组件之后，会解析生成两个内部数据结构：

1.  DOM树：表示页面结构

2. 表示DOM节点怎样显示

     当DOM和渲染树构建完毕之后，浏览器就開始显示（绘制）页面元素。当DOM的变化影响了元素的几何属性（如改变边框或者高度）浏览器须要又一次计算元素的几何属性。相同其它元素的几何属性和位置也会受到影响。浏览器会使中受到影响的部分失效，并又一次构造渲染树。这个过程被称为所谓的“重排”。完毕重排后。浏览器会又一次绘制受影响的部分到屏幕中，这个过程被称为“重绘”。

    不是全部的DOM变化都影响元素的几何属性。假设演变元素的背景色并不影响它的宽度和高度，这样的情况，仅仅会发生一次重绘。而不会发生重排，由于元素的布局没改变，

重绘和重排对影响速度问题。通常会延迟时间。应尽可能降低这种操作。

    重排发生一般出现这几种情况：

1. 加入或删除可见的DOM元素；

2. 改变元素位置。

3. 元素的尺寸改变（包含：外边距、内边距、边框、高度等）

4. 内容改变（如：文本改变或图片被另外一个不同尺寸的图片替代）

5. 页面渲染器初始化；

6. 浏览器窗体尺寸的改变。

依据改变的范围和程度，渲染树中或大或小的相应部分也须要又一次计算。有些改变会触发整个页面的重排：如当滚动栏出现时候

 每次重排都会产生计算消耗，大多数浏览器通过队列化改动并批量运行来优化重排过程。然而，你可能会强制刷新队列并要求任务立马运行，获取布局信息的操作会导致队列刷新。

一个好的提高程序响应的速度策略就是降低重绘和重排的操作发生。为了降低，应该合并多次对DOM和样式的改动。然后一次处理。

离线操作DOM。使用缓存。并降低訪问局部信息的次数