`
axl234
  • 浏览: 260530 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

resize和scroll事件的优化，防止浏览器死掉

 
阅读更多

原理是利用setTimeout让resize事件和scroll事件在一定的时间内只执行一次，如下代码执行的话，浏览器会执行多次，甚至死掉：

(function(){
window.onresize=function(){
	alert(0);
	}
})()

只要用户改变窗口大小，会对内部一些元素大小重新计算，可能导致整个页面重新渲染，最终导致大量消耗 CPU。比如调用 resize 方法，用户改变窗口大小时会不停的被触发， 低版本的IE 会可能陷入假死状态。window的scroll事件也是如此，鼠标滚动或拖动滚动条，就会不停的触发scroll事件，如果处理的东西多，低版本的IE 也会陷入假死状态。
优化代码如下：

//解决方法
var resizeTimer = null;
window.onresize=function(){
	 if (resizeTimer) {
     	clearTimeout(resizeTimer)
     }
     resizeTimer = setTimeout(function(){
     	alert(0);
     }, 400);
}





<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>resize和scroll事件的优化，防止浏览器死掉</title>
</head>
<body>
<script type="text/javascript">
//执行这代码，浏览器会死掉，只要用户改变窗口大小，会对内部一些元素大小重新计算，可能导致整个页面重新渲染，最终导致大量消耗 CPU。比如调用 resize 方法，用户改变窗口大小时会不停的被触发， 低版本的IE 会可能陷入假死状态。window的scroll事件也是如此，鼠标滚动或拖动滚动条，就会不停的触发scroll事件，如果处理的东西多，低版本的IE也会陷入假死状态。
/*(function(){
window.onresize=function(){
	alert(0);
	}
})()*/
//解决方法
var resizeTimer = null;
window.onresize=function(){
	 if (resizeTimer) {
     	clearTimeout(resizeTimer)
     }
     resizeTimer = setTimeout(function(){
     	alert(0);
     }, 400);
}
</script>
</body>
</html>
分享到：
| 使一个已知宽高的div垂直水平都居中于浏览 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics