原理是利用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>
相关推荐
window的scroll事件也是如此，鼠标滚动或拖动滚动条，就会不停的触发scroll事件，如果处理的东西多，低版本的IE也会陷入假死状态。 基本的优化思路：在一定的时间之内，只执行一次resize事件函数。 代码如下: var ...
浏览器窗口大小变化时使用resize事件对框架不起作用的解决办法，如下： 代码如下:$(window).resize(function(){var surH = $(window).height();$(“.pic_conent”).height(surH);} 当浏览器变化，拉大拉小时，没有...
Firefox浏览器对`resize`事件的支持与其他主流浏览器（如Chrome、Safari和Edge）有所不同。在某些情况下，尤其是当代码在页面加载完成后立即注册`resize`事件监听器时，Firefox可能不会正确地触发事件。这是因为Fire...
在这个例子中，我们使用一个标志变量`resizing`来防止连续的`resize`事件触发同一处理函数，并通过`requestAnimationFrame`确保在下一次绘制前执行相关代码，提高页面流畅性。 在提供的`提示框.html`文件中，可能...
笔者最近学习发现了一种神奇的方法，通过 scroll 事件来间接实现 resize 事件的监听，本文将对这种方式进行原理的剖析与代码实现。 原理 首先，我们先来看一下 scroll 事件是干嘛的。 The scroll event is fired ...
当用户调整窗口的大小时，`Resize`事件会被触发，开发者可以在这个事件处理程序中更新控件的位置和大小，以保持界面的动态和谐布局。下面将详细阐述如何利用`Resize`事件以及`left`和`top`属性来实现这个功能。 ...
同时，插件还提供了延迟执行和节流功能，以优化性能，避免频繁的尺寸检查导致的性能问题。 4. 使用技巧与注意事项 - 节流与防抖：在处理大量元素或者频繁触发的场景下，可以考虑使用节流（throttle）或防抖...
JavaScript+jQuery 网页特效设计 jQuery-窗口、表单事件 1、窗口事件 1.1 ready事件 VS onload事件 ...1、窗口事件_ scroll事件 x=0; $(document).ready(function(){ $("div").scroll(function(){ $("s
如今，浏览器支持使用本机处理元素大小调整。 该库使用这些观察者来帮助您处理React中的元素大小。 :front-facing_baby_chick: 小 :panda: 用TypeScript编写 :lion: 支持功能和类组件 :tropical_fish: 被 :...
总而言之，通过条件判断和延迟执行相结合的方式，可以有效地控制scroll事件的执行频率，从而提升用户交互体验和网页特效的性能。在实际开发中，开发者需要根据具体情况调整和优化这些方法，以达到最佳的用户体验。
1. **自适应填充**：ez-bg-resize插件的核心在于根据浏览器窗口的宽度和高度动态计算背景图像的大小，以达到全屏覆盖的效果。通过CSS的background-size属性，将背景图像设置为“cover”，这样可以确保图像始终填满...
- **Resize事件**：通过监听`resize`事件，可以在浏览器窗口大小改变时触发函数，重新计算并设置元素的位置。例如，使用`$(window).on('resize', function() {...})`在jQuery中设置回调函数。 - **动态调整样式**...
1. **元素尺寸监听**：`jquery.ba-resize.js`的核心在于它能够实时监测元素的宽度和高度变化，不论是因为浏览器窗口的调整，还是因为内部内容的变化导致的尺寸更新，它都能够准确捕获。 2. **事件绑定**：通过调用`...
元素调整大小检测器针对元素的优化的跨浏览器调整大小侦听器。 比相关方法快37倍（请参阅第5节）。 npm install element-resize-detector用法在浏览器中包含脚本： < script src =" node_modules/element-resize-...
resize事件演示.html
浏览器尺寸可能会随着用户的操作（如窗口缩放、横竖屏切换）而改变，因此，可能需要监听`resize`事件来实时获取新的尺寸。可以使用`window.addEventListener('resize', function) `来添加事件监听器。 ```...