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对URL字符串进行编码/解码分析
Oct 25 Javascript
Jquery之美中不足小结
Feb 16 Javascript
JavaScript创建类/对象的几种方式概述及实例
May 06 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
Dec 03 Javascript
详解JavaScript中的事件流和事件处理程序
May 20 Javascript
Angular在一个页面中使用两个ng-app的方法
Feb 20 Javascript
Bootstrap页面标题Page Header的实现方法
Mar 22 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
Jul 23 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
Oct 26 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 Javascript
es6中比较有用的7个技巧小结
Jul 12 Javascript
Python机器学习之决策树和随机森林
Jul 15 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读取二进制流(C语言结构体struct数据文件)的深入解析
2013/06/13 PHP
关于PHP的curl开启问题探讨
2014/04/08 PHP
从零开始学YII2框架(一)通过Composer安装Yii2框架
2014/08/20 PHP
php获取用户浏览器版本的方法
2015/01/03 PHP
php版微信自动登录并获取昵称的方法
2016/09/23 PHP
PHP程序员简单的开展服务治理架构操作详解(二)
2020/05/14 PHP
Javascript根据指定下标或对象删除数组元素
2012/12/21 Javascript
js 判断一个元素是否在页面中存在
2012/12/27 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
2015/08/17 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
超全面的vue.js使用总结
2017/02/12 Javascript
JS中Safari浏览器中的Date
2017/07/17 Javascript
nodejs中art-template模板语法的引入及冲突解决方案
2017/11/07 NodeJs
jQuery+CSS实现的标签页效果示例【测试可用】
2018/08/14 jQuery
javascript实现图片轮播代码
2019/07/09 Javascript
JavaScript实现移动端弹窗后禁止滚动
2020/05/25 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
2020/09/07 Javascript
在vue项目中 实现定义全局变量 全局函数操作
2020/10/26 Javascript
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
Python设计实现的计算器功能完整实例
2017/08/18 Python
对numpy中布尔型数组的处理方法详解
2018/04/17 Python
python 实现在txt指定行追加文本的方法
2018/04/29 Python
Python中的枚举类型示例介绍
2019/01/09 Python
解决pycharm的Python console不能调试当前程序的问题
2019/01/20 Python
Python使用__new__()方法为对象分配内存及返回对象的引用示例
2019/09/20 Python
python银行系统实现源码
2019/10/25 Python
Python命令行click参数用法解析
2019/12/19 Python
python实现五子棋游戏(pygame版)
2020/01/19 Python
Python中格式化字符串的四种实现
2020/05/26 Python
html5画布旋转效果示例
2014/01/27 HTML / CSS
日本乐天德国站:Rakuten.de
2019/05/16 全球购物
包装类的功能、种类、常用方法
2012/01/27 面试题
大学生个人学年总结
2015/02/15 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
运动会主持词大全
2015/07/02 职场文书
使用RedisTemplat实现简单的分布式锁
2021/11/20 Redis