1. 防抖：

• 由于dom操作極其昂貴，所以嘗試過多的dom操作有可能會將瀏覽器搞崩潰，比如onresize、onscroll這類事件操作；
• 為了解決這個問題，引出防抖的概念（某些代碼不可以在沒有間斷的情況下連續重復執行）；
• 方案：第一次調用函數創建一個定時器，在指定時間之后執行代碼；在第二次調用時，清除掉前一次的定時器并重新設置一個；
• 這種方案下，如果第一個定時器已經執行，這個操作就沒意義；如果第一個沒執行，則將其替換為新的定時器；目的是只有在執行函數的請求停止一段時間后才執行；
• 適用于代碼是周期執行的，但是你不能控制請求執行的速率；
• 函數防抖讓一個函數只有在你不斷觸發后停下來歇會才開始執行，中間你操作得太快它直接無視。
  // 函數防抖 function debounce(method, context) {clearTimeout(method.tid); // mthod是真實要執行的函數，context是執行的作用域（默認window）method.tid = setTimeout(function() {method.call(context) // 確保方法在適當的環境中執行}, 100); }// onscroll時函數防抖 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) {// 滾動到底部加載數據操作 } } window.onscroll = function() {debounce(scrollFun); }

  ?

2. 節流

• 如果我們不希望每次都是要事件結束后等待延遲時間后執行回調；

• 我們可以先給定一個時間段duration，過了這個時間段以后我們執行相應的操作；如果沒有過這個時間段，那么就按照函數節流的思路，開關定時器就ok。

function throttle(method, delay, duration){var timer = null, stime = new Date(); // 記錄下開始執行函數的時間return function() {var context = this, args = arguments,ctime = new Date(); // 記錄下當前時間 clearTimeout(timer); // 函數節流里的思路// 記錄下的兩個時間相減再與duration進行比較if (ctime - stime >= duration) {method.apply(context, args);stime = ctime;}} }window.onresize = throttle(method, 50, 100); // 50ms的間隔內連續觸發的調用，后一個調用會把前一個調用的等待處理掉，但每隔100ms至少執行一次

3. 滾動實例區分下：

? ? normal：滾動會立即觸發事件執行；

? ? throttle： 延遲100ms直到100ms以內沒有事件觸發之后執行，這樣如果一直在操作，有可能一直不會觸發事件發生；

? ? debounce：50ms的間隔內連續觸發的調用，后一個調用會把前一個調用的等待處理掉，但每隔100ms至少執行一次。

4. 滾動到目標節點：

• 獲取目標節點偏移量var len = $('target').offset().top或document.querySelector('target').offsetTop；
• 滾動$('body').animate(scrollTop: len)或document.querySelector('body').scrollTop = len；

轉載于:https://www.cnblogs.com/colima/p/7163057.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。