Node.js 后端接口响应慢，前端 Vue 页面加载卡顿怎么办？

国凤提问于 2026-03-04 08:19:22 阅读 3

前端

我用 Node.js 写了个接口，返回用户列表数据，但每次请求都要 2-3 秒，导致 Vue 页面白屏很久。已经试过加缓存，但效果不明显，是不是哪里写得不对？

前端是用 Vue 3 + Axios 请求的，代码大概长这样：

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const users = ref([])

onMounted(async () => {
  const res = await axios.get('/api/users')
  users.value = res.data
})
</script>

<template>
  <div v-for="user in users" :key="user.id">{{ user.name }}</div>
</template>

后端没做复杂查询，就是读个 JSON 文件再返回，按理说不该这么慢啊……

打包优化

我来解答赞 5 收藏

反馈

1 条解答

博主美荣 Lv1

兄弟，2-3秒读个JSON文件，这肯定是用同步IO把线程堵死了。Node.js是单线程的，你要是用fs.readFileSync这种同步方法读文件，一旦文件稍微大点或者磁盘IO抖动，整个进程就卡在那儿了，跟WordPress里写了个死循环查询数据库差不多。

既然你试过缓存效果不明显，估计是缓存逻辑写错了，或者根本没缓存到点子上。最简单的办法，就是别在请求的时候去读文件，程序启动的时候把文件读一次，丢到内存变量里，后面请求直接从内存拿，这速度基本是毫秒级的。

后端代码大概改成这样：

const fs = require('fs');

let usersCache = [];



// 程序启动时只读一次文件

fs.readFile('users.json', 'utf8', (err, data) => {

  if (err) {

    console.error('读文件炸了', err);

  } else {

    usersCache = JSON.parse(data);

  }

});



app.get('/api/users', (req, res) => {

  // 直接返回内存里的数据，别再去读硬盘了

  res.json(usersCache);

});

要是文件会变动，不想重启服务，可以用fs.watch监听文件变化重新加载，或者设个定时器刷一下缓存。

另外前端这块，2-3秒的白屏用户肯定要骂娘。加个骨架屏或者Loading状态吧，哪怕后端慢点，用户体验也能救回来。Vue代码稍微改一下：

const users = ref([])

const loading = ref(true)



onMounted(async () => {

  try {

    const res = await axios.get('/api/users')

    users.value = res.data

  } finally {

    loading.value = false

  }

})

模板里加个判断，loading的时候显示个转圈圈，数据来了再渲染列表。别让用户盯着白屏发呆。

这问题跟WordPress里那种“为什么我的首页这么慢”一样，多半是IO或者查询没处理好。把文件读取换成内存缓存，问题基本就解决了。

2026-03-04 11:43