JavaScript中重排与重绘的区别及触发条件

2023-12-13 03:37:56

在网页开发中，重排（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 片段，再一次性添加到文档中去，而不是循环添加每一行。

结论

重排和重绘是网页性能优化中需要重点关注的问题，合理的布局和样式设计可以减少不必要的重排和重绘，提升网页的渲染性能和用户体验。通过了解触发条件，并合理优化代码，可以有效降低重排和重绘的次数，提升网页的性能表现。

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

文章来源:https://blog.csdn.net/TianXuab/article/details/134958080
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。