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

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