window resize和scroll事件的基本優(yōu)化思路
更新時間：2014年04月29日 15:25:39 作者：
在項目中使用scroll事件去加載數(shù)據，結果IE下悲劇了。下面為大家介紹下window resize和scroll事件的基本優(yōu)化思路,需要的朋友可以參考下
同事在項目中使用scroll事件去加載數(shù)據，結果IE下悲劇了。給了一個簡單優(yōu)化方法，效果明顯。
只要用戶改變窗口大小，會對內部一些元素大小重新計算，可能導致整個頁面重新渲染，最終導致大量消耗 CPU。比如調用 resize 方法，用戶改變窗口大小時會不停的被觸發(fā)， 低版本的IE 會可能陷入假死狀態(tài)。window的scroll事件也是如此，鼠標滾動或拖動滾動條，就會不停的觸發(fā)scroll事件，如果處理的東西多，低版本的IE也會陷入假死狀態(tài)。
基本的優(yōu)化思路：在一定的時間之內，只執(zhí)行一次resize事件函數(shù)。
var resizeTimer = null;
$(window).on('resize', function () {
if (resizeTimer) {
clearTimeout(resizeTimer)
}
resizeTimer = setTimeout(function(){
console.log("window resize");
}, 400);
}
);
scroll事件優(yōu)化同理。
只要用戶改變窗口大小，會對內部一些元素大小重新計算，可能導致整個頁面重新渲染，最終導致大量消耗 CPU。比如調用 resize 方法，用戶改變窗口大小時會不停的被觸發(fā)， 低版本的IE 會可能陷入假死狀態(tài)。window的scroll事件也是如此，鼠標滾動或拖動滾動條，就會不停的觸發(fā)scroll事件，如果處理的東西多，低版本的IE也會陷入假死狀態(tài)。
基本的優(yōu)化思路：在一定的時間之內，只執(zhí)行一次resize事件函數(shù)。
復制代碼 代碼如下:
var resizeTimer = null;
$(window).on('resize', function () {
if (resizeTimer) {
clearTimeout(resizeTimer)
}
resizeTimer = setTimeout(function(){
console.log("window resize");
}, 400);
}
);
scroll事件優(yōu)化同理。
您可能感興趣的文章:
相關文章
BootStrap Fileinput初始化時的一些參數(shù)
本文通過一個例子給大家簡單介紹了bootstrap fileinput初始化時的一些參數(shù)，非常不錯，具有參考借鑒價值，需要的朋友參考下2016-12-12
用JavaScript實現(xiàn)字符串切分功能...2007-01-01
JavaScript中ES6規(guī)范中l(wèi)et和const的用法和區(qū)別
這篇文章主要介紹了JavaScript中ES6規(guī)范中l(wèi)et和const的用法和區(qū)別，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-08-08
JavaScript是單線程運行的，沒有內置的sleep函數(shù)，那么JavaScript sleep睡眠函數(shù)是怎樣實現(xiàn)的，感興趣的小伙伴們可以參考一下2021-07-07
關于uniapp中onReachBottomDistance屬性的使用
這篇文章主要介紹了關于uniapp中onReachBottomDistance屬性的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
DataJoin(數(shù)據連接)是D3中很重要的一個概念。D3是基于數(shù)據操作DOM的js庫，DataJoin使我們能夠根據現(xiàn)有?HTML?文檔中的數(shù)據集注入、修改和刪除元素。本文主要和大家詳細聊聊DataJoin的使用，感興趣的可以學習一下2022-11-11![Javascript 獲取鏈接(url)參數(shù)的方法[正則與截取字符串]](http://img.jbzj.com/images/xgimg/bcimg6.png)
Javascript 獲取鏈接(url)參數(shù)的方法[正則與截取字符串]
有時我們需要在客戶端獲取鏈接參數(shù)，一個常見的方法是將鏈接當做字符串，按照鏈接的格式分解，然后獲取對應的參數(shù)值。本文給出的就是這個流程的具體實現(xiàn)方法。2010-02-02
這篇文章主要介紹了淺談微信小程序之官方UI框架we-ui使用教程，WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊為微信內網頁和微信小程序量身設計，感興趣的小伙伴們可以參考一下2018-08-08
這篇文章主要介紹了JavaScript定時器的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
通過js來檢測開發(fā)者工具是否打開，防止別人惡意調試我們的代碼，最近我發(fā)現(xiàn)還是有蠻多人去瀏覽那篇文章，所以這里再放出一段代碼，算是個升級版吧2020-10-10