您现在的位置：首页 --> JavaScript --> window resize和scroll事件的基本优化
window resize和scroll事件的基本优化
浏览:1221次 出处信息
同事在项目中使用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事件优化同理。
建议继续学习：
QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习
扫一扫订阅我的微信号：IT技术博客大学习
<< 前一篇：Javascript中的delete操作符
后一篇：JavaScript中双叹号(!!)作用 >>
文章信息
- 作者：愚人码头 来源： WEB前端开发
- 标签： resize scroll
- 发布时间：2014-11-27 12:53:35
近3天十大热文
-
[59] memory prefetch浅析 -
[55] 转载：cassandra读写性能原理分析
-
[49] 深入浅出cassandra 4 数据一致性问
-
[46] MySQL半同步存在的问题
-
[41] javascript插入样式
-
[40] 《web前端最佳实践》—高维护性css
-
[39] 获取Dom元素的X/Y坐标
-
[37] MySQL vs NoSQL 效率与成本之争
-
[35] 字符引用和空白字符
-
[34] 基本排序算法的PHP实现
