java接口防抖_前端性能优化：高频执行事件/方法的防抖

日期：2013-6-25 来源：GBin1.com

高频执行事件/方法的防抖

通常，开发人员会在有用户交互参与的地方添加事件，而往往这种事件会被频繁触发。想象一下窗口的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方法返回一个方法，用来包住你的回调函数，限制他的执行频率。使用这个防抖方法，就可以让你写的频繁回调的方法不会妨碍用户的浏览器！

下一篇，我们将介绍网络存储中静态缓存和非必要内容的优化方法。

java接口防抖_前端性能优化：高频执行事件/方法的防抖相关推荐

dll文件懒加载_前端性能优化
# 前端性能优化写在最前面:下面都是我对webpack的一些性能优化,想系统的学习性能优化方面的知识推荐大家看看这本书很系统感觉面试也能如鱼得水 ## 构建优化 ### webpack优化 ( ...
前端白屏问题_前端性能优化之白屏时间
前言该篇文章会为您分享在前端性能优化中非常重要的一环-白屏时间,将从白屏时间的概念.重要性以及白屏的过程一一进行阐述,同时提供性能优化的策略与实践. 一.概念白屏时间:即用户点击一个链接或打开浏览 ...
前端性能优化的七种方法
前端性能优化主要有七种方法,包括减少请求数量.减少资源大小.优化网络连接.优化资源加载.减少重绘回流.使用性能更好的API和webpack优化 1.减少请求数量 1.1 图片处理 1.1.1 雪碧图 ...
java 判断语句性能_前端性能优化：js中优化条件判断语句
在开发过程中,由于追求开发速度,我们往往很多时候都没有注意代码的可读性与性能,这里介绍几个技巧,让你写出可读性强.简洁的js代码 1.多个条件满足之一时,推荐使用Array.includes// 优化 ...
html个人主页_前端性能优化实践之百度App个人主页优化
作者:潘铭 @祝余前言性能是每个前端工程师都应该关注的话题,通用的优化手段已有许多文章和实践,就不再赘述,本篇以百度App个人主页为例,聊聊针对业务特点进行的一些性能优化实践. 适用于:传统意义的 ...
vue 一个页面有点请求需要同时发送_前端性能优化，这些你都需要知道
来源: 海洋里的魔鬼鱼前言最近花了一些时间在项目的性能优化上,背后做了很多工作,但是最后依然没有达到自己想要的结果,有些失望,但是还是记录下自己的执着. 性能优化总结:减少请求次数.减小资源大小. ...
android 重绘如何能不闪一下屏幕_前端性能优化之重绘和重排
性能优化中,减少重绘重排应该是一种很好的优化方式,我们具体看一下什么情况下会造成重绘重排,为什么减少重绘重排可以做到优化,怎么样减少重绘重排. 浏览器渲染过程我们先看看当浏览器拿到服务端返回的资源时 ...
事件触发控制_前端性能优化：事件的节流throttle与防抖debounce
scroll 事件是一个非常容易被反复触发的事件,另外,resize 事件.鼠标事件(比如 mousemove.mouseover 等).键盘事件(keyup.keydown 等)都存在被频繁触发的风 ...
webpack打包优化_前端性能优化：webpack性能调优与Gzip原理
链接:https://juejin.im/book/5b936540f265da0a9624b04b 从输入 URL 到显示页面这个过程中,涉及到网络层面的,有三个主要过程: DNS 解析 TCP 连 ...

java接口防抖_前端性能优化：高频执行事件/方法的防抖

java接口防抖_前端性能优化：高频执行事件/方法的防抖相关推荐

最新文章

热门文章