window resize和scroll事件的基本最佳化思路_javascript技巧

同事在專案中使用scroll事件去載入數據，結果IE下悲劇了。給了一個簡單優化方法，效果明顯。

只要使用者改變視窗大小，就會對內部一些元素大小重新計算，可能導致整個頁面重新渲染，最終導致大量消耗 CPU。例如呼叫 resize 方法，使用者改變視窗大小時會不停的被觸發， 低版的IE 會可能陷入假死。 window的scroll事件也是如此，滑鼠滾動或拖曳捲軸，就會不停的觸發scroll事件，如果處理的東西多，低版本的IE也會陷入假死狀態。

基本的最佳化思路：在一定的時間內，只執行一次resize事件函數。

複製程式碼 程式碼如下:

var resizeTimer = null;


var resizeTimer = null;
$(window) .on('resize', function () {
if (resizeTimer) {
clearTimeout(resizeTimer)
}
resizeTimer = setTimeout(function(){
console.log("window resize");
}, 400);

}
); scroll事件最佳化同理。