高性能JavaScript 重排与重绘(2)

高性能JavaScript 重排与重绘(2) 完整攻略

什么是重排与重绘

在了解高性能JavaScript中的重排(re-layout)和重绘(re-paint)之前，需要先了解一些页面绘制的基础知识。当我们访问一个网站时，浏览器会先对HTML进行解析，并生成DOM树。接着，CSS样式会被解析，并生成样式树。浏览器在解析文档的同时，还会对JavaScript进行解析，生成JavaScript对象模型(Javascript Object Model, DOM)。最后，DOM和样式树会合并生成渲染树(Render Tree)，然后开始布局和绘制。

在这个渲染树中，每个节点对应一个网页元素，每个元素都有自己的样式。当布局（layout）或绘制（paint）需要的属性值改变时，就需要重新计算样式，以确定每个元素的位置、大小和颜色等。在这个过程中，就会进行重排（重新布局）和重绘（重新绘制）。

重排是指当渲染树中元素的布局或几何属性发生改变时，需要重新计算渲染树中所有元素的几何属性，然后将它们绘制在屏幕上。这个过程非常耗费时间和资源。

重绘是指当元素的可见属性（例如，颜色、背景等）发生改变时，需要将元素重新绘制到屏幕上。这个过程比重排要快一些，但也需要一定的时间和资源。

如何减少重排与重绘

1.使用DocumentFragment

当需要频繁操作DOM时，会导致频繁的重排和重绘。这时可以使用DocumentFragment来优化。DocumentFragment是一个轻量级的文档片段，在文档中没有对应节点，可以将元素添加到DocumentFragment中，减少DOM操作时的重排和重绘。将所有操作在DocumentFragment中完成后，再将DocumentFragment一次性添加到文档中。

var fragment = document.createDocumentFragment();
for (var i=0; i<10; i++) {
  var node = document.createElement("li");
  var textnode = document.createTextNode("list item " + i);
  node.appendChild(textnode);
  fragment.appendChild(node);
}
document.getElementById("myList").appendChild(fragment);

2.使用CSS3硬件加速

CSS3硬件加速是让浏览器使用GPU来加速页面的渲染。一般情况下，浏览器使用CPU来完成页面重排和重绘，但是GPU的渲染速度更快，可以加快页面绘制的速度，减少重排和重绘的时间。

在使用CSS3硬件加速时，需要使用transform和opacity属性。transform属性可以实现2D或3D的位移、旋转、缩放和倾斜等效果，而opacity属性可以设置元素的透明度。这两个属性可以触发GPU加速，并且不会导致重排和重绘。

.element {
  transform: translateZ(0);
  opacity: 0.99;
}

结论

重排和重绘是影响页面性能的重要因素。为了提高网页的性能，我们应该尽量减少页面的重排和重绘。在实际开发中，可以使用DocumentFragment减少DOM操作，或者使用CSS3硬件加速来优化页面渲染，从而减少页面的重排和重绘。