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 event事件在IE、FF兼容性问题
Jan 01 Javascript
java和javascript获取word文档的书签位置对比
Jun 19 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
Mar 09 Javascript
基于JavaScript实现动态添加删除表格的行
Feb 01 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
如何利用JQuery实现从底部回到顶部的功能
Dec 27 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
Mar 31 Javascript
js获取一组日期中最近连续的天数
May 25 Javascript
Vue.js 2.5新特性介绍(推荐)
Oct 24 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
Jun 11 Javascript
关于vue表单提交防双/多击的例子
Oct 31 Javascript
jquery实现直播弹幕效果
Nov 28 jQuery
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
BBS(php & mysql)完整版(六)
2006/10/09 PHP
php数据库连接时容易出错的特殊符号问题
2010/09/01 PHP
解析php下载远程图片函数 可伪造来路
2013/06/25 PHP
PHP获取Exif缩略图的方法
2015/07/13 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
php实现在站点里面添加邮件发送的功能
2020/04/28 PHP
php实现登陆模块功能示例
2016/10/20 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
利用phpexcel对数据库数据的导入excel(excel筛选)、导出excel
2017/04/27 PHP
实例分析10个PHP常见安全问题
2019/07/09 PHP
清除网页历史记录,屏蔽后退按钮!
2008/12/22 Javascript
Javascript学习笔记1 数据类型
2010/01/11 Javascript
JavaScript事件委托用法分析
2015/01/24 Javascript
jQuery插件jRumble实现网页元素抖动
2015/06/05 Javascript
jQuery中常用的遍历函数用法实例总结
2015/09/01 Javascript
javascript判断网页是关闭还是刷新
2015/09/12 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
微信小程序非跳转式组件授权登录的方法示例
2019/05/22 Javascript
JavaScript 实现同时选取多个时间段的方法
2019/10/17 Javascript
Python 描述符(Descriptor)入门
2016/11/20 Python
Python Process多进程实现过程
2019/10/22 Python
python 错误处理 assert详解
2020/04/20 Python
Python xpath表达式如何实现数据处理
2020/06/13 Python
python基于opencv实现人脸识别
2021/01/04 Python
Python爬取网站图片并保存的实现示例
2021/02/26 Python
关于css兼容性问题及一些常见问题汇总
2016/05/03 HTML / CSS
Tretorn美国官网:瑞典外套和鞋类品牌,抵御风雨
2018/07/19 全球购物
Diamondback自行车:拥有你的冒险
2019/04/22 全球购物
西班牙Polo衫品牌:Polo Club
2020/08/09 全球购物
KEEN美国官网:美国人气户外休闲鞋品牌
2021/03/09 全球购物
小学体育教学反思
2014/01/31 职场文书
商场中秋节活动方案
2014/02/07 职场文书
高中军训感想800字
2014/02/23 职场文书
单方离婚协议书范本(2014版)
2014/09/30 职场文书
导游词之贵州织金洞
2019/10/12 职场文书
Python实现智慧校园自动评教全新版
2021/06/18 Python