防抖与节流
防抖和节流其实就是为了对浏览器进行性能的优化,处理不当会造成卡顿现象。
下面的代码可以动手实现以下,仔细体会就懂了
防抖(debounce)
当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始计时。
附:代码模拟
html
<div class="box">
<h2>防抖--debounce</h2>
<div>
<input type="text" id="text1" />
<input type="text" id="text2" />
</div>
</div>
js
// 模拟防抖
function debounce(callback, delay) {
/*
callback 回调函数
delay 延迟时间。毫秒
*/
let obj; //存储事件绑定者
let timer = null; //定义定时器
let fn = function() {
callback.apply(obj, arguments); //修改this指向
}
return function() {
obj = this;
// 每输入一次都会进行重新计时
if (timer) {
clearTimeout(timer);
timer = null;
}
timer = setTimeout(fn, delay);
}
}
let oText1 = document.getElementById("text1");
let oText2 = document.getElementById("text2");
// 为第一个表单控件绑定oninput事件,处理函数是调用防抖函数得到返回值
oText1.addEventListener("input", debounce(function() {
oText2.value = oText1.value;
}, 1000));
结果
代码执行流程:
节流(throttle)
节流就是当持续触发事件时,保证一定时间段内只调用一次事件处理函数。(简单理解,就是在规定的时间内触发了事件就开始计时,到时间后执行一次事件处理函数,如果在这个时间内多次触发,也会按照这种规则按序执行处理函数)
附:代码模拟
html
<div class="box">
<h2>节流--throttle</h2>
<div>
<input type="text" id="text1" />
<input type="text" id="text2" />
</div>
</div>
js
// 模拟节流
function throttle(callback, delay) {
/*
callback 回调函数
delay 延迟时间。毫秒
*/
let obj;
let fn = function() {
callback.apply(obj, arguments) //修改this指向
}
//获取时间
let oTime = Date.now() //获取当前时间的时间戳
return function() {
obj = this;
let nowTime = Date.now()
// 间隔时间(触发事件每隔指定时间执行一次)
let intervalTime = nowTime - oTime - delay
if (intervalTime >= 0) {
oTime = nowTime;
setTimeout(fn, delay)
}
}
}
let oText1 = document.getElementById("text1");
let oText2 = document.getElementById("text2");
// 为第一个表单控件绑定oninput事件,处理函数是调用节流函数得到返回值
oText1.addEventListener("input", throttle(function() {
oText2.value = oText1.value;
}, 1000));
结果
防抖与节流的区别?
函数节流不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数,而函数防抖只是在最后一次事件后才触发一次函数。
多读几遍,好好体会,自然理解
重绘和回流
重绘
字面意思重新绘制,当css样式发生改变时,不会影响页面的布局,DOM树结构不会进行变化,但是样式发生了变化,渲染树就必须重新渲染页面,这就是重绘
回流
当页面的DOM树结构发生变化时,就需要重新构建DOM树,而DOM树与渲染树是紧密相连的,DOM树构建完,渲染树也会随之对页面进行再次渲染,这个过程就叫回流。
总结:回流的代价要远大于重绘。且回流必然会造成重绘,但重绘不一定会造成回流
如有错误还请指出,希望这篇文章能给予你们帮助!