同事在項目中使用scroll事件去加載數據,結果IE下悲劇了。給了一個簡單優化方法,效果明顯。
只要用戶改變窗口大小,會對內部一些元素大小重新計算,可能導致整個頁面重新渲染,最終導致大量消耗 CPU。比如調用 resize 方法,用戶改變窗口大小時會不停的被觸發, 低版本的IE 會可能陷入假死狀態。window的scroll事件也是如此,鼠標滾動或拖動滾動條,就會不停的觸發scroll事件,如果處理的東西多,低版本的IE也會陷入假死狀態。
基本的優化思路:在一定的時間之內,只執行一次resize事件函數。
復制代碼 代碼如下:
var resizeTimer = null;
$(window).on('resize', function () {
if (resizeTimer) {
clearTimeout(resizeTimer)
}
resizeTimer = setTimeout(function(){
console.log("window resize");
}, 400);
}
);
新聞熱點
疑難解答
圖片精選