Laravel+Vue.js SPA会议列表页API数据加载过慢问题求助

Laravel 后端API方面 #

• N+1查询问题：如果会议关联了参会人、会场等其他模型，没使用with()预加载关联数据，会触发大量额外SQL查询。用Laravel Debugbar查看SQL日志，统计查询次数就能确认。
• 未做分页处理：一次性返回全量会议数据（比如成百上千条），数据传输和解析耗时都会剧增。检查API是否用了paginate()或simplePaginate()做分页。
• 数据库查询未优化：
  • 常用筛选字段（如会议状态、创建时间）没加索引，导致全表扫描。用EXPLAIN分析查询语句，看是否用到索引。
  • 用select *返回所有字段，包括大文本、二进制数据（比如会议附件内容），应该只返回前端需要的字段，比如select(['id', 'title', 'start_time', 'status'])。
• 冗余逻辑/中间件：API路由挂载了多余中间件，或者控制器里有重复校验、不必要的计算逻辑，精简这些代码能减少响应时间。
• 服务器资源不足：服务器CPU、内存不够，或数据库服务器性能差，导致查询执行缓慢。查看服务器监控数据确认资源使用率。

Vue.js 前端方面 #

• 未做虚拟滚动：数据量大时一次性渲染所有DOM节点，会导致浏览器卡顿。用虚拟滚动组件（比如vue-virtual-scroller）只渲染可视区域的DOM，大幅减少渲染耗时。
• 前端数据处理过重：拿到数据后做了大量同步计算（比如复杂过滤、循环格式化），阻塞主线程。可以把计算逻辑移到web worker，或者优化算法减少计算量。
• 重复请求/请求时机不当：组件初始化时重复发起请求，或请求时机过早导致阻塞。检查created/mounted钩子的请求逻辑，加防抖处理。
• 资源加载阻塞：页面同时加载大图片、第三方脚本，导致API请求排队。用浏览器Network面板查看请求顺序，优化资源加载优先级。

内容的提问来源于stack exchange，提问作者Дмитрий Прудник