黑马程序员技术交流社区
标题: 【广州前端】前端性能优化之防抖&节流 [打印本页]
作者: AMay 时间: 2019-8-27 15:06
标题: 【广州前端】前端性能优化之防抖&节流
【前言】
这个是一个面试题，面试官的原话是这样问的——“就是输入框输入内容是自动识别的，然后你怎么样子让他不那么耗资源。因为有一些用户是不停的在那里输入，那么就不断的去向后台发送请求，请求回响应的数据。那么你怎么防止呢？”
其实这是一个典型可以通过防抖技术去解决的业务。下面解释一下什么叫做防抖，还有节流
【防抖&节流】
在前端开发中一部分的用户行为会频繁的出发事件执行，对DOM操作、资源加载等耗费性能的处理，很可能导致界面卡顿，甚至浏览器的崩溃。函数防抖(debounce)和函数节流(throttle)就是为了解决类似的需求应运而生的。
【为什么要防抖】
在频繁触发事件的场景，有些情况可能执行的逻辑比较复杂或者耗时，此时浏览器的处理跟不上触发，就会发生卡顿、假死或者事件堆积，这里防抖就可以一定程度上解决或者缓解这种故障。
常见的需要防抖的场景： 搜索框keyup、keydown等触发后台请求，上面的面试题就是这个场景了； 频繁改变窗口大小resize；鼠标移动mousemove事件；类似以上频繁触发并且处理逻辑较为耗时或者触发时需要请求后台接口
【如何防抖】
执行结果： 不断的输入东西，只有在输入停止后一段时间才会触发一次事件；
[HTML] 纯文本查看 复制代码
<html>
<head>
<meta charset="UTF-8">
<style>
div {
width: 500px;
height: 300px;
background: orange;
}
</style>
</head>
<body>
<input type="text" id="inp">
</body>
<script>
const inp = document.getElementById('inp');
const debounce = (fn, wait) => {
let timer;
// 把input事件的事件处理程序返回出去,
return function () {
// 再inpu内不断的输入内容的时候时候，不断的把定时器清除了，不会去执行fn
clearTimeout(timer);
// console.log(this) input标签
timer = setTimeout(() => {
fn.apply(this, arguments);
}, wait);
}
};
const inpFn = debounce(function (e) {
// 执行防抖后的逻辑
console.log(this.value)
}, 1000)
inp.addEventListener('input', inpFn);
</script>
</html>
【节流】
函数节流就是预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行。好像水滴攒到一定重量才会落下。
应用场景：窗口调整(resize)、页面滚动(scroll)、抢购疯狂点击(mousedowm)
代码如下：
[JavaScript] 纯文本查看 复制代码
function throttle(handler, wait) {
// 设定一个执行周期
var lastTime = 0;
return function () {
var nowTime = new Date().getTime();
// 求取时间差，当事件差大于一定的值，调用函数，并重置执行周期
if (nowTime - lastTime > wait) {
handler.apply(this, arguments);
lastTime = nowTime;
}
}
}
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |