在现代Web开发中,优化性能和提升用户体验是开发者们追求的两个重要目标。随着前后端分离架构的普及,前端和后端都面临着如何处理频繁触发事件的问题,例如窗口调整大小、滚动、输入框内容变化等。为了解决这些问题,防抖(Debouncing)作为一种常见的优化策略被广泛应用。本文将深入探讨全栈防抖的概念、原理以及在实际项目中的应用。
在进行深入研究之前,先来了解下基本概念。
何为防抖
防抖(Debouncing)是一种编程模式,它是用来确保一个函数不会在短时间被连续执行,而是在连续输入的最后一次才执行。这样可以减少重复操作。试想一下,我们创建一个搜索框,如果敲一个字母就发送一次请求,且同时有几百万人使用,那它的服务器岂不是在一瞬间就会崩溃。全栈防抖就是在前端和后端都应用防抖技术,来减少资源不必要的消耗。
前后端分离
在web开发中,通常会使用前后端分离这种架构进行开发,这是将前端(用户界面)和后端(业务逻辑和服务端API)分开开发和部署,通过定义好的API接口连接在一起。这样可以减少相互依赖,避免混合在一起,有利于后期的更新与维护。
- 前端:在前端开发中,使用
live-server
服务,来监听文件变化并自动刷新浏览器,在默认情况下监听5500端口。 - 后端:在后端则使用
json-server
,是一个RESTful API模拟器,它读取本地文件并提供CRUD(创建、读取、更新、删除)操作,默认在3000端口上。
在这里,我们来创建一个搜索框来详细分析下。
项目
初始化项目
在正式写代码之前,先要分别创建前段项目(live-server)和后端项目(json-server)并初始化后端项目。
npm init -y//将当前文件初始化为后端项目
npm i json-server//从`npm`中导出并安装`json-server`与当前文件中。
npm i //安装`json-server`中所有依赖项。
这样就创建了一个后端项目并导入json-server
。在文件夹中会出现一个package.json
文件。如下图所示:
后端部分
后端部分比较简单,只需要创建一个json
文件用来存储数据即可。
前端部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<label for="unDebounceInput">用户搜索</label>
<input
type="text"
id="unDebounceInput"
placeholder="请输入要搜索的用户名字"
>
</div>
<ul id="users">
</ul>
<script>
const oUL = document.querySelector('#users');
// 通往后端接口
const oInput = document.getElementById('unDebounceInput');
// 当作为事件的处理函数来用时,this 指向事件的目标元素
const debounceNameSearch = debounce(handleNameSearch, 500);
oInput.addEventListener('keyup', debounceNameSearch)
function handleNameSearch() {
let value = oInput.value.trim();
if (value === '') {
oUL.innerHTML = '';
return;
}
fetch('http://localhost:3001/users')
.then(res => res.json())
.then(users => {
// console.log(users);
// 箭头函数的优雅 + filter 的新功能
const filterUsers = users.filter(
user => user.name.includes(value)
)
// Array 在es6 中新增的方法
oUL.innerHTML = filterUsers.map(user => `
<li>
${user.name}
</li>
`
).join("")
// for(let user of filterUsers) {
// const oLI = document.createElement('li');
// oLI.innerText = user.name;
// oUL.appendChild(oLI);
// }
})
}
</script>
</body>
</html>
以上代码就创建了一个搜索功能,但该代码有一个致命的问题——没有防抖。这也就意味着我们每敲写一个字母,就会向服务器发送一次请求。这种情况会严重影响代码性能和用户体验,消耗CPU内存甚至导致服务器崩溃。当这种情况发生时,那么恭喜你,准备跑路吧。
而处理这种情况也很简单,只需要在后面添加防抖即可。而防抖实际就是定时器的循环使用,将一个即将要执行的函数交给debounce()高阶函数去优化,来减少执行次数,本次输入时会删除定时器,在输入完成后又添加一个定时器,如此往复,直到最后一次输入完成后才发送一次请求。
function debounce(fn, delay) {
return function() {
clearTimeout(id);
fn.id = setTimeout(() =>{
fn()
},delay)
}
}
以上代码就是完成了防抖的添加,可以减少请求次数、减轻服务器的负载,还可以提升用户体验。
总结
防抖技术在面试八股文中位列第一,是进入大厂前必须掌握的重要技术。前后端分离和全栈防抖的技术相结合,全栈开发者便可以提高开发效率,开发出易于后期维护和扩展,并提高用户体验的web程序。深入了解并掌握这些技术,便于应对今后开发web的挑战。