如何使用节流和防抖提升网站性能

当需要优化 JavaScript 代码的性能时，防抖和节流是两种非常有用的技术。

对于节流来说，可以设置一个固定的时间间隔，只有在时间间隔内没有触发事件时才会执行回调函数；对于防抖来说，则可以延迟一段时间后再执行回调函数，如果在延迟时间内又有触发事件，则重新计时。

 

防抖（Debounce）

 

防抖是指在事件被触发 n 秒后才执行回调函数，如果在这段时间内再次触发该事件，则重新计时。这种技术通常用于限制重复操作或者按键搜索。

function debounce(func, delay) {
	let timerId;
	return function (...args) {
		if (timerId) clearTimeout(timerId);
		timerId = setTimeout(() => func.apply(this, args), delay);
	};
}

 

使用示例：

const onInputChange = debounce((value) => {
	console.log(value);
}, 500);

document.querySelector("#input").addEventListener("input", (event) => {
	onInputChange(event.target.value);
});

 

优点：

（1）防抖可以避免频繁地触发回调函数，在一定程度上提高代码效率。

（2）可以控制事件的触发频率，防止因用户操作过快导致的不必要的请求或计算。

 

缺点：

（1）因为防抖需要等待一段时间后才执行回调函数，所以可能会导致事件响应的延迟。

（2）如果用户的操作速度过快，可能会出现连续多次触发同一个回调函数的情况。

 

适用场景：

 （1）按钮点击防止重复提交：在用户提交表单或执行某个操作时，避免用户多次点击按钮造成的重复提交或错误操作。

（2）输入框搜索提示搜索内容：在用户输入关键字进行搜索时，等待一段时间后再触发搜索操作，避免因用户输入过快而导致的不必要的网络请求或计算。（如果需要在用户输入完毕后立即搜索，则需要使用防抖。）

（3）浏览器窗口大小调整事件：在浏览器窗口大小改变时，延迟一段时间再重新计算页面布局，避免因窗口大小变化频繁触发回调函数而导致性能下降。

（4）滚动加载数据：在用户滚动页面时，等待一段时间再加载新的数据，以提高页面性能和用户体验。

（5）鼠标移入/移出事件：在鼠标移入或移出某个区域时，延迟一段时间后再触发相应的回调函数，避免因鼠标频繁移动而导致的回调函数频繁触发。

 

 

节流（Throttle）

 

节流是指在一段时间内最多执行一次回调函数。它通常用于操作会导致资源占用或消耗较大的情况，比如页面滚动、鼠标移动等。

function throttle(func, delay) {
	let lastTime = 0;
	return function (...args) {
		const nowTime = Date.now();
		if (nowTime - lastTime >= delay) {
			func.apply(this, args);
			lastTime = nowTime;
		}
	};
}

 

使用示例：

const onScroll = throttle(() => {
	console.log("scroll");
}, 500);

window.addEventListener("scroll", onScroll);

 

优点：

（1）可以减少回调函数的执行次数，避免大量不必要的计算或渲染操作。

（2）在一定程度上可以控制事件的触发频率，避免因用户操作过于频繁而导致的浏览器卡顿或崩溃。

 

缺点：

（1）节流的实现方式可能会导致事件响应的延迟，特别是在设置延迟时间较长时。

（2）如果延迟时间设置过短，可能会导致回调函数被频繁调用，降低代码效率。

 

适用场景：

（1）动态加载数据，限制用户滚动事件触发的频率。

（2）上传文件，限制上传过程中进度条更新的频率。

（3）频繁的 DOM 操作：在用户频繁触发 DOM 操作时，限制操作的执行速率，避免因过快地操作而导致性能下降。

（4）监听滚动事件：在用户滚动页面时，只触发每隔一段时间的回调函数，避免因滚动事件频繁触发而导致性能下降。

（5）监听鼠标移动事件：在用户鼠标移动时，只触发每隔一段时间的回调函数，避免因鼠标移动事件频繁触发而导致性能下降。

 

 

防抖和节流注意事项

1、防抖和节流具体使用哪种方法需要根据实际情况来决定。如果需要限制操作速率，则需要使用节流；如果需要等待一定时间后再触发回调函数，则需要使用防抖。

2、尽管节流和防抖可以有效地提升性能和用户体验，但使用不当也会造成负面效果。在选择使用节流和防抖时，需要根据实际情况进行合理的选择，并对其进行合理的配置和调整。