首頁 > web前端 > js教程 > window resize和scroll事件的基本最佳化思路_javascript技巧

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

WBOY
發布: 2016-05-16 16:50:37
原創
1807 人瀏覽過

同事在專案中使用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事件最佳化同理。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板