页面性能优化----节流(throttling)，防抖(debo
2019-07-15 本文已影响0人
路尔轩
节流(throttling)，防抖(debounce)都是优化高频率触发执行js代码的一种手段
在前端开发中有一部分的用户行为会频繁的触发事件执行，而对于DOM操作、资源加载等耗费性能的出来很可能导致页面卡顿甚至浏览器的崩溃。
1、节流----规定的时间内，多次触发事件，js方法只执行一次，稀释了执行次数。
初始页面，简单的点击增加的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>throttling 节流</title>
</head>
<body>
<div id="show">0</div>
<button id="btn">click</button>
<script type="text/javascript">
var oDiv = document.getElementById("show");
var oBtn = document.getElementById("btn");
oBtn.onclick = function(){
oDiv.innerHTML = parseInt(oDiv.innerHTML) + 1;
}
</script>
</body>
</html>
节流操作
<script type="text/javascript">
var oDiv = document.getElementById("show");
var oBtn = document.getElementById("btn");
function throttle(handler, wait){ // handler--要执行的操作，wait--执行的事件间隔
var lastTime = 0;
return function(e){
var nowTime = new Date().getTime();
if(nowTime - lastTime > wait){
handler.apply(this, arguments);
lastTime = nowTime;
}
}
}
function handleClick(e){
oDiv.innerHTML = parseInt(oDiv.innerHTML) + 1;
}
oBtn.onclick = throttle(handleClick, 1000);
</script>
2、防抖----上次触发事件和这次触发之间满足一定的空闲时间，js方法才执行一次。
原始页面，模拟搜索
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>debounce 防抖</title>
</head>
<body>
<input type="text" id="inp" />
<script type="text/javascript">
var oInp = document.getElementById('inp');
function ajax(){
// 这里是搜索操作
console.log(this.value);
}
oInp.oninput = ajax;
</script>
</body>
</html>
防抖操作
<script type="text/javascript">
var oInp = document.getElementById('inp');
var timer = null;
function ajax(){
// 这里是搜索操作
console.log(this.value);
}
oInp.oninput = function(){
var _self = this,_arg = arguments;
clearTimeout(timer);
timer = setTimeout(function(){
ajax.apply(_self, _arg);
},1000)
};
</script>
应用场景：
| 类型 | 场景 |
|---|---|
| 函数防抖 | 1. 手机号、邮箱输入检测 2. 搜索框搜索输入（只需最后一次输入完后，再放松Ajax请求） 3. 窗口大小resize（只需窗口调整完成后，计算窗口大小，防止重复渲染） 4.滚动事件scroll（只需执行触发的最后一次滚动事件的处理程序） 5. 文本输入的验证（连续输入文字后发送 AJAX 请求进行验证，（停止输入后）验证一次就好 |
| 函数节流 | 1. DOM元素的拖拽功能实现（mousemove） 2. 射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹） 3. 计算鼠标移动的距离（mousemove） 4. 搜索联想（keyup） 5. 滚动事件scroll，（只要页面滚动就会间隔一段时间判断一次） |
