HTML 的渲染是由浏览器进行的，当浏览器加载 HTML 文档并构建出 DOM 树后，将会进入到渲染流程。在这个过程中，浏览器需要进行两个关键操作：回流(reflow)和重绘(repaint)。
回流和重绘都是浏览器为了更新页面而进行的操作，但它们之间有很大的区别。回流是指当 DOM 结构发生变化时，浏览器需要重新计算元素的布局和位置，并重新绘制整个页面以确保新的布局能够正确地呈现在屏幕上。而重绘则是指当元素的样式发生变化但不影响其布局和位置时，浏览器只需重新绘制该元素以反映出其新的样式。
总之，回流和重绘是影响页面性能的关键因素之一。了解这两个概念以及如何避免它们对网页的影响，可以帮助我们更好地编写高效的前端代码。
HTML 的渲染是由浏览器进行的，当浏览器加载 HTML 文档并构建出 DOM 树后，将会进入到渲染流程。在这个过程中，浏览器需要进行两个关键操作：回流(reflow)和重绘(repaint)。回流和重绘都是浏览器为了更新页面而进行的操作，但它们之间有很大的区别。回流是指当 DOM 结构发生变化时，浏览器需要重新计算元素的布局和位置，并重新绘制整个页面以确保新的布局能够正确地呈现在屏幕上。而重绘则是指当元素的样式发生变化但不影响其布局和位置时，浏览器只需重新绘制该元素以反映出其新的样式。
简而言之，重绘是当元素的样式更改时，浏览器会重新绘制元素，但不会影响其布局，而回流则是在修改元素的布局属性时，浏览器需要根据新的布局信息重新计算元素的位置和大小，并重新绘制页面。因此，回流比重绘的代价更高。
以下是一些常见的导致回流和重绘的操作：
- 改变窗口大小
- 改变字体大小
- 增加或删除可见的 DOM 元素
- 改变元素的位置、尺寸或形状
- 修改元素的样式（如颜色、背景、边框等）
- 操作表格内容
<!DOCTYPE html>
<html>
<head>
<title>HTML 重绘和回流 Demo</title>
<style>
/* 修改背景颜色会导致所有元素进行重绘 */
body {
background-color: #f3f3f3;
}
/* 修改元素尺寸会导致该元素及其子元素进行回流和重绘 */
.box {
width: 200px;
height: 200px;
border: 1px solid black;
}
/* 修改元素位置会导致该元素及其兄弟元素进行回流 */
.box2 {
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="box"></div>
<div>
<p>Hello World!</p>
<!-- 修改文字内容会导致该元素及其子元素进行重绘 -->
<button>Click me!</button>
</div>
<div class="box box2"></div>
</body>
</html>
如果要最小化回流和重绘的次数，可以采取以下一些措施：
- 避免频繁地操作 DOM 元素，可以使用文档片段或离线 DOM 进行批量操作。
- 尽可能地优化 CSS 样式，避免使用复杂的选择器和嵌套层次过深的规则。
- 使用 CSS3 的 transform、opacity 等属性代替改变元素的位置和大小。
- 将动画效果应用到 position 为 fixed 或 absolute 的元素上，这样便不会引起其他元素的回流和重绘。
- 使用事件委托来减少事件处理程序的数量。
- 对于表格操作，可以将表格转换成 div 布局，这样就可以避免大量的 table 回流。
- 使用 class 而不是直接操作元素样式
- 不要频繁读取布局属性值
- 将需要进行大量计算的元素脱离文档流，避免对其它元素造成影响
- 避免使用 table 布局
51
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
