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事件优化同理。
您可能感兴趣的文章:
相关文章
all是一个集合，包含所有html对像的集合，写一个程式，可以存取到所有的对像。2008-11-11
我们通常在使用cookie的时候一般都只是局限在本站内使用，也就是只在一个域名下使用2011-11-11
这篇文章主要介绍了js 解析 JSON 数据的方法,结合简单实例形式分析了js 解析 JSON 格式数据的相关操作技巧与注意事项,需要的朋友可以参考下2020-04-04
这篇文章主要介绍了使用微信SDK自定义分享的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
这篇文章主要给大家介绍了关于微信小程序如何在其他页面监听globalData中值的变化的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-07-07
JavaScript 中级笔记2009-09-09
大家都知道在js中没有类的概念，因此它的对象也与基于类的语言中的对象有所不同。所以大家要了解面向对象，首先要了解js中的对象和原型，下面本文给大家介绍JavaScript中的对象和原型(一)知识，一起看下吧2016-08-08
这篇文章主要介绍了微信小程序引入VANT组件的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
这篇文章主要介绍了浅谈Vue3.0之前你必须知道的TypeScript实战技巧，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要介绍了JavaScript实现的斑马线表格效果,通过javascript针对table表格的遍历与运算实现隔行变色功能,非常简单实用,需要的朋友可以参考下2017-09-09
最新评论