浅显易懂防抖与节流、重绘与回流

防抖与节流

防抖和节流其实就是为了对浏览器进行性能的优化，处理不当会造成卡顿现象。

下面的代码可以动手实现以下，仔细体会就懂了

防抖（debounce）

当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始计时。
附：代码模拟

html

<div class="box">
	<h2>防抖--debounceh2>
	<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>节流--throttleh2>
	<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树构建完，渲染树也会随之对页面进行再次渲染，这个过程就叫回流。

总结：回流的代价要远大于重绘。且回流必然会造成重绘，但重绘不一定会造成回流

如有错误还请指出，希望这篇文章能给予你们帮助！