性能优化之节流

最新推荐文章于 2024-12-26 10:18:53 发布

原创最新推荐文章于 2024-12-26 10:18:53 发布 · 236 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

前端同时被 3 个专栏收录

20 篇文章

订阅专栏

JavaScript

19 篇文章

订阅专栏

前端性能优化

2 篇文章

订阅专栏

本文探讨了前端性能优化中的节流技术，解释了为何在表单提交等场景下使用节流可以避免频繁请求，降低性能消耗。通过示例代码展示了如何实现一个节流函数，该函数利用闭包控制执行频率，确保在指定时间间隔内只执行一次目标函数。

在前端性能优化方面，我们除了以往的那些减少DOM操作，减少请求等等这些外，还有节流，防抖，重回重排等知识点可以优化；
为什么要用到节流呢？
比如一个表单提交，由于DNS解析、TCP链接等响应时间较长的时候，使用者在不知情的情况下在短时间内多次点击提交按钮，这样就会发起多个请求，这就对性能产生了极大的消耗。
使用节流去控制，利用闭包原理达到封装一个节流方法去控制的目标

// 定义一个节流函数
// 接收两个参数，一个是需要节流的函数，一个是等待时间，默认设置为100ms
function throttle(fn,waitTime=100){
	let lastTime = 0;
	//利用闭包，返回一个匿名函数
	return (arg)=>{
		const nowTime = new Date();
		if(nowTime - lastTime > waitTime){
			lastTime = nowTime;
			fn.apply(this,arg)
		}
	}
}