1. 防抖：

• 由于dom操作極其昂貴，所以嘗試過(guò)多的dom操作有可能會(huì)將瀏覽器搞崩潰，比如onresize、onscroll這類(lèi)事件操作；
• 為了解決這個(gè)問(wèn)題，引出防抖的概念（某些代碼不可以在沒(méi)有間斷的情況下連續(xù)重復(fù)執(zhí)行）；
• 方案：第一次調(diào)用函數(shù)創(chuàng)建一個(gè)定時(shí)器，在指定時(shí)間之后執(zhí)行代碼；在第二次調(diào)用時(shí)，清除掉前一次的定時(shí)器并重新設(shè)置一個(gè)；
• 這種方案下，如果第一個(gè)定時(shí)器已經(jīng)執(zhí)行，這個(gè)操作就沒(méi)意義；如果第一個(gè)沒(méi)執(zhí)行，則將其替換為新的定時(shí)器；目的是只有在執(zhí)行函數(shù)的請(qǐng)求停止一段時(shí)間后才執(zhí)行；
• 適用于代碼是周期執(zhí)行的，但是你不能控制請(qǐng)求執(zhí)行的速率；
• 函數(shù)防抖讓一個(gè)函數(shù)只有在你不斷觸發(fā)后停下來(lái)歇會(huì)才開(kāi)始執(zhí)行，中間你操作得太快它直接無(wú)視。
  // 函數(shù)防抖 function debounce(method, context) {clearTimeout(method.tid); // mthod是真實(shí)要執(zhí)行的函數(shù)，context是執(zhí)行的作用域（默認(rèn)window）method.tid = setTimeout(function() {method.call(context) // 確保方法在適當(dāng)?shù)沫h(huán)境中執(zhí)行}, 100); }// onscroll時(shí)函數(shù)防抖 function scrollFun() {var marginBot = 0;if (document.documentElement) {marginBot = document.documentElement.scrollHeight - (document.documentElement.scrollTop+document.body.scrollTop) - document.documentElement.clientHeight;} else {marginBot = document.body.scrollHeight - document.body.scrollTop - document.body.clientHeight;}if(marginBot <= 0) {// 滾動(dòng)到底部加載數(shù)據(jù)操作 } } window.onscroll = function() {debounce(scrollFun); }

  ?

2. 節(jié)流

• 如果我們不希望每次都是要事件結(jié)束后等待延遲時(shí)間后執(zhí)行回調(diào)；

• 我們可以先給定一個(gè)時(shí)間段duration，過(guò)了這個(gè)時(shí)間段以后我們執(zhí)行相應(yīng)的操作；如果沒(méi)有過(guò)這個(gè)時(shí)間段，那么就按照函數(shù)節(jié)流的思路，開(kāi)關(guān)定時(shí)器就ok。

function throttle(method, delay, duration){var timer = null, stime = new Date(); // 記錄下開(kāi)始執(zhí)行函數(shù)的時(shí)間return function() {var context = this, args = arguments,ctime = new Date(); // 記錄下當(dāng)前時(shí)間 clearTimeout(timer); // 函數(shù)節(jié)流里的思路// 記錄下的兩個(gè)時(shí)間相減再與duration進(jìn)行比較if (ctime - stime >= duration) {method.apply(context, args);stime = ctime;}} }window.onresize = throttle(method, 50, 100); // 50ms的間隔內(nèi)連續(xù)觸發(fā)的調(diào)用，后一個(gè)調(diào)用會(huì)把前一個(gè)調(diào)用的等待處理掉，但每隔100ms至少執(zhí)行一次

3. 滾動(dòng)實(shí)例區(qū)分下：

? ? normal：滾動(dòng)會(huì)立即觸發(fā)事件執(zhí)行；

? ? throttle： 延遲100ms直到100ms以?xún)?nèi)沒(méi)有事件觸發(fā)之后執(zhí)行，這樣如果一直在操作，有可能一直不會(huì)觸發(fā)事件發(fā)生；

? ? debounce：50ms的間隔內(nèi)連續(xù)觸發(fā)的調(diào)用，后一個(gè)調(diào)用會(huì)把前一個(gè)調(diào)用的等待處理掉，但每隔100ms至少執(zhí)行一次。

4. 滾動(dòng)到目標(biāo)節(jié)點(diǎn)：

• 獲取目標(biāo)節(jié)點(diǎn)偏移量var len = $('target').offset().top或document.querySelector('target').offsetTop；
• 滾動(dòng)$('body').animate(scrollTop: len)或document.querySelector('body').scrollTop = len；

轉(zhuǎn)載于:https://www.cnblogs.com/colima/p/7163057.html

總結(jié)

以上是生活随笔為你收集整理的性能优化之节流、防抖的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。