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 订制自己的AlertBox(信息提示框)
Jan 09 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
May 23 Javascript
javascript闭包传参和事件的循环绑定示例探讨
Apr 17 Javascript
JS截取url中问号后面参数的值信息
Apr 29 Javascript
jQuery对象的length属性用法实例
Dec 27 Javascript
详谈JavaScript的闭包及应用
Jan 17 Javascript
SVG描边动画
Feb 23 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
vue 中directive功能的简单实现
Jan 05 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
Feb 02 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
May 03 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使用pdo连接access数据库并循环显示数据操作示例
2018/06/05 PHP
使用JQUERY Tabs插件宿主IFRAMES
2010/01/01 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
2013/10/24 Javascript
查看大图功能代码jquery版
2013/11/05 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
2014/10/30 Javascript
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
2016/01/27 Javascript
深入理解Javascript中的valueOf与toString
2017/01/04 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
Vue项目中设置背景图片方法
2018/02/21 Javascript
vue-cli脚手架的安装教程图解
2018/09/02 Javascript
Vue中的基础过渡动画及实现原理解析
2018/12/04 Javascript
微信小程序实现手势滑动效果
2019/08/26 Javascript
Vue中常用rules校验规则(实例代码)
2019/11/14 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
2020/07/28 Javascript
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
[01:13]2014DOTA2西雅图邀请赛 舌尖上的TI4
2014/07/08 DOTA
详解在python操作数据库中游标的使用方法
2019/11/12 Python
python将字符串转变成dict格式的实现
2019/11/18 Python
pyMySQL SQL语句传参问题,单个参数或多个参数说明
2020/06/06 Python
CSS3 实现的火焰动画
2020/12/07 HTML / CSS
NOTINO英国:在线购买美容和香水
2020/02/25 全球购物
医院护士的求职信范文
2013/12/26 职场文书
公务员转正鉴定材料
2014/02/11 职场文书
《美丽的公鸡》教学反思
2014/02/25 职场文书
关于环保的建议书
2014/05/12 职场文书
导航工程专业自荐信
2014/09/02 职场文书
乡镇群众路线教育实践活动整改措施
2014/10/04 职场文书
假释思想汇报范文
2014/10/11 职场文书
2014年机关党委工作总结
2014/12/11 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
2015年大学社团工作总结
2015/04/09 职场文书
校运会新闻稿
2015/07/17 职场文书
读《工匠精神》有感:热爱工作,精益求精
2019/12/28 职场文书
SQL Server基本使用和简单的CRUD操作
2021/04/05 SQL Server