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

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