window resize和scroll事件的基本优化思路


Posted in Javascript onApril 29, 2014

同事在项目中使用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); 
} 
);

scroll事件优化同理。
Javascript 相关文章推荐
js 验证密码强弱的小例子
Mar 21 Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 Javascript
极力推荐10个短小实用的JavaScript代码段
Aug 03 Javascript
React创建组件的三种方式及其区别
Jan 12 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
Apr 01 Javascript
JavaScript方法_动力节点Java学院整理
Jun 28 Javascript
Mac中安装nvm的教程分享
Dec 11 Javascript
JavaScript模拟实现自由落体效果
Aug 28 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
Aug 30 Javascript
vue-cli 3 全局过滤器的实例代码详解
Jun 03 Javascript
JavaScript快速调试的两个技巧
Nov 04 Javascript
基于element-ui封装表单金额输入框的方法示例
Jan 06 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
Apr 29 #Javascript
JS截取url中问号后面参数的值信息
Apr 29 #Javascript
javascript类型转换示例
Apr 29 #Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
Apr 29 #Javascript
javascript中使用正则计算中文长度的例子
Apr 29 #Javascript
一个简单的Node.js异步操作管理器分享
Apr 29 #Javascript
IE浏览器中图片onload事件无效的解决方法
Apr 29 #Javascript
You might like
Apache2 httpd.conf 中文版
2006/12/06 PHP
火车头采集器3.0采集图文教程
2007/03/17 PHP
php 字符转义 注意事项
2009/05/27 PHP
php学习之数据类型之间的转换介绍
2011/06/09 PHP
PHP批量删除、清除UTF-8文件BOM头的代码实例
2014/04/14 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
2007/01/22 Javascript
基于javascript制作微博发布栏效果
2016/04/04 Javascript
用js写的一个路由(简单实例)
2016/09/24 Javascript
jQuery实现动态添加tr到table的方法
2016/12/26 Javascript
vue.js实现条件渲染的实例代码
2017/06/22 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
2019/05/26 Javascript
[02:00]最后,我终于出了辉耀
2018/03/27 DOTA
进一步了解Python中的XML 工具
2015/04/13 Python
Python实现的文本对比报告生成工具示例
2018/05/22 Python
Python实现迭代时使用索引的方法示例
2018/06/05 Python
python 通过类中一个方法获取另一个方法变量的实例
2019/01/22 Python
Python字符串内置函数功能与用法总结
2019/04/16 Python
python3中eval函数用法使用简介
2019/08/02 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
Python实现删除某列中含有空值的行的示例代码
2020/07/20 Python
详解Python yaml模块
2020/09/23 Python
用pip给python安装matplotlib库的详细教程
2021/02/24 Python
纯css3制作煽动翅膀的蝴蝶的示例
2018/04/23 HTML / CSS
解决H5的a标签的download属性下载service上的文件出现跨域问题
2019/07/16 HTML / CSS
澳大利亚先进的皮肤和激光诊所购物网站:Soho Skincare
2018/10/15 全球购物
法国在线购买汽车轮胎网站:123pneus.fr
2019/02/25 全球购物
上海奥佳笔试题面试题
2016/11/16 面试题
盛大笔试题
2016/11/05 面试题
数控加工专业毕业生自荐信
2013/09/27 职场文书
致共产党员倡议书
2014/04/16 职场文书
职位证明模板
2015/06/23 职场文书
2016年习主席讲话学习心得体会
2016/01/20 职场文书
导游词之镇江-金山寺
2019/10/14 职场文书
MyBatis 动态SQL全面详解
2021/10/05 MySQL
OpenCV实现普通阈值
2021/11/17 Java/Android