6、什么是重排重绘？

一、重排（reflow）

1. 定义
   • 重排是指浏览器重新计算元素的几何属性（如位置、尺寸等）的过程。当文档的布局（layout）因为某些操作而发生改变时，浏览器需要重新构建渲染树（render tree）来确定元素在页面中的位置和大小。
   • 例如，当你改变了一个元素的宽度、高度、边距（margin）、填充（padding）、边框（border）等属性，或者添加、删除一个 DOM 节点时，浏览器会触发重排。因为这些操作影响了页面的布局结构，浏览器需要重新计算页面上其他元素的位置和大小，以确保页面的布局是正确的。
2. 触发重排的常见操作
   • 改变 DOM 结构
     • 当你使用 JavaScript 动态地添加或删除一个<div>元素时，例如：

       // 创建一个新的div元素
       var newDiv = document.createElement('div');
       newDiv.textContent = '这是一个新的div';
       // 将新的div元素添加到body元素中
       document.body.appendChild(newDiv);
       

     • 这种添加元素的操作会改变 DOM 树的结构，浏览器会重新计算页面的布局，从而触发重排。
   • 改变元素的几何属性
     • 假设你有一个 CSS 样式如下的<div>元素：

       div {width: 100px;height: 100px;background - color: blue;
       }
       

     • 如果你通过 JavaScript 改变这个<div>的宽度为200px，像这样：

       var divElement = document.querySelector('div');
       divElement.style.width = '200px';
       

     • 浏览器会重新计算这个<div>元素以及它周围相关元素的位置和大小，因为改变宽度可能会影响到页面的布局，所以会触发重排。

二、重绘（repaint）

1. 定义
   • 重绘是指当元素的外观（如颜色、背景等）发生改变时，浏览器重新绘制该元素的过程。它不会影响元素的几何属性，也就是不会改变元素在页面中的位置和大小。
   • 例如，当你只改变了一个元素的颜色、背景色、透明度（opacity）等外观属性时，浏览器会进行重绘。
2. 触发重绘的常见操作
   • 改变元素的颜色相关属性
     • 比如有一个<p>元素，其 CSS 样式如下：

       p {color: black;
       }
       

     • 如果你通过 JavaScript 改变这个<p>元素的颜色为红色，像这样：

       var pElement = document.querySelector('p');
       pElement.style.color = 'red';
       

     • 浏览器会重新绘制这个<p>元素，因为颜色发生了改变，但元素的位置和大小没有受到影响，所以只会触发重绘。

重排的开销通常比重绘要大，因为重排涉及到重新计算元素的位置和大小等几何属性，可能会导致浏览器重新布局整个页面或者部分页面区域。在网页性能优化中，尽量减少不必要的重排和重绘操作是很重要的。