快捷導(dǎo)航

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

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

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

前言

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

一、如何獲取元素的尺寸

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

1. Element.clientHeight 和 Element.clientWidth

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

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

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

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

2. Element.scrollHeight 和 Element.scrollWidth

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

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

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

3. Element.scrollTop 和 Element.scrollLeft

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

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

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

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

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

1. 節(jié)流（Throttle）

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

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

// 示例：每隔 300 毫秒打印一次滾動(dòng)條的位置
function showScrollPosition() {
  let scrollTop = document.documentElement.scrollTop;
  console.log('滾動(dòng)條位置：' + scrollTop);
}

window.onscroll = throttle(showScrollPosition, 300);

2. 節(jié)流和防抖的應(yīng)用場(chǎng)景

搜索框：當(dāng)用戶在搜索框中輸入時(shí)，使用節(jié)流來減少過于頻繁的請(qǐng)求，比如每隔 500 毫秒發(fā)送一次請(qǐng)求。
窗口調(diào)整（resize）：在頁面調(diào)整大小時(shí)，通常我們只想在用戶停止調(diào)整后執(zhí)行一次操作，這時(shí)候可以使用防抖。