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 相关文章推荐
极酷的javascirpt,让你随意编辑任何网页
Feb 25 Javascript
纯js实现的论坛常用的运行代码的效果
Jul 15 Javascript
js事件冒泡实例分享(已测试)
Apr 23 Javascript
动态创建script标签实现跨域资源访问的方法介绍
Feb 28 Javascript
JavaScript利用正则表达式去除日期中的-
Jun 09 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
Sep 01 Javascript
jquery验证邮箱格式是否正确实例讲解
Nov 16 Javascript
Bootstrap树形控件使用方法详解
Jan 27 Javascript
Javascript简写条件语句(推荐)
Jun 12 Javascript
浅谈JavaScript中的分支结构
Jul 01 Javascript
vue.js入门教程之绑定class和style样式
Sep 02 Javascript
用vue构建多页面应用的示例代码
Sep 20 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 empty函数判断mysql表单是否为空
2010/04/12 PHP
基于PHP读取TXT文件向数据库导入海量数据的方法
2013/04/23 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
JQuery 小练习(实例代码)
2009/08/07 Javascript
web前端开发也需要日志
2010/12/09 Javascript
页面调用单个swf文件,嵌套出多个方法。
2011/11/21 Javascript
js 使用form表单select类实现级联菜单效果
2012/12/19 Javascript
javascript解三阶幻方(九宫格)
2015/04/22 Javascript
解决js图片加载时出现404的问题
2020/11/30 Javascript
基于jquery步骤进度条源码分享
2015/11/12 Javascript
bootstrap布局中input输入框右侧图标点击功能
2016/05/16 Javascript
javascript cookie基础应用之记录用户名的方法
2016/09/20 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
2017/01/19 Javascript
原生js实现弹出层效果
2017/01/20 Javascript
php 修改密码实现代码
2017/05/24 Javascript
原生JS实现瀑布流插件
2018/02/06 Javascript
详解webpack模块化管理和打包工具
2018/04/21 Javascript
简单了解微信小程序的目录结构
2019/07/01 Javascript
JavaScript canvas绘制圆弧与圆形
2020/02/18 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
2020/11/04 Javascript
Python减少循环层次和缩进的技巧分析
2016/03/15 Python
python分析作业提交情况
2017/11/22 Python
Windows10+anacond+GPU+pytorch安装详细过程
2020/03/24 Python
django执行数据库查询之后实现返回的结果集转json
2020/03/31 Python
Python本地及虚拟解释器配置过程解析
2020/10/13 Python
python 模拟登录B站的示例代码
2020/12/15 Python
如何在Canvas上的图形/图像绑定事件监听的实现
2020/09/16 HTML / CSS
静态成员和非静态成员的区别
2012/05/12 面试题
广告学专业自荐信范文
2014/02/24 职场文书
关于读书的演讲稿
2014/05/07 职场文书
“四风”查摆问题自我剖析材料
2014/09/27 职场文书
刑事辩护授权委托书范本
2014/10/17 职场文书
关于调整工作时间的通知
2015/04/24 职场文书
导游词之北京明十三陵
2019/10/28 职场文书
go语言中json数据的读取和写出操作
2021/04/28 Golang
GPU服务器的多用户配置方法
2022/07/07 Servers