JavaScript中DOM尺寸测量与节流技巧总结-牛翰网

前言

在开发网页时，我们经常需要获取元素的宽高，或者处理一些像滚动、窗口调整这样的事件。不过，如果不加以优化，频繁触发这些事件可能会影响页面性能。今天这篇文章会介绍如何通过 JavaScript 获取 DOM 元素的尺寸，同时聊聊如何使用节流（Throttle）来优化高频事件处理，让你的网页跑得更流畅。

一、如何获取元素的尺寸

JavaScript 提供了不少方法来获取元素的宽度和高度，下面是几个常用的。

1. Element.clientHeight 和 Element.clientWidth

clientHeight：返回元素的高度，包括 padding，但不包括 border、margin 和滚动条。
clientWidth：返回元素的宽度，逻辑跟 clientHeight 类似。

这些属性很适合用来获取元素的实际可见区域，比如你需要知道某个元素在页面上占了多大的空间。

// 获取浏览器视口的高度
let viewportHeight = document.documentElement.clientHeight;

// 获取某个元素的宽度
let elementWidth = document.querySelector('.my-element').clientWidth;

2. Element.scrollHeight 和 Element.scrollWidth

这两个属性代表元素的总高度和总宽度，包括那些超出可视范围的内容，适用于有滚动条的元素。

// 获取页面的总高度
let pageHeight = document.documentElement.scrollHeight;

// 获取某个滚动区域的总宽度
let elementScrollWidth = document.querySelector('.scrollable-element').scrollWidth;

3. Element.scrollTop 和 Element.scrollLeft

scrollTop：表示已经向下滚动了多少像素。
scrollLeft：表示已经向右滚动了多少像素。

这两个属性经常用来监听滚动事件，比如你想在用户滚动到一定位置时触发加载更多内容。

// 获取当前页面滚动的垂直距离
let scrollTop = document.documentElement.scrollTop;

二、节流（Throttle）与防抖（Debounce）

在开发中，像滚动、窗口调整这样的事件有时候触发得非常频繁。如果每次事件触发都去执行某些耗时操作，页面可能会变得很卡。这时我们可以使用节流和防抖来优化这些操作。

1. 节流（Throttle）

节流的作用是让某个函数在固定时间内只能执行一次。不管这个时间段内事件被触发了多少次，函数都只会在时间间隔内执行一次。

function throttle(fn, delay) {
  let valid = true;
  return function() {
    if (!valid) {
      return;
    }
    valid = false;
    setTimeout(() => {
      fn();
      valid = true;
    }, delay);
  };
}

// 示例：每隔 300 毫秒打印一次滚动条的位置
function showScrollPosition() {
  let scrollTop = document.documentElement.scrollTop;
  console.log('滚动条位置：' + scrollTop);
}

window.onscroll = throttle(showScrollPosition, 300);