JS中重排与重绘的区别

四时之雨

于 2024-05-24 08:17:56 发布

阅读量330

点赞数 5

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_68695044/article/details/139161721

版权

在网页开发中，重排（reflow）和重绘（repaint）是常见的概念，它们对网页性能和用户体验有着重要影响。本文将介绍重排与重绘的区别，以及触发条件，并附上相应的代码示例。

重排与重绘的概念
1.简述重排的概念

浏览器下载完页面中的所有组件（HTML、JavaScript、CSS、图片）之后会解析生成两个内部数据结构（DOM 树和渲染树），DOM 树表示页面结构，渲染树表示 DOM 节点如何显示。重排是 DOM 元素的几何属性变化，DOM 树的结构变化，渲染树需要重新计算。

2.简述重绘的概念

重绘是一个元素外观的改变所触发的浏览器行为，例如改变 visibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。由于浏览器的流布局，对渲染树的计算通常只需要遍历一次就可以完成。但 table 及其内部元素除外，它可能需要多次计算才能确定好其在渲染树中节点的属性值，比同等元素要多花两倍时间，这就是我们尽量避免使用 table 布局页面的原因之一。

重排与重绘的区别
重排和重绘是浏览器渲染网页时的两个重要流程。重排指的是更改了 DOM 树的结构或者元素的样式，导致浏览器重新计算元素的位置和大小，然后再绘制在屏幕上。而重绘则是当元素样式的改变不影响其在文档流中的位置和大小，只影响其外观时，浏览器会执行重绘操作，重新绘制这些元素。

什么情况下会触发重排和重绘？
触发重排的情况
1.改变窗口大小
2.改变字体大小
3.增加或删除 DOM 元素
4.改变元素位置
5.修改元素尺寸
触发重绘的情况
1.修改元素背景色
2.修改文本颜色
3.添加阴影或轮廓
代码示例
以下是一个简单的代码示例，演示了如何通过改变元素的样式来触发重排和重绘：

<!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>

重排优化有如下五种方法
1.将多次改变样式属性的操作合并成一次操作，减少 DOM 访问。
2.如果要批量添加 DOM，可以先让元素脱离文档流，操作完后再带入文档流，这样只会触发一次重排。（fragment 元素的应用）
3.将需要多次重排的元素，position 属性设为 absolute 或 fixed，这样此元素就脱离了文档流，它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。
4.由于 display 属性为 none 的元素不在渲染树中，对隐藏的元素操作不会引发其他元素的重排。如果要对一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示。这样只在隐藏和显示时触发两次重排。
5.在内存中多次操作节点，完成后再添加到文档中去。例如要异步获取表格数据，渲染到页面。可以先取得数据后在内存中构建整个表格的 html 片段，再一次性添加到文档中去，而不是循环添加每一行。
结论
重排和重绘是网页性能优化中需要重点关注的问题，合理的布局和样式设计可以减少不必要的重排和重绘，提升网页的渲染性能和用户体验。通过了解触发条件，并合理优化代码，可以有效降低重排和重绘的次数，提升网页的性能表现。

希望本文能帮助读者更好地理解重排和重绘的概念，并在实际开发中加以应用。