网页布局偏移：如何化被动为主动

2023-10-13 15:36:26

网页布局偏移：成因与危害

网页布局偏移是指网页内容在加载过程中发生位置变化的现象。当用户在浏览网页时，网页中的某些元素突然发生位置变化，这可能会导致用户感到困惑、甚至误操作。

布局偏移的原因有很多，其中最常见的原因之一就是异步加载。异步加载是指在网页加载过程中，某些元素（如图片、脚本、样式表等）并不是一次性加载完成的，而是分批次加载的。当这些元素加载完成后，它们会在网页中占据一定的空间，导致网页中的其他元素发生位置变化。

MutationObserver：网页布局偏移的救星

MutationObserver 是一个内置的 JavaScript API，它可以监听 DOM 中的变动，并对这些变动做出相应的处理。我们可以利用 MutationObserver 来计算网页布局偏移的幅度，并根据计算结果采取措施来确保用户的视觉稳定性。

计算网页布局偏移的幅度

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === 'childList') {
      const rect = mutation.target.getBoundingClientRect();
      const offsetX = rect.left - mutation.target.previousBoundingClientRect.left;
      const offsetY = rect.top - mutation.target.previousBoundingClientRect.top;

      // 计算布局偏移的幅度
      const offset = Math.sqrt(offsetX * offsetX + offsetY * offsetY);

      // 如果布局偏移的幅度大于某个阈值，则采取措施来确保用户的视觉稳定性
      if (offset > threshold) {
        // ...
      }
    }
  });
});

observer.observe(document, { childList: true, subtree: true });