JS `Layout Thrashing` (强制同步布局) 避免策略与性能优化

各位观众老爷，早上好（或者下午好，晚上好，取决于您什么时候看到这篇“讲座”）。今天咱们聊聊前端性能优化里一个让人头疼，但又不得不面对的家伙：Layout Thrashing，中文名叫“强制同步布局”。

什么是Layout Thrashing？

简单来说，Layout Thrashing 就是浏览器一会儿算布局，一会儿又得重新算，来回折腾，导致页面卡顿。你想啊，本来浏览器舒舒服服地按部就班，先渲染再重绘，结果你突然插一脚，让它算完布局立马又得重新算，它能高兴吗？这就像你正在专心致志地写代码，突然有人让你算个数学题，算完又让你继续写代码，效率肯定大打折扣。

更技术一点解释，它发生在 JavaScript 代码中，当我们先读取了某些 DOM 元素的布局信息（比如 offsetHeight, offsetWidth, getComputedStyle），然后立即修改了 DOM 结构或者样式，紧接着又去读取 DOM 布局信息时，浏览器为了保证读取到的值是最新的，不得不立即重新计算布局。这种频繁的布局计算和重绘，就是 Layout Thrashing。

Layout Thrashing 的罪魁祸首：读写交替

Layout Thrashing 的核心问题在于“读写交替”。简单来说，就是你的代码一会儿读取 DOM 布局信息，一会儿又修改 DOM。浏览器为了保证你读取到的是最新的值，不得不强制同步布局。

举个栗子：

function layoutThrashingExample() {
  const element = document.getElementById('myElement');
  const numberOfElements = document.querySelectorAll('.element').length;
  //第一次读取
  for (let i = 0; i < numberOfElements; i++) {
    //读取DOM属性
    const offsetHeight = element.offsetHeight;
    console.log(`Element ${i} offsetHeight: ${offsetHeight}`);

    // 修改 DOM 样式
    element.style.marginTop = offsetHeight + 10 + 'px'; // 每次循环都修改样式

    //第二次读取，触发强制同步布局
    const offsetWidth = element.offsetWidth;
    console.log(`Element ${i} offsetWidth: ${offsetWidth}`);
  }
}

layoutThrashingExample();

在这个例子中，我们循环遍历所有 .element 元素，每次循环都先读取 offsetHeight，然后修改 marginTop，紧接着又读取 offsetWidth。每次修改 marginTop 都会导致重新布局，而紧接着的 offsetWidth 读取就会触发强制同步布局，导致性能问题。

Layout Thrashing 的危害

Layout Thrashing 会严重影响页面性能，导致：

页面卡顿： 频繁的布局计算和重绘会占用大量的 CPU 资源，导致页面卡顿，用户体验极差。
性能下降： 影响页面的整体性能，降低响应速度，增加加载时间。
耗电量增加： 频繁的计算会增加设备的耗电量，尤其是在移动设备上。

避免 Layout Thrashing 的策略

既然 Layout Thrashing 这么讨厌，那我们该如何避免它呢？记住一句话：读写分离，集中处理。

读写分离： 将所有的读取操作放在一起，所有的写入操作放在一起，避免读写交替。

改进上面的例子：

function avoidLayoutThrashingExample() {
  const element = document.getElementById('myElement');
  const numberOfElements = document.querySelectorAll('.element').length;

  // 1. 先读取所有需要的值
  const offsetHeights = [];
  for (let i = 0; i < numberOfElements; i++) {
    offsetHeights.push(element.offsetHeight);
  }

  // 2. 然后统一修改 DOM
  for (let i = 0; i < numberOfElements; i++) {
    element.style.marginTop = offsetHeights[i] + 10 + 'px';
    //这里其实可以做一个优化，就是判断是否需要更新，避免不必要的DOM操作
    if (element.style.marginTop !== offsetHeights[i] + 10 + 'px') {
      element.style.marginTop = offsetHeights[i] + 10 + 'px';
    }
  }

  // 3. 最后再读取一次offsetWidth
  for (let i = 0; i < numberOfElements; i++) {
    const offsetWidth = element.offsetWidth;
    console.log(`Element ${i} offsetWidth: ${offsetWidth}`);
  }
}

avoidLayoutThrashingExample();

在这个改进后的例子中，我们首先一次性读取所有元素的 offsetHeight，然后一次性修改所有元素的 marginTop，最后再读取 offsetWidth。这样就避免了读写交替，减少了 Layout Thrashing 的发生。

使用文档片段 (DocumentFragment)： 如果要批量修改 DOM 结构，可以使用 DocumentFragment。 DocumentFragment 是一个轻量级的 DOM 节点，它不会被添加到文档树中，因此对其进行修改不会触发布局计算。当所有修改完成后，再将 DocumentFragment 添加到文档树中，这样可以减少布局计算的次数。
```
function useDocumentFragmentExample() {
  const fragment = document.createDocumentFragment();
  const list = document.getElementById('myList');

  for (let i = 0; i < 100; i++) {
    const li = document.createElement('li');
    li.textContent = `Item ${i}`;
    fragment.appendChild(li);
  }

  list.appendChild(fragment); // 只触发一次布局计算
}

useDocumentFragmentExample();
```
在这个例子中，我们首先创建了一个 DocumentFragment，然后将所有的 li 元素添加到 DocumentFragment 中，最后将 DocumentFragment 添加到 ul 元素中。这样就只触发了一次布局计算，提高了性能。

缓存布局信息： 如果需要多次读取同一个 DOM 元素的布局信息，可以将第一次读取到的值缓存起来，避免重复读取。

function cacheLayoutInfoExample() {
  const element = document.getElementById('myElement');

  // 第一次读取，并缓存
  const offsetHeight = element.offsetHeight;

  // 后续直接使用缓存的值
  for (let i = 0; i < 10; i++) {
    console.log(`Cached offsetHeight: ${offsetHeight}`);
  }
}

cacheLayoutInfoExample();

在这个例子中，我们首先将 offsetHeight 缓存起来，然后直接使用缓存的值，避免了重复读取。

使用 CSS Transforms 代替 Layout 属性： CSS Transforms (translate, rotate, scale) 的修改通常不会触发布局计算，而是直接在合成层进行处理，因此性能更高。尽量使用 CSS Transforms 来实现动画效果，而不是修改 top, left, width, height 等 Layout 属性。
```
// 不好的例子： 修改 top 和 left 属性
element.style.top = '100px';
element.style.left = '200px';

// 更好的例子： 使用 CSS Transforms
element.style.transform = 'translate(200px, 100px)';
```

使用 requestAnimationFrame： requestAnimationFrame 会在浏览器下一次重绘之前执行回调函数，可以确保所有的 DOM 修改都在一次重绘中完成，从而减少布局计算的次数。

function useRequestAnimationFrameExample() {
  const element = document.getElementById('myElement');
  let position = 0;

  function animate() {
    position += 2;
    element.style.transform = `translateX(${position}px)`;
    if (position < 200) {
      requestAnimationFrame(animate);
    }
  }

  requestAnimationFrame(animate);
}

useRequestAnimationFrameExample();

在这个例子中，我们使用 requestAnimationFrame 来实现动画效果，确保所有的 DOM 修改都在一次重绘中完成。

避免频繁的样式修改： 尽量减少对 DOM 样式的频繁修改。可以使用 CSS 类名来批量修改样式，而不是逐个修改样式属性。

// 不好的例子： 逐个修改样式属性
element.style.color = 'red';
element.style.backgroundColor = 'yellow';
element.style.fontSize = '16px';

// 更好的例子： 使用 CSS 类名
element.classList.add('highlight'); // CSS: .highlight { color: red; background-color: yellow; font-size: 16px; }

使用 Web Workers： 如果需要进行大量的计算操作，可以将这些操作放在 Web Workers 中进行。 Web Workers 在独立的线程中运行，不会阻塞主线程，从而避免影响页面性能。但是，Web Workers 不能直接操作 DOM，需要通过 postMessage 和 onmessage 进行数据传递。
虚拟DOM (Virtual DOM)： 像React和Vue这样的框架使用虚拟DOM来减少直接DOM操作。虚拟DOM是一种轻量级的DOM表示，框架会先在虚拟DOM上进行修改，然后计算出最小的DOM更新，最后才应用到实际的DOM上，从而减少了不必要的布局计算和重绘。

Layout Thrashing 的检测工具

Chrome DevTools 提供了强大的性能分析工具，可以帮助我们检测 Layout Thrashing。

Performance 面板： 在 Chrome DevTools 中打开 Performance 面板，录制一段时间的页面操作，然后分析 Timeline。如果看到大量的 “Layout” 和 “Paint” 事件，就说明可能存在 Layout Thrashing。
- Timeline: 观察时间轴，寻找连续的 Layout 和 Paint 事件。
- Bottom-Up / Call Tree / Event Log: 分析具体的函数调用，找出导致 Layout Thrashing 的代码。
Lighthouse: Lighthouse 也会检测一些常见的性能问题，包括 Layout Thrashing。

真实案例分析

假设我们有一个需求：实现一个动态列表，每次点击按钮，都会向列表中添加 100 个新的列表项。

糟糕的实现：

const list = document.getElementById('myList');
const addButton = document.getElementById('addButton');

addButton.addEventListener('click', () => {
  for (let i = 0; i < 100; i++) {
    const li = document.createElement('li');
    li.textContent = `Item ${i}`;
    list.appendChild(li); // 每次循环都修改 DOM
  }
});

这个实现的问题在于，每次循环都直接修改 DOM，导致频繁的布局计算和重绘，当添加的列表项数量很多时，会导致页面卡顿。

优化后的实现：

const list = document.getElementById('myList');
const addButton = document.getElementById('addButton');

addButton.addEventListener('click', () => {
  const fragment = document.createDocumentFragment(); // 使用 DocumentFragment

  for (let i = 0; i < 100; i++) {
    const li = document.createElement('li');
    li.textContent = `Item ${i}`;
    fragment.appendChild(li);
  }

  list.appendChild(fragment); // 只触发一次布局计算
});

在这个优化后的实现中，我们使用了 DocumentFragment，先将所有的列表项添加到 DocumentFragment 中，然后再将 DocumentFragment 添加到列表中，这样就只触发了一次布局计算，大大提高了性能。

总结

Layout Thrashing 是前端性能优化中一个常见的问题，但只要我们掌握了读写分离、使用 DocumentFragment、缓存布局信息、使用 CSS Transforms、使用 requestAnimationFrame 等策略，就可以有效地避免 Layout Thrashing，提高页面性能，提升用户体验。

记住，性能优化是一个持续的过程，需要不断地学习和实践。希望今天的“讲座”对大家有所帮助，谢谢大家！散会！

表格总结：避免 Layout Thrashing 的策略

策略	描述	示例
读写分离	将读取和写入 DOM 的操作分开，避免交替进行。	先读取所有需要的值，然后统一修改 DOM，最后再读取。
文档片段	使用 DocumentFragment 批量修改 DOM 结构，减少布局计算次数。	`javascript const fragment = document.createDocumentFragment(); for (let i = 0; i < 100; i++) { const li = document.createElement('li'); fragment.appendChild(li); } list.appendChild(fragment);`
缓存布局信息	缓存 DOM 元素的布局信息，避免重复读取。	`javascript const offsetHeight = element.offsetHeight; for (let i = 0; i < 10; i++) { console.log(offsetHeight); }`
CSS Transforms	使用 CSS Transforms 代替 Layout 属性，减少布局计算。	`element.style.transform = 'translate(200px, 100px)';` 代替 `element.style.top = '100px'; element.style.left = '200px';`
requestAnimationFrame	使用 requestAnimationFrame 确保 DOM 修改在一次重绘中完成。	javascript requestAnimationFrame(() => { element.style.transform = `translateX(${position}px)`; });
减少样式修改	减少对 DOM 样式的频繁修改，使用 CSS 类名批量修改。	使用 `element.classList.add('highlight');` 代替 `element.style.color = 'red'; element.style.backgroundColor = 'yellow';`
Web Workers	将大量计算操作放在 Web Workers 中进行，避免阻塞主线程。	(涉及多线程编程，比较复杂，需要单独学习)
虚拟DOM	使用虚拟DOM来减少直接DOM操作，例如React和Vue.	(框架内部机制，开发者无需过多关注，但了解原理有助于更好地使用框架)

发表回复 取消回复

发表回复取消回复