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 相关文章推荐
Jquery+WebService 校验账号是否已被注册的代码
Jul 12 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
Jan 03 Javascript
微信企业号开发之微信考勤百度地图定位
Sep 11 Javascript
JSON 数据详解及实例代码分析
Jan 20 Javascript
基于JS实现限时抢购倒计时间表代码
May 09 Javascript
原生JS实现N级菜单的代码
May 21 Javascript
VueRouter导航守卫用法详解
Dec 25 Javascript
vue写一个组件
Apr 09 Javascript
微信小程序支付前端源码
Aug 29 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
Nov 17 Javascript
vue2和vue3的v-if与v-for优先级对比学习
Oct 10 Javascript
vue使用Sass时报错问题的解决方法
Oct 14 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
PHP模板解析类实例
2015/07/09 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
phpfpm的作用和用法
2019/10/10 PHP
Aster vs KG BO3 第三场2.19
2021/03/10 DOTA
简单的js分页脚本
2009/05/21 Javascript
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
2010/02/15 Javascript
jquery lazyload延迟加载技术的实现原理分析
2011/01/24 Javascript
javascript标签在页面中的位置探讨
2013/04/11 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
2016/07/14 Javascript
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
jsTree使用记录实例
2016/12/01 Javascript
基于JavaScript实现表格滚动分页
2017/11/22 Javascript
React Native日期时间选择组件的示例代码
2018/04/27 Javascript
angular的输入和输出的使用方法
2018/09/22 Javascript
微信小程序后端无法保持session的原因及解决办法问题
2020/03/20 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
2020/10/29 Javascript
python自动化工具日志查询分析脚本代码实现
2013/11/26 Python
python实现批量解析邮件并下载附件
2018/06/19 Python
pytorch 数据集图片显示方法
2018/07/26 Python
Linux下多个Python版本安装教程
2018/08/15 Python
Python实现提取XML内容并保存到Excel中的方法
2018/09/01 Python
django实现类似触发器的功能
2019/11/15 Python
Python Celery多队列配置代码实例
2019/11/22 Python
keras 特征图可视化实例(中间层)
2020/01/24 Python
python生成word合同的实例方法
2021/01/12 Python
杰夫·班克斯男士服装网上商店:Jeff Banks
2019/10/24 全球购物
酒店工作职员求职简历的自我评价
2013/10/23 职场文书
党的群众路线教育实践活动学习心得体会
2014/03/03 职场文书
《青海高原一株柳》教学反思
2014/04/25 职场文书
生日宴会策划方案
2014/06/03 职场文书
小学生志愿者活动方案
2014/08/23 职场文书
乡镇镇长个人整改措施
2014/10/01 职场文书
css 中多种边框的实现小窍门
2021/04/07 HTML / CSS
5分钟教你docker安装启动redis全教程(全新方式)
2021/05/29 Redis
Ubuntu Server 安装Tomcat并配置systemctl
2022/04/28 Servers