在 JavaScript 中，每當(dāng)我們向事件偵聽器附加高性能函數(shù)時，控制函數(shù)調(diào)用頻率被認為是最佳實踐。
 
一切都與性能有關(guān)
 
在構(gòu)建網(wǎng)頁時，性能是一個主要問題，特別是對于執(zhí)行動畫和交互的網(wǎng)站。事件偵聽器是實現(xiàn)與 JavaScript 交互的常見選擇，因為它們用于檢測頁面上的更改并根據(jù)這些更改調(diào)用函數(shù)。確保事件偵聽器腳本針對性能進行了優(yōu)化非常重要。
 
事件監(jiān)聽器如何影響性能？
 
讓我們看看根據(jù)用戶操作調(diào)用事件偵聽器的頻率。在下面的demo中執(zhí)行相應(yīng)的事件來查看計數(shù)：事件偵聽器會根據(jù)它們調(diào)用的事件影響性能。
 

 
假設(shè)我們有一個負責(zé)向 DOM 添加新元素的函數(shù)，并且每次用戶滾動時我們都會調(diào)用這個函數(shù)。正如我們在演示中看到的，可以為用戶滾動屏幕的每個像素調(diào)用滾動事件偵聽器。
 
向 DOM 添加元素會導(dǎo)致重排，這是瀏覽器計算新元素位置的方式。重排以級聯(lián)方式完成，因此更改一個元素的重排將導(dǎo)致所有后續(xù)元素的更改以及重新渲染文檔的部分或全部。這些計算可能會影響用戶速度并減慢您的頁面速度。您可以在本文中閱讀更多關(guān)于回流和重繪如何影響性能的信息。
 
每當(dāng)我們將高性能函數(shù)附加到事件偵聽器時，控制函數(shù)被調(diào)用的頻率被認為是最佳實踐。
 
Debounce和Throttle是通過控制事件被調(diào)用的頻率來優(yōu)化腳本性能的兩種方法。
 
去抖動與油門
 
debounce 和 throttling 的主要區(qū)別在于 debounce在用戶在特定時間內(nèi)沒有執(zhí)行事件時調(diào)用一個函數(shù)，而當(dāng)用戶執(zhí)行一個事件時，throttle 在指定的時間間隔調(diào)用一個函數(shù)事件。
 
例如，如果我們使用 250 毫秒（毫秒）的計時器對滾動函數(shù)進行去抖動，則該函數(shù)僅在用戶在 250 毫秒內(nèi)沒有滾動時才被調(diào)用。如果我們用 250 毫秒的計時器限制滾動函數(shù)，則該函數(shù)在用戶滾動時每 250 毫秒調(diào)用一次。