這個優化方案是參照 【前端效能】高效能滾動 scroll 及頁面渲染優化
在這裡簡單的把兩個方式寫出來，以便快速了解。。
第一種：防抖（也就是滾動結束才執行）
演示：
閉包：
/*
延時執行
@param fn function
@param wait number
@return function
*/function debounce(fn, wait)
}// 處理函式
function handle()
// 滾動事件
window.addeventlistener('scroll', debounce(handle, 500));
var timeout = null;
window.addeventlistener('scroll', function() .bind(this), 500);
});
演示：
閉包：
/*
節流函式
@param fn function
@param wait number
@param maxtimelong number
@return function
*/function throttling(fn, wait, maxtimelong) else
}}function handle()
window.addeventlistener('scroll', throttling(handle, 300, 1000));
var timeout = null,
starttime = date.parse(new date); // 開始時間
function handle()
window.addeventlistener('scroll', function() else
});
js優化之防抖節流
應用場景 搜尋框 滾動條的監聽事件處理，防止每輸入乙個字 滾動螢幕，都會觸發事件處理，造成效能浪費。短時間內大量觸發同一事件，只會執行一次函式，實現原理為設定乙個定時器，約定在xx毫秒後再觸發事件處理，每次觸發事件都會重新設定計時器，直到xx毫秒內無第二次操作 引數1為觸發事件函式，參2位延遲時間 ...
前端之頁面優化 節流與防抖
防抖作用就是在事件觸發的過程中，不去業務處理，而是等該時間結束後，則馬上進行業務處理，這裡事件結束後的多長時間去執行業務 由我們自己設定的，也就是下面的引數wait,單位毫秒。防抖，防抖，防抖 舉個例子，當使用onkeyup監聽input框中的輸入，如果使用者按住乙個6不放，那監聽事件一直被觸發，浪...
節流與防抖
瀏覽器中某些計算和處理要比其他的昂貴，例如在瀏覽器中操作dom比非dom互動需要更多的記憶體和cpu的事件，連續嘗試進行過多的dom相關操作可能ui導致瀏覽器掛起，有時甚至會崩潰。尤其在ie中使用onresize事件處理程式的時候容易發生，當調整瀏覽器大小的時候，該事件會連續觸發。在onresize...