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 相关文章推荐
Flash+XML滚动新闻代码 无图片 附源码下载
Nov 22 Javascript
javascript天然的迭代器
Oct 29 Javascript
jQuery如何实现点击页面获得当前点击元素的id或其他信息
Jan 09 Javascript
js时间比较示例分享(日期比较)
Mar 05 Javascript
Vue常用指令V-model用法
Mar 08 Javascript
js获取元素的偏移量offset简单方法(必看)
Jul 05 Javascript
webpack引入eslint配置详解
Jan 22 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
Apr 17 Javascript
原生js实现抽奖小游戏
Jun 27 Javascript
解决layui动态加载复选框无法选中的问题
Sep 20 Javascript
基于Cesium绘制抛物弧线
Nov 18 Javascript
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
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中常见数据类型的汇总分享
2014/01/06 PHP
PHP常用正则表达式集锦
2014/08/17 PHP
PHP实现简单ajax Loading加载功能示例
2016/12/28 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
将函数的实际参数转换成数组的方法
2010/01/25 Javascript
JavaScript中setAttribute用法介绍
2013/07/20 Javascript
js判断变量初始化的三种形式及推荐用的形式
2014/07/22 Javascript
jquery实现类似淘宝星星评分功能实例
2014/09/12 Javascript
jQuery获取页面元素绝对与相对位置的方法
2015/06/10 Javascript
Bootstrap每天必学之媒体对象
2015/11/30 Javascript
javascript中对Date类型的常用操作小结
2016/05/19 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
2017/11/03 Javascript
jquery animate动画持续运动的实例
2017/11/29 jQuery
Vue框架TypeScript装饰器使用指南小结
2019/02/18 Javascript
python网络编程之读取网站根目录实例
2014/09/30 Python
Python原始字符串(raw strings)用法实例
2014/10/13 Python
Python数据操作方法封装类实例
2017/06/23 Python
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
新手如何发布Python项目开源包过程详解
2019/07/11 Python
Python安装及Pycharm安装使用教程图解
2019/09/20 Python
树莓派4B安装Tensorflow的方法步骤
2020/07/16 Python
Python 利用OpenCV给照片换底色的示例代码
2020/08/03 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
Python读写锁实现实现代码解析
2020/11/28 Python
无畏的旅行:Intrepid Travel
2017/12/20 全球购物
澳大利亚购买最佳炊具品牌网站:Cookware Brands
2019/02/16 全球购物
写出一个方法实现冒泡排序
2016/07/08 面试题
船舶专业个人求职信范文
2014/01/02 职场文书
自动化毕业生专业自荐书范文
2014/02/04 职场文书
会员卡清退活动总结
2014/08/27 职场文书
美容院合作经营协议书
2014/10/10 职场文书
教师个人教学总结
2015/02/11 职场文书
2015大学生党员自我评价范文
2015/03/03 职场文书
学校百日安全活动总结
2015/05/07 职场文书
Python中使用subprocess库创建附加进程
2021/05/11 Python
python如何利用cv2模块读取显示保存图片
2021/06/04 Python