首页 web前端 js教程 window resize和scroll事件的基本优化思路_javascript技巧

window resize和scroll事件的基本优化思路_javascript技巧

May 16, 2016 pm 04:50 PM
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事件优化同理。
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
2 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

scroll是什么按键 scroll是什么按键 Feb 22, 2023 pm 02:29 PM

scroll是滚动锁定键,是计算机键盘上的功能键。scroll键常用于word和Excel中,在Scroll Lock关闭的状态下,使用翻页键时,单元格选定区域会随之发生移动;但是当按下了Scroll Lock键后,就不会移动选定的单元格。

Vue中如何对图片进行压缩和格式转换? Vue中如何对图片进行压缩和格式转换? Aug 25, 2023 pm 11:06 PM

Vue中如何对图片进行压缩和格式转换?在前端开发中,经常会遇到需要对图片进行压缩和格式转换的需求。特别是在移动端的开发中,为了提高页面加载速度和节省用户流量,对图片进行压缩和格式转换是很关键的。而在Vue框架中,我们可以通过一些工具库来实现对图片的压缩和格式转换。使用compressor.js库进行压缩compressor.js是一款用于压缩图片的JavaS

滚动scroll如何理解 滚动scroll如何理解 May 23, 2023 pm 01:40 PM

滚动宽高scrollHeight  scrollHeight表示元素的总高度,包括由于溢出而无法展示在网页的不可见部分scrollWidth  scrollWidth表示元素的总宽度,包括由于溢出而无法展示在网页的不可见部分  [注意]IE7-浏览器返回值是不准确的  【1】没有滚动条时,scrollHeight与clientHeight属性结果相等,scrollWidth与clientWidth属性结果相等//120120console.log(test.scrollHeight,test.s

键盘scroll灯亮什么意思 键盘scroll灯亮什么意思 Feb 20, 2023 pm 01:42 PM

键盘scroll灯亮的意思是指“滚动锁”被启用;Scroll Lock键在win系统中不用,但是部分软件会使用到这个功能键,按下此键后,在Excel上、下键滚动时,会锁定光标而滚动页面;如果放开此键,则按上、下键时会滚动光标而不滚动页面。

Python怎么对图片进行resize、裁剪、旋转、翻转 Python怎么对图片进行resize、裁剪、旋转、翻转 May 10, 2023 am 10:43 AM

对图片进行resize、裁剪、旋转、翻转首先我们的原始图片是10张网上下载尺寸不一的图片,如下:操作1:resize将图片resize到相同尺寸(320,240)fromPILimportImageimporttorchvision.transformsastransforms#使用PIL库读入图片并进行resizedefResizeImage():ifnotos.path.exists(rdir):os.makedirs(rdir)foriinrange(10):im=Image.open(d

Vue中如何使用v-on:scroll监听滚动事件 Vue中如何使用v-on:scroll监听滚动事件 Jun 11, 2023 pm 12:14 PM

Vue是目前比较流行的前端框架之一,除了常见的事件监听外,Vue还提供了一种用于监听滚动事件的指令,即v-on:scroll。本文将详细介绍如何在Vue中使用v-on:scroll监听滚动事件。一、v-on:scroll指令基本用法v-on:scroll指令用于监听DOM元素的滚动事件,其基本用法如下:

css 怎么隐藏scroll css 怎么隐藏scroll Jan 28, 2023 pm 02:02 PM

css隐藏scroll的方法:1、在Firefox中,可以通过“scrollbar-width: none; /* Firefox */”属性实现隐藏滚动条;2、在IE浏览器中,可以使用“-ms-prefix”属性定义滚动条样式;3、在Chrome和Safari中,可以用CSS滚动条选择器,然后通过“display:none”隐藏即可。

在JavaScript中,当浏览器窗口调整大小时,这是哪个事件? 在JavaScript中,当浏览器窗口调整大小时,这是哪个事件? Sep 05, 2023 am 11:25 AM

使用window.outerWidth和window.outerHeight事件在JavaScript中获取窗口大小,当浏览器调整大小时。示例您可以尝试运行以下代码来使用事件检查浏览器窗口大小−<!DOCTYPEhtml><html>  <head>   <script>&am

See all articles