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

最新推荐文章于 2024-05-25 21:30:40 发布

axl234

最新推荐文章于 2024-05-25 21:30:40 发布

阅读量374

点赞数

分类专栏： javascript jquery 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/axl234/article/details/84463936

版权

javascript 同时被 2 个专栏收录

158 篇文章 0 订阅

订阅专栏

jquery

104 篇文章 0 订阅

订阅专栏

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

(function(){
window.οnresize=function(){
	alert(0);
	}
})()

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

//解决方法
var resizeTimer = null;
window.οnresize=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.οnresize=function(){
	alert(0);
	}
})()*/
//解决方法
var resizeTimer = null;
window.οnresize=function(){
	 if (resizeTimer) {
     	clearTimeout(resizeTimer)
     }
     resizeTimer = setTimeout(function(){
     	alert(0);
     }, 400);
}
</script>
</body>
</html>

axl234

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
resize和scroll事件的优化，防止浏览器死掉

原理是利用setTimeout让resize事件和scroll事件在一定的时间内只执行一次，如下代码执行的话，浏览器会执行多次，甚至死掉：(function(){window.onresize=function(){ alert(0); }})()只要用户改变窗口大小，会对内部一些元素大小重新计算，可能导致整个页面重新渲染，最终导致大量消耗 CPU。比如调用 resi...
复制链接

扫一扫

专栏目录