前端首屏加载优化实战清单（可直接落地 / 自查）
优化这事儿，咱们得讲究个顺序：先搞定那些成本低、收益高的基础项，再啃硬骨头。下面这份清单按资源层、网络层、渲染层、计算层、缓存层、服务端协同六大维度划分，每个维度都包含了实操建议、检查标准和注意事项，适配项目开发或重构的全流程，可以直接作为团队协作的落地标准。
一、资源层优化：减体积、按需加载
这一步的核心是'瘦身'。低成本高收益，优先处理。
首先把打包工具的配置调优一下。Webpack 或 Vite 的 JS/CSS 压缩必须开，Tree-shaking 也要启用，这样能剔除大量未引用代码。第三方库尽量按需引入，比如 Ant Design 或 Element UI 只拉取首屏需要的组件，Lodash 改用 lodash-es 按需导入。
代码分割也很关键。基于路由做动态 import（React.lazy + Suspense 或 Vue defineAsyncComponent），确保首屏只打包核心业务逻辑；利用 splitChunks 抽离公共依赖，避免重复打包。静态资源方面，首屏图片全部换成 WebP 或 AVIF 格式，低版本浏览器做降级处理；字体只打包首屏所需的字符子集。
懒加载要落到实处。非首屏的图片和视频用 Intersection Observer 实现，加上 loading 占位图；ECharts、地图等非核心第三方库，等用户触发或进入模块时再初始化。最后清理冗余，删除首屏无用的 DOM 和静态资源，禁止内联大体积 JS/CSS，除非是首屏核心样式或基础渲染逻辑。
落地检查：
- 打包后首屏 JS 包体积≤200KB（未压缩），CSS 包体积≤50KB
- 无全量引入的第三方库，首屏仅加载核心依赖
- 首屏图片均为 WebP/AVIF 格式，且做了响应式适配（srcset/sizes）
- 非首屏资源均已做懒加载，无首屏加载非核心资源的情况
- 代码打包后无未引用的冗余代码（可通过 webpack-bundle-analyzer 检查）
备注：用
webpack-bundle-analyzer或vite-bundle-visualizer分析包体积，定位大体积依赖并优化。图片体积＞200KB 时，做渐进式加载（先模糊缩略图，再加载原图）。
二、网络层优化：提速度、减请求
网络优化需要前端主导，但离不开服务端配合。
减少请求数是首要任务。合并首屏的小 CSS/JS 文件，小图标用雪碧图或 Iconfont 替代独立图片；接口层面，将多个列表接口整合为一个批量接口，减少握手次数。静态资源务必部署到 CDN，分离静态资源和接口域名，让浏览器就近获取。
协议升级不能少。配合服务端开启 HTTP/2 或 HTTP/3，替代 HTTP/1.1，解决队头阻塞问题。预加载和预连接要精准使用，首屏关键资源（核心 JS/CSS、主图）用 <link rel="preload"> 预加载；跨域 CDN 或接口域名用 <link rel="preconnect"> 预建立连接。还可以用 <link rel="priority"> 标记首屏核心资源，让浏览器优先加载。
落地检查：
- 首屏 HTTP 请求数≤20 个（含接口/静态资源）
- 所有静态资源均已部署 CDN，且做了跨域配置
- 服务端已开启 HTTP/2/HTTP/3，且开启了 Keep-Alive
- 首屏关键资源已做预加载/预连接，无加载顺序错乱的情况
- 无首屏无效请求/重复请求，接口均做了数据聚合
备注：预加载仅用于首屏核心资源，避免过度使用导致资源竞争。CDN 资源开启跨域时，配置
Access-Control-Allow-Origin，避免跨域请求阻塞。
三、渲染层优化：避阻塞、快渲染
贴合浏览器的重绘/重排机制，让页面动起来更丝滑。
DOM 操作要批量进行。用 DocumentFragment 或脱离文档流后操作，避免频繁增删改 DOM；首屏 DOM 结构尽量扁平化，嵌套层级控制在 5 层以内。减少重排重绘，优先修改 opacity 或 transform（仅触发重绘 + GPU 加速），避免频繁修改宽高/位置/尺寸；首屏动画/过渡均基于 GPU 加速实现。
规避渲染阻塞是关键。CSS 放在 <head>，非核心 JS 放在 前或加 ；首屏 CSS 拆分为核心样式（内联）+ 非核心样式（异步加载）。实现首屏骨架屏（纯 CSS 或简单 DOM），数据未加载时先渲染骨架屏，保证纯静态首屏可独立渲染。
