Zui近我搞了个小项目，是个资源导航站，叫啥来着？bbab.net，对，就是它。说实话，一开始这玩意儿Neng用就行，但后来发现，用户一多，页面卡得跟拖拉机一样，害，这体验Neng好吗？

所以我就开始琢磨，怎么让它从“Neng用”变成“好用”。你懂的，Zuo前端的dou知道，Vue3 + Node.js 这俩兄弟，一个负责“脸”，一个负责“腿”，配合好了Neng跑得飞起。但配合不好，那可就凉了。

我这人吧，就喜欢折腾，尤其喜欢把一个东西从“Neng用”往“好用”整。所以这次咱就是说我主要动了两个地方：前端渲染性Neng和后端 I/O 模型。这两个地方，不搞清楚，用户一多，数据一多，页面就卡，数据库就崩，你信不信？

先说说前端渲染这块儿。导航站嘛，说白了就是个列表页，用户只Nengkan到屏幕里那几个工具，对吧？那我干嘛要把整个列表dou渲染出来？不对不对，应该用虚拟滚动，只渲染用户kan得到的那几个，对吧？

所以我写了个轻量级的 Hook，搞了个虚拟滚动逻辑，你懂的，就是只渲染视口内的 DOM。这下好了DOM 节点从几百个瞬间降到了 10 几个，滚动起来丝般顺滑，你懂的，这体验直接起飞。

代码大概是这样：

这下好了用户一多，页面不卡了数据库也不崩了。说实话，这优化效果，接口响应时间从 20ms-100ms 降到 1ms-2ms，用户基本无感知，体验直接拉满。

那会儿我一kan，页面卡顿，数据库 CPU 飙高，我就知道，这事儿不对劲。所以我搞了个虚拟滚动，只渲染用户kan得到的那几个工具，这下好了页面不卡了数据也不崩了。你懂的，这体验直接起飞。

再说说后端这块儿。导航站的特殊性在于：读多写少、列表长、对响应速度极其敏感。所以我搞了个队列，把“写入操作”和“业务响应”解耦了。API 接口改造一下改成批量写入，这下好了几百个并发请求也扛得住。

代码大概是这样：

这下好了MongoDB 的 CPU 不再频繁飙升，几百个并发请求也扛得住。说实话，这体验直接起飞。

对于分类列表查询，我们要确保查询是索引覆盖。Schema 索引设计，查询时只 select 需要的字段，这下好了接口响应时间直接拉满。

代码大概是这样：

这下好了接口响应时间从 20ms-100ms 降到 1ms-2ms，用户体验直接拉满。

项目一开始跑得hen顺畅，但随着收录的工具突破 1000+，前端渲染开始卡顿，后端 MongoDB 的 CPU 也在频繁飙升。所以我搞了个虚拟滚动，只渲染用户kan得到的那几个工具，这下好了页面不卡了数据也不崩了。你懂的，这体验直接起飞。

之前的 Vite 配置是把所有 SVG 导入为一个组件库，这导致首屏 JS 包多了 50KB。现在改成了动态组件，这下好了首屏加载时间直接起飞。

代码大概是这样：

这下好了首屏加载时间和数据库 CPU 占用上dou有数量级的优化。你懂的，这体验直接起飞。

这次重构，我把重点放在了前端渲染性Neng和后端 I/O 模型上。下面聊聊我踩过的坑和解决方案。你懂的，这事儿不简单，但搞明白了体验直接起飞。

Zuo个人项目Zui容易陷入“堆功Neng”的误区，其实把一个简单的列表页性Neng压榨到极致，反而geng有成就感。你懂的，这体验直接起飞。

Ru果你也在折腾 Vue3 或者 Node.js 的性Neng优化，欢迎在评论区交流！