10 种操作导致浏览器 Reflow

一、重排(Reflow)

Reflow（重排）是浏览器重新计算和更新元素的几何属性和布局信息的过程，它会导致页面的重新渲染。Reflow 是性能开销很大的操作，因此需要尽量避免。

二、改变窗口尺寸

浏览器窗口大小发生改变，造成正给页面的重排，以下是浏览器改变窗口的 API：

window.resizeTo

ts 复制代码

window.resizeTo(width, height);

window.resizeBy

ts 复制代码

window.resizeBy(widthDelta, heightDelta);

三、改变元素尺寸

修改元素的宽度、高度、内外边距等属性，或者内容的大小。通过 el.style 修改 style 相关的属性。

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <style>
    #app {
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="app">Hello, World!</div>
  <button onclick="changeSize()">改变大小</button>

  <script>
    function changeSize() {
      // 获取元素
      var element = document.getElementById('app');

      // 修改元素的宽度和高度
      element.style.width = '200px';
      element.style.height = '50px';
      element.style.padding = '50px';
    }
  </script>
</body>
</html>

四、改变字体

修改文本的字体大小、字体类型或行高会导致受影响的文本块重新计算其大小。

ts 复制代码

var element = document.getElementById('app');

// 修改元素的字体大小、字体类型和行高
element.style.fontSize = '24px';
element.style.fontFamily = 'Verdana, sans-serif';
element.style.lineHeight = '1.2';

五、添加或删除DOM元素

增加、删除或移动DOM元素可能会影响周围元素的布局。

ts 复制代码

// 增加
var newBox = document.createElement('div');
newBox.className = 'box';
newBox.textContent = 'New Box';
document.body.appendChild(newBox);

// 删除
var elementToRemove = document.getElementById('box1');
if (elementToRemove) {
    document.body.removeChild(elementToRemove);
}

六、更改元素的位置

修改元素的位置属性，如position和top、left。

ts 复制代码

var element = document.getElementById('box1');

// 修改元素的位置属性
element.style.position = 'absolute';
element.style.top = '50px';
element.style.left = '50px';

七、计算元素的位置或尺寸

当 JS 代码尝试读取元素的位置或尺寸时，浏览器可能需要执行重排操作以确保读取的值是最新的。

ts 复制代码

var element = document.getElementById('myElement');

// 读取元素的位置属性
var top = element.offsetTop;
var left = element.offsetLeft;

alert('Top: ' + top + ', Left: ' + left);

八、更改浏览器默认字体大小

修改浏览器默认字体大小可能会导致整个页面的重排，因为所有文本元素都将根据新的基准大小重新计算。

ts 复制代码

// 修改浏览器默认字体大小
document.body.style.fontSize = '20px';

九、表格布局

表格布局的变化可能会导致整个表格的重排。

ts 复制代码

// 获取表格元素
var table = document.querySelector('table');

// 添加新行和单元格
var newRow = document.createElement('tr');
var newCell1 = document.createElement('td');
var newCell2 = document.createElement('td');
newCell1.textContent = 'New Row, Cell 1';
newCell2.textContent = 'New Row, Cell 2';
newRow.appendChild(newCell1);
newRow.appendChild(newCell2);
table.appendChild(newRow);

十、伪类选择器

使用伪类选择器（如:hover）可能导致重排，因为这些样式的应用可能会更改元素的几何属性。

ts 复制代码

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      transition: width 0.3s;
    }

    .box:hover {
      width: 150px;
    }
  </style>
</head>
<body>
  <div class="box">Hover me</div>
</body>
</html>

十一、动画和过渡

使用 CSS 动画和过渡可能导致频繁的重排，特别是在需要改变元素的位置或尺寸时。

ts 复制代码

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      animation: scale 2s infinite alternate;
    }

    @keyframes scale {
      0% {
        transform: scale(1);
      }
      100% {
        transform: scale(1.5);
      }
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

十二、减小重排的策略

将样式更改合并为一次操作，以减少多次重排。
使用 CSS3 的硬件加速，如transform和opacity，以减少重排的影响。
避免在循环中频繁读取布局信息。
使用事件委托来减少事件处理程序的数量，从而减少重排。

十三、小结

本文主要讲解了 10 种不同类型导致浏览器重排，这些问题在实际开发中可能会很少考虑，尤其是上了框架。但是在面试过程中能会被经常问到，一个专业的前端在写代码的时候需要注意这些细节问题，使得事情能够做到极致。