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è)簡單優(yōu)化方法，效果明顯。
只要用戶改變窗口大小，會(huì)對內(nèi)部一些元素大小重新計(jì)算，可能導(dǎo)致整個(gè)頁面重新渲染，最終導(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ì)對內(nèi)部一些元素大小重新計(jì)算，可能導(dǎo)致整個(gè)頁面重新渲染，最終導(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)文章
all是一個(gè)集合，包含所有html對像的集合，寫一個(gè)程式，可以存取到所有的對像。2008-11-11
關(guān)于二級域名下使用一級域名下的COOKIE的問題
我們通常在使用cookie的時(shí)候一般都只是局限在本站內(nèi)使用，也就是只在一個(gè)域名下使用2011-11-11
這篇文章主要介紹了js 解析 JSON 數(shù)據(jù)的方法,結(jié)合簡單實(shí)例形式分析了js 解析 JSON 格式數(shù)據(jù)的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2020-04-04
這篇文章主要介紹了使用微信SDK自定義分享的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
微信小程序在其他頁面監(jiān)聽globalData中值的變化
這篇文章主要給大家介紹了關(guān)于微信小程序如何在其他頁面監(jiān)聽globalData中值的變化的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
JavaScript 中級筆記2009-09-09
大家都知道在js中沒有類的概念，因此它的對象也與基于類的語言中的對象有所不同。所以大家要了解面向?qū)ο?，首先要了解js中的對象和原型，下面本文給大家介紹JavaScript中的對象和原型(一)知識，一起看下吧2016-08-08
這篇文章主要介紹了微信小程序引入VANT組件的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
淺談Vue3.0之前你必須知道的TypeScript實(shí)戰(zhàn)技巧
這篇文章主要介紹了淺談Vue3.0之前你必須知道的TypeScript實(shí)戰(zhàn)技巧，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
JavaScript實(shí)現(xiàn)的斑馬線表格效果【隔行變色】
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的斑馬線表格效果,通過javascript針對table表格的遍歷與運(yùn)算實(shí)現(xiàn)隔行變色功能,非常簡單實(shí)用,需要的朋友可以參考下2017-09-09