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 相关文章推荐
轻轻松松学习JavaScript
Feb 25 Javascript
js 控制下拉菜单刷新的方法
Mar 03 Javascript
Javascript变量作用域详解
Dec 06 Javascript
JS Replace 全部替换字符的用法小结
Dec 24 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
Dec 26 Javascript
js的Boolean对象初始值示例
Mar 04 Javascript
javascript模拟post提交隐藏地址栏的参数
Sep 03 Javascript
JavaScript和CSS交互的方法汇总
Dec 02 Javascript
jQuery实现简单的DIV拖动效果
Feb 19 Javascript
BootStrap实现树形目录组件代码详解
Jun 21 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
React 无状态组件(Stateless Component) 与高阶组件
Aug 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+FLASH实现上传文件进度条相关文件 下载
2007/07/21 PHP
用PHP+MySQL搭建聊天室功能实例代码
2012/08/20 PHP
php过滤XSS攻击的函数
2013/11/12 PHP
关于php支持分块与断点续传文件下载功能代码
2014/05/09 PHP
php blowfish加密解密算法
2016/07/02 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
JavaScript 基础知识 被自己遗忘的
2009/10/15 Javascript
JavaScript 动态添加表格行 使用模板、标记
2009/10/24 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
JS实现的自定义网页拖动类
2015/11/06 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
2017/02/07 Javascript
Vue cli+mui 区域滚动的实例代码
2018/01/25 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
2018/12/28 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
2019/07/09 Javascript
vue使用better-scroll实现滑动以及左右联动
2020/06/30 Javascript
Vue基于localStorage存储信息代码实例
2020/11/16 Javascript
Vue实现点击当前行变色
2020/12/14 Vue.js
[55:45]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第一局
2016/02/28 DOTA
Python实现统计英文文章词频的方法分析
2019/01/28 Python
pyqt5中QThread在使用时出现重复emit的实例
2019/06/21 Python
Pyqt5自适应布局实例
2019/12/13 Python
详解HTML5 录音的踩坑之旅
2017/12/26 HTML / CSS
漫威玩具服装及周边商品官方购物网站:Marvel Shop
2019/05/11 全球购物
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
建筑文秘专业个人求职信范文
2013/12/28 职场文书
简历上的自我评价
2014/02/03 职场文书
2014年社区矫正工作总结
2014/11/18 职场文书
民事上诉状范文
2015/05/22 职场文书
干部培训简讯
2015/07/20 职场文书
2016特色励志班级口号
2015/12/24 职场文书
创业计划书之服装
2019/10/07 职场文书
vue引入Excel表格插件的方法
2021/04/28 Vue.js
使用CSS设置滚动条样式
2022/01/18 HTML / CSS
Spring IOC容器Bean的作用域及生命周期实例
2022/05/30 Java/Android