回流与重绘

一、回流与重绘概述

回流和重绘是浏览器中常见的两个操作，也是网页性能优化的重要方面。回流是指浏览器重新计算元素的位置和大小，以便渲染出正确的布局，而重绘是指浏览器根据新的布局绘制元素的外观。由于回流和重绘都需要消耗一定的资源，因此尽量减少这两个操作对于网页的性能优化非常重要。

二、引起回流和重绘的操作

1、添加、删除元素：当一个元素被添加到文档中或者从文档中删除时，会触发此元素的所有祖先元素的回流计算。

2、元素的位置和大小变化：当元素的位置或大小发生变化时，会触发此元素及其下面的元素的回流。

3、修改元素内容：当元素内容的文字发生变化、图片被修改或者样式被改变时，会触发此元素及其下面的元素的重绘。

三、减少回流和重绘的方法

1、使用文档碎片：将创建元素的操作一次性全部完成，然后将它们一起添加到文档中，可以减少不必要的回流操作。

let ul = document.createElement('ul');
let fragment = document.createDocumentFragment();
 
for(let i=0;i<1000;i++){
  let li = document.createElement('li');
  li.innerHTML = 'list item ' + i;
  fragment.appendChild(li);
}
 
ul.appendChild(fragment);
document.body.appendChild(ul);

2、对于需要频繁修改样式的元素，使用 CSS class 替换 style 属性：修改 style 属性会触发回流，而改变 CSS class 不会触发回流，因此尽量使用 CSS class 来修改样式。

3、尽量减少 DOM 的操作：尽量减少元素的添加、删除和位置、大小等的修改，因为此类操作会触发回流和重绘。

4、使用 css3 的 transform 属性：使用 transform 属性更改元素的位置和大小可以减少回流和重绘次数。

transform:translate(10px,10px);
transform:scale(0.5,0.5);

5、尽量减少触发回流和重绘的操作：例如，不要在滚动事件中进行 DOM 操作或者获取元素位置等操作。

四、回流和重绘的性能分析

可以使用 Chrome 开发者工具的 Performance 面板来分析网页的性能，其中如果出现绿色条的『Layout』和『Paint』，则表示出现了回流和重绘。我们可以通过在代码中打断点，分析代码的性能瓶颈，然后优化代码，减少回流和重绘的频率。