重绘和重排是开销很大的操作，会导致web应用的UI无响应，所以要尽量减少这类进程的发生。让我们简单看一下。

前言

在下载完页面中的所有内容：HTML、JavaScript、CSS、image ——之后，浏览器将解析并生成两个内部数据结构：

DOM树：表示页面结构

呈现树：指示DOM节点如何显示。

DOM树中每个需要显示的节点在渲染树中至少有一个对应的节点(隐藏的DOM元素在渲染树中没有对应的节点)。渲染树中的节点被称为“框架”或“盒子”，页面元素被理解为具有填充、边距、边框和位置的盒子。一旦构建了DOM树和呈现树，浏览器就开始显示(绘制)页面元素。

当DOM的变化影响到元素的几何属性(如宽度和高度)时，——浏览器需要重新计算元素的几何属性，其他元素的几何属性和位置也会受到影响。浏览器将使渲染树受影响的部分无效，并重新构建渲染树。这个过程称为回流。重排后，浏览器会将受影响的部分重绘到屏幕上，这个过程叫做重绘。

重绘和重排是开销很大的操作，会导致web应用的UI无响应，所以要尽量减少这类进程的发生。

引起重排的原因

或者添加或删除可见的DOM元素。

元素位置变化

元素大小变化

内容更改(例如，文本更改或图片被另一张不同大小的图片替换)

页面呈现初始化

浏览器窗口大小改变

渲染树变化的排队和刷新

因为每次重排都会产生计算成本，所以大多数浏览器通过排队修改和批量执行(将多个重排过程合并为一个)来优化重排过程。但是，有些操作会强制刷新队列，并要求立即执行队列中的重新排列(这将使浏览器的优化策略无效)。

获取布局信息的操作会导致队列被强制刷新，使得浏览器不得不在渲染队列中执行“挂起的更改”并触发重新排列以返回正确的值。

偏顶，偏左，偏宽，偏高

scrollTop，scrollLeft，scrollWidth，scrollHeight

clientTop，clientLeft，clientWidth，clientHeight

getComputedStyle()

优化方法：版面信息发生变化时尽量不要查询，版面信息发生变化后再查询。

最小化重绘和重排

重绘和重排的开销非常大，所以提高程序响应速度的一个好策略就是减少这类操作的发生。为了减少出现的次数，您应该多次合并对DOM和style的修改，然后一次性处理它们。

将多个更改合并到样式中。

var El=document . getelementbyid( my div )

el.style.borderLeft=1px

el.style.borderRight=2px

el.style.padding=5px

在上面的例子中，有两个问题：

style属性的每一次改变都会影响元素的集合结构，最坏的情况下会导致浏览器触发三次重排(大多数现代浏览器都为此进行了优化，只触发一次重排)。

上面的代码访问DOM 4次。

优化方法：使用cssText属性，合并所有更改，然后一次性处理。

var El=document . getelementbyid( my div )

El . style . CSS text= border-left:1px；border-right:2px；填充：5px；

批量修改DOM

当需要对DOM元素执行一系列操作时，可以通过以下步骤减少重绘和重排的次数

1.从文档流中分离元素。

2.对其进行一些列操作。

3.将元素带回到文档中

从文档流中分离元素的方法：

隐藏元素，应用修改，并重新显示它们。

使用document fragment在当前DOM之外构建一个子树，然后将其复制到文档中。

将元素元素复制到文档之外的另一个节点，修改副本，然后在完成后替换原始元素。

缓存布局信息

上面介绍中提到，浏览器通过排队修改和批量执行，减少了重新排列的次数。但是，当查询布局信息(如获取偏移量、滚动位置和计算的样式值)时，浏览器将刷新队列并应用所有更改，以便返回最新值。所以最好的办法是尽量减少布局信息的获取次数，获取后复制到局部变量，再对局部变量进行操作。

IE和：hover

避免使用效果：悬停在大量元素上。

这就是本文的全部内容。希望对大家的学习有帮助，支持我们。