首屏请求并行度优化核心是打破串行依赖、提升并发能力、降低主线程压力：将“先菜单→再用户→后列表”串行逻辑改为promise.all并发拉取，强依赖仅保留必要一层，非关键数据用promise.race或allsettled超时控制，分离调用时机至created或nexttick，配合骨架屏、keep-alive缓存及服务端聚合接口。
首屏请求并行度优化，核心是减少关键路径上的等待时间，让接口不“排队”，资源不“卡顿”。重点不是单纯增加请求数量，而是打破串行依赖、提升并发能力、降低主线程压力。
拆解接口依赖链，改为并行发起
很多 Vue 项目首屏卡在“先取菜单 → 再取用户信息 → 最后取列表数据”这类串行逻辑里。这会把 3 个接口的总耗时累加，哪怕每个只要 300ms，串起来就是近 1 秒。
- 检查
mounted或setup中是否用await逐个调用 API，改成Promise.all并发拉取 - 若存在强依赖（例如列表必须等用户权限返回后才能决定字段），只保留必要的一层，其余无关接口提前发出
- 对非关键数据（如统计卡片、通知角标）可设为
Promise.race或带超时的Promise.allSettled，避免单个慢接口拖垮整体
分离接口调用时机，避免渲染阻塞
接口请求本身不重，但若全堆在 mounted 里，又配合同步渲染大量 DOM，就会触发长任务，造成 LCP 延迟和 FPS 下降。
- 把非首屏必需的数据（如侧边栏统计、右上角消息数）移到
created阶段或使用nextTick延后触发，错开主渲染周期 - 对表格类组件，先渲染骨架或空状态，再用
async/await拉取数据并更新，避免一次性挂载 100+ 行导致渲染卡顿 - 利用
keep-alive缓存已加载页面，返回时跳过重复请求，直接复用数据
服务端聚合接口，减少客户端并发压力
浏览器对同一域名的并发请求数有限制（通常 6~8 个），如果首屏要发 12 个接口，后 6 个就得排队。与其靠客户端硬扛，并行度不如交给服务端收口。
- 推动后端提供聚合接口，例如
/api/home/init一次性返回菜单、用户信息、待办数量、公告摘要等 - 前端统一调用聚合接口，再按需分发数据给各模块，既减少请求数，也降低 DNS 查询与 TCP 握手开销
- 若无法改后端，可在网关层做简单聚合，或用 Nginx 的
subrequest实现轻量级合并
静态资源与接口请求错峰调度
首屏资源（JS/CSS/图片）和接口请求共用网络带宽和连接池，尤其在弱网下容易互相抢占。
- 确保关键 JS/CSS 已通过
preload提前声明，避免因资源下载阻塞主线程，间接影响接口发起时机 - 将非关键接口（如埋点上报、用户行为日志）延迟到
setTimeout(..., 0)或requestIdleCallback中执行 - 对图片等大资源启用
loading="lazy"，防止其下载挤占接口带宽
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
