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