window resize和scroll事件的基本优化思路
更新时间：2014年04月29日 15:25:39 作者：
在项目中使用scroll事件去加载数据，结果IE下悲剧了。下面为大家介绍下window resize和scroll事件的基本优化思路,需要的朋友可以参考下
同事在项目中使用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事件优化同理。
只要用户改变窗口大小，会对内部一些元素大小重新计算，可能导致整个页面重新渲染，最终导致大量消耗 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事件优化同理。
您可能感兴趣的文章:
相关文章
本文通过一个例子给大家简单介绍了bootstrap fileinput初始化时的一些参数，非常不错，具有参考借鉴价值，需要的朋友参考下2016-12-12
用JavaScript实现字符串切分功能...2007-01-01
JavaScript中ES6规范中let和const的用法和区别
这篇文章主要介绍了JavaScript中ES6规范中let和const的用法和区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
JavaScript是单线程运行的，没有内置的sleep函数，那么JavaScript sleep睡眠函数是怎样实现的，感兴趣的小伙伴们可以参考一下2021-07-07
关于uniapp中onReachBottomDistance属性的使用
这篇文章主要介绍了关于uniapp中onReachBottomDistance属性的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
DataJoin(数据连接)是D3中很重要的一个概念。D3是基于数据操作DOM的js库，DataJoin使我们能够根据现有 HTML 文档中的数据集注入、修改和删除元素。本文主要和大家详细聊聊DataJoin的使用，感兴趣的可以学习一下2022-11-11![Javascript 获取链接(url)参数的方法[正则与截取字符串]](//img.jbzj.com/images/xgimg/bcimg6.png)
Javascript 获取链接(url)参数的方法[正则与截取字符串]
有时我们需要在客户端获取链接参数，一个常见的方法是将链接当做字符串，按照链接的格式分解，然后获取对应的参数值。本文给出的就是这个流程的具体实现方法。2010-02-02
这篇文章主要介绍了浅谈微信小程序之官方UI框架we-ui使用教程，WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，感兴趣的小伙伴们可以参考一下2018-08-08
这篇文章主要介绍了JavaScript定时器的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
通过js来检测开发者工具是否打开，防止别人恶意调试我们的代码，最近我发现还是有蛮多人去浏览那篇文章，所以这里再放出一段代码，算是个升级版吧2020-10-10
![Javascript 获取链接(url)参数的方法[正则与截取字符串]](http://img.jbzj.com/images/xgimg/bcimg6.png)
最新评论