快捷導(dǎo)航

JavaScript中DOM尺寸測量與節(jié)流技巧總結(jié)

更新時間：2024年11月07日 11:02:25 作者：blaizeer

在網(wǎng)頁開發(fā)中,合理獲取DOM元素尺寸及使用節(jié)流技術(shù)對高頻事件進(jìn)行優(yōu)化,是確保頁面流暢運(yùn)行的關(guān)鍵,通過JavaScript可以方便地獲取元素寬高,并應(yīng)用節(jié)流（Throttle）與防抖（Debounce）技術(shù)處理如滾動或窗口調(diào)整等高頻事件,有效減少性能消耗,需要的朋友可以參考下

前言

在開發(fā)網(wǎng)頁時，我們經(jīng)常需要獲取元素的寬高，或者處理一些像滾動、窗口調(diào)整這樣的事件。不過，如果不加以優(yōu)化，頻繁觸發(fā)這些事件可能會影響頁面性能。今天這篇文章會介紹如何通過 JavaScript 獲取 DOM 元素的尺寸，同時聊聊如何使用節(jié)流（Throttle）來優(yōu)化高頻事件處理，讓你的網(wǎng)頁跑得更流暢。

一、如何獲取元素的尺寸

JavaScript 提供了不少方法來獲取元素的寬度和高度，下面是幾個常用的。

1. Element.clientHeight 和 Element.clientWidth

clientHeight：返回元素的高度，包括 padding，但不包括 border、margin 和滾動條。
clientWidth：返回元素的寬度，邏輯跟 clientHeight 類似。

這些屬性很適合用來獲取元素的實(shí)際可見區(qū)域，比如你需要知道某個元素在頁面上占了多大的空間。

// 獲取瀏覽器視口的高度
let viewportHeight = document.documentElement.clientHeight;

// 獲取某個元素的寬度
let elementWidth = document.querySelector('.my-element').clientWidth;

2. Element.scrollHeight 和 Element.scrollWidth

這兩個屬性代表元素的總高度和總寬度，包括那些超出可視范圍的內(nèi)容，適用于有滾動條的元素。

// 獲取頁面的總高度
let pageHeight = document.documentElement.scrollHeight;

// 獲取某個滾動區(qū)域的總寬度
let elementScrollWidth = document.querySelector('.scrollable-element').scrollWidth;

3. Element.scrollTop 和 Element.scrollLeft

scrollTop：表示已經(jīng)向下滾動了多少像素。
scrollLeft：表示已經(jīng)向右滾動了多少像素。

這兩個屬性經(jīng)常用來監(jiān)聽滾動事件，比如你想在用戶滾動到一定位置時觸發(fā)加載更多內(nèi)容。

// 獲取當(dāng)前頁面滾動的垂直距離
let scrollTop = document.documentElement.scrollTop;

二、節(jié)流（Throttle）與防抖（Debounce）

在開發(fā)中，像滾動、窗口調(diào)整這樣的事件有時候觸發(fā)得非常頻繁。如果每次事件觸發(fā)都去執(zhí)行某些耗時操作，頁面可能會變得很卡。這時我們可以使用節(jié)流和防抖來優(yōu)化這些操作。

1. 節(jié)流（Throttle）

節(jié)流的作用是讓某個函數(shù)在固定時間內(nèi)只能執(zhí)行一次。不管這個時間段內(nèi)事件被觸發(fā)了多少次，函數(shù)都只會在時間間隔內(nèi)執(zhí)行一次。

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);