在网页开发中，重排（reflow）和重绘（repaint）是常见的概念，它们对网页性能和用户体验有着重要影响。本文将介绍重排与重绘的区别，以及触发条件，并附上相应的代码示例。
重排与重绘的概念
1.简述重排的概念
浏览器下载完页面中的所有组件（HTML、JavaScript、CSS、图片）之后会解析生成两个内部数据结构（DOM 树和渲染树），DOM 树表示页面结构，渲染树表示 DOM 节点如何显示。重排是 DOM 元素的几何属性变化，DOM 树的结构变化，渲染树需要重新计算。
2.简述重绘的概念
重绘是一个元素外观的改变所触发的浏览器行为，例如改变 visibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。由于浏览器的流布局，对渲染树的计算通常只需要遍历一次就可以完成。但 table 及其内部元素除外，它可能需要多次计算才能确定好其在渲染树中节点的属性值，比同等元素要多花两倍时间，这就是我们尽量避免使用 table 布局页面的原因之一。
重排与重绘的区别
重排和重绘是浏览器渲染网页时的两个重要流程。重排指的是更改了 DOM 树的结构或者元素的样式，导致浏览器重新计算元素的位置和大小，然后再绘制在屏幕上。而重绘则是当元素样式的改变不影响其在文档流中的位置和大小，只影响其外观时，浏览器会执行重绘操作，重新绘制这些元素。
什么情况下会触发重排和重绘？
触发重排的情况
- 改变窗口大小
- 改变字体大小
- 增加或删除 DOM 元素
- 改变元素位置
- 修改元素尺寸
触发重绘的情况
- 修改元素背景色
- 修改文本颜色
- 添加阴影或轮廓
代码示例
以下是一个简单的代码示例，演示了如何通过改变元素的样式来触发重排和重绘：
<!DOCTYPE html> <html> <head> <style> .box { width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div class="box"></div> <button onclick="changeStyle()">改变样式</button> <script> function changeStyle() { var box = document.querySelector('.box'); box.style.width = '200px'; // 触发重排和重绘 box.style.backgroundColor = 'blue'; // 仅触发重绘 } </script> </body> </html>
重排优化有如下五种方法
- 将多次改变样式属性的操作合并成一次操作，减少 DOM 访问。
- 如果要批量添加 DOM，可以先让元素脱离文档流，操作完后再带入文档流，这样只会触发一次重排。（fragment 元素的应用）
- 将需要多次重排的元素，position 属性设为 absolute 或 fixed，这样此元素就脱离了文档流，它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。
- 由于 display 属性为 none 的元素不在渲染树中，对隐藏的元素操作不会引发其他元素的重排。如果要对一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示。这样只在隐藏和显示时触发两次重排。
- 在内存中多次操作节点，完成后再添加到文档中去。例如要异步获取表格数据，渲染到页面。可以先取得数据后在内存中构建整个表格的 html 片段，再一次性添加到文档中去，而不是循环添加每一行。
结论
重排和重绘是网页性能优化中需要重点关注的问题，合理的布局和样式设计可以减少不必要的重排和重绘，提升网页的渲染性能和用户体验。通过了解触发条件，并合理优化代码，可以有效降低重排和重绘的次数，提升网页的性能表现。
希望本文能帮助读者更好地理解重排和重绘的概念，并在实际开发中加以应用。
