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中void(0)的具体含义解释
Feb 27 Javascript
js登录弹出层特效
Mar 07 Javascript
JavaScript监听和禁用浏览器回车事件实例
Jan 31 Javascript
JavaScript获取一个范围内日期的方法
Apr 24 Javascript
jquery实现文本框textarea自适应高度
Mar 09 Javascript
JS Attribute属性操作详解
May 19 Javascript
利用vue-router实现二级菜单内容转换
Nov 30 Javascript
原生js封装的ajax方法示例
Aug 02 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
Aug 31 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
Jul 18 Javascript
微信小程序使用前置摄像头拍照
Oct 22 Javascript
微信小程序实现首页弹出广告
Dec 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
Linux下将excel数据导入到mssql数据库中的方法
2010/02/08 PHP
php XPath对XML文件查找及修改实现代码
2011/07/27 PHP
php实现复制移动文件的方法
2015/07/29 PHP
分享10段PHP常用代码
2015/11/11 PHP
php设计模式之单例模式用法经典示例分析
2019/09/20 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
Laravel 5.1 框架Blade模板引擎用法实例分析
2020/01/04 PHP
jQuery对Select的操作大集合(收藏)
2013/12/28 Javascript
解释&&和||在javascript中的另类用法
2014/07/28 Javascript
js选项卡的实现方法
2015/02/09 Javascript
JavaScript动态插入CSS的方法
2015/12/10 Javascript
JavaScript头像上传插件源码分享
2016/03/29 Javascript
使用jquery提交form表单并自定义action的方法
2016/05/25 Javascript
微信小程序 图片上传实例详解
2017/05/05 Javascript
Vue2 使用 Echarts 创建图表实例代码
2017/05/18 Javascript
关于redux-saga中take使用方法详解
2018/02/27 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
2018/06/04 Javascript
vuejs点击class变化的实例
2018/09/05 Javascript
JS几个常用的函数和对象定义与用法示例
2020/01/15 Javascript
javascript canvas API内容整理
2020/02/16 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
2020/04/09 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
[32:26]EG vs IG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python获取Linux下文件版本信息、公司名和产品名的方法
2014/10/05 Python
Python的类实例属性访问规则探讨
2015/01/30 Python
Python3遍历目录树实现方法
2015/05/22 Python
python批量下载抖音视频
2019/06/17 Python
证婚人经典证婚词
2014/01/09 职场文书
xxx同志考察材料
2014/02/07 职场文书
民生工程实施方案
2014/03/22 职场文书
师德师风个人反思
2014/04/28 职场文书
我爱幼儿园演讲稿
2014/09/11 职场文书
2014年财政所工作总结
2014/11/22 职场文书
一年级语文上册复习计划
2015/01/17 职场文书
JavaScript如何利用Promise控制并发请求个数
2021/05/14 Javascript
小喇叭开始广播了! 四十多年前珍贵老照片
2022/05/09 无线电