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 去字符串空格终极版(支持utf8)
Nov 14 Javascript
html超链接打开窗口大小的方法
Mar 05 Javascript
微信小程序 首页制作简单实例
Apr 07 Javascript
利用Vue.js实现求职在线之职位查询功能
Jul 03 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
Jul 21 Javascript
你应该了解的JavaScript Array.map()五种用途小结
Nov 14 Javascript
使用 vue 实例更好的监听事件及vue实例的方法
Apr 22 Javascript
vue.js多页面开发环境搭建过程
Apr 24 Javascript
vue单页应用的内存泄露定位和修复问题小结
Aug 02 Javascript
JS字符串补全方法padStart()和padEnd()
May 27 Javascript
微信小程序实现canvas分享朋友圈海报
Jun 21 Javascript
js实现贪吃蛇小游戏(加墙)
Jul 31 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教程 预定义变量
2009/10/23 PHP
PHP函数超时处理方法
2016/02/14 PHP
linux平台编译安装PHP7并安装Redis扩展与Swoole扩展实例教程
2016/09/30 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
PHP lcfirst()函数定义与用法
2019/03/08 PHP
PHP示例演示发送邮件给某个邮箱
2019/04/03 PHP
给事件响应函数传参数的四种方式小结
2013/12/05 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
2014/01/07 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
2014/05/20 Javascript
css与javascript跨浏览器兼容性总结
2014/09/15 Javascript
AngularJS的表单使用详解
2015/06/17 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
2016/06/13 Javascript
js实现点击图片自动提交action的简单方法
2016/10/16 Javascript
Bootstrap缩略图与警告框学习使用
2017/02/08 Javascript
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
js最简单的双向绑定实例讲解
2018/01/02 Javascript
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
vue动态绑定class的几种常用方式小结
2019/05/21 Javascript
在Python中使用异步Socket编程性能测试
2014/06/25 Python
Python数组遍历的简单实现方法小结
2016/04/27 Python
python模块之re正则表达式详解
2017/02/03 Python
python3实现公众号每日定时发送日报和图片
2018/02/24 Python
实例详解Python模块decimal
2019/06/26 Python
如何使用django的MTV开发模式返回一个网页
2019/07/22 Python
python使用pygame实现笑脸乒乓球弹珠球游戏
2019/11/25 Python
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
HTML5 weui使用笔记
2019/11/21 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
2020/08/06 HTML / CSS
英国领先的在线旅游和休闲零售商:lastminute.com
2019/01/23 全球购物
Keds加拿大官网:购买帆布运动鞋和皮鞋
2019/09/26 全球购物
Jowissa官方网站:瑞士制造的手表,优雅简约的设计
2020/07/29 全球购物
实习求职信
2013/12/01 职场文书
《美丽的小路》教学反思
2014/02/26 职场文书
一次MySQL启动导致的事故实战记录
2021/09/15 MySQL
磁贴还没死, 微软Win11可修改注册表找回Win10开始菜单
2021/11/21 数码科技
Redis基本数据类型Set常用操作命令
2022/06/01 Redis