前端性能优化:高频执行事件/方法的防抖
2023-09-11 14:20:44 时间
来源:GBin1.com
上一篇我们说了用InnerHTML和DocumentFragment来减少DOM注入的次数,这次我们说一说如何处理高频事件触发时的优化。
高频执行事件/方法的防抖
通常,开发人员会在有用户交互参与的地方添加事件,而往往这种事件会被频繁触发。想象一下窗口的resize事件或者是一个元素的onmouseover事件 - 他们触发时,执行的非常迅速,并且触发很多次。如果你的回调过重,你可能使浏览器死掉。
这就是为什么我们要引入防抖。
防抖可以限制一个方法在一定时间内执行的次数。以下代码是个防抖示例:
// 取自 UnderscoreJS 实用框架 function debounce(func, wait, immediate) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; } // 添加resize的回调函数,但是只允许它每300毫秒执行一次 window.addEventListener('resize', debounce(function(event) { // 这里写resize过程 }, 300));
debounce方法返回一个方法,用来包住你的回调函数,限制他的执行频率。使用这个防抖方法,就可以让你写的频繁回调的方法不会妨碍用户的浏览器!
下一篇,我们将介绍网络存储中静态缓存和非必要内容的优化方法。
相关文章
- Android开发之布局文件里实现OnClick事件关联处理方法
- 触发事件,检查是否注册过事件的方法
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
- 工作总结 页面通过ajax 动态绑定 列表页面 列表每一项的事件 事件触发多次
- 【Vue】Vue中实现单击click事件获取html元素和css样式的解决方法(持续更新中...)
- 分析2000余家投资机构+12000次投资事件,发现了这些投资特点
- onclick事件
- js 绑定事件的几种方法 addEventListener()
- Javascript事件与功能说明大全
- vue---向后台添加数据--删除数据--事件方法传参---在单页面配置url请求地址--暂时没有用到webpack
- 绑定属性的指令-v-bind 缩写:属性="data里边定义的名字" 点击事件v-on:click="" 缩写@click="方法名"
- jQuery 为动态添加的元素绑定事件
- android studio 添加按钮点击事件的三种方法