前端首屏加载优化实战清单（可直接落地 / 自查）
优化这事儿，咱们得讲究个顺序：先搞定那些成本低、收益高的基础项，再啃硬骨头。下面这份清单按资源层、网络层、渲染层、计算层、缓存层、服务端协同六大维度划分，每个维度都包含了实操建议、检查标准和注意事项，适配项目开发或重构的全流程，可以直接作为团队协作的落地标准。
一、资源层优化：减体积、按需加载
这一步的核心是'瘦身'。低成本高收益，优先处理。
首先把打包工具的配置调优一下。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 放在 </body> 前或加 defer/async；首屏 CSS 拆分为核心样式（内联）+ 非核心样式（异步加载）。实现首屏骨架屏（纯 CSS 或简单 DOM），数据未加载时先渲染骨架屏，保证纯静态首屏可独立渲染。
落地检查：
- 首屏 DOM 无频繁重排重绘，动画均使用 transform/opacity 实现
- CSS 在头部、非核心 JS 在尾部，且加了 defer/async，无 JS 阻塞 DOM 解析的情况
- 实现了首屏骨架屏，无首屏白屏的情况
- 首屏 DOM 嵌套层级≤5 层，无无用 DOM 节点
- 首屏渲染不依赖异步数据，静态内容可独立加载渲染
备注：用 Chrome DevTools 的 Performance 面板，检测首屏渲染的重排重绘次数，单次重排重绘耗时≤50ms。骨架屏体积需控制在最小，仅保留首屏核心布局，避免骨架屏本身加载耗时。
四、计算层优化：离主线程、减耗时
解决页面卡顿和渲染延迟，核心是把重活交给后台。
Web Worker 是主力。将首屏的大数据计算（过滤/排序/格式化）、复杂算法、数据解析放到 Web Worker 中执行，仅传递处理后的最终结果到主线程。精简首屏 JS 执行，仅保留核心渲染逻辑，非核心逻辑（埋点/统计/工具方法）在 DOMContentLoaded 后执行；优化首屏耗时算法（如 O(n²)→O(n)）。
第三方库延迟初始化。首屏不初始化 ECharts、地图、富文本等非核心第三方库，仅在用户触发或进入对应模块时初始化。避免主线程阻塞，首屏不执行循环嵌套、深度递归等耗时操作，所有耗时操作均做异步/分批次处理。
落地检查：
- 大数据计算/复杂算法均已放到 Web Worker，主线程无长时间阻塞（阻塞≤50ms）
- 首屏 JS 执行逻辑精简，无
DOMContentLoaded前执行的非核心逻辑 - 非核心第三方库均已延迟初始化，首屏未加载/初始化无关库
- 首屏无耗时算法/循环嵌套，所有操作均做了性能优化
备注：Web Worker 与主线程的通信仅传递轻量结果，避免传递大数据导致的通信开销。用 Chrome DevTools 的 Performance 面板，检测首屏主线程的执行耗时，无长任务（长任务定义：执行耗时≥50ms）。
五、缓存层优化：复资源、少请求
重点优化二次访问首屏速度，让用户感觉秒开。
HTTP 缓存配置要到位。静态资源设置强缓存（Cache-Control: max-age=31536000）+ 哈希后缀（如 app.123abc.js），接口设置协商缓存（ETag/Last-Modified）。Service Worker（SW）缓存基于 Workbox 封装，预缓存首屏核心资源（HTML/核心 JS/CSS/首屏图片），非核心资源做运行时缓存；配置缓存更新策略（缓存优先/网络优先）。
本地存储辅助缓存。首屏静态数据（字典/城市列表/配置）缓存到 localStorage，大数据缓存到 IndexedDB；二次访问时先读本地缓存，再做接口兜底。缓存失效处理通过哈希后缀自动突破强缓存，接口缓存通过时间戳/版本号做失效控制，避免缓存脏数据。
落地检查：
- 所有静态资源均已加哈希后缀，且配置了强缓存
- 首屏核心资源已做 SW 预缓存，二次访问可离线加载
- 首屏静态数据已缓存到本地存储，二次访问无需重复请求
- 配置了合理的缓存失效策略，无缓存脏数据的情况
- 接口均已配置协商缓存，未更新的资源返回 304
备注：SW 仅缓存首屏核心资源，避免缓存过多资源导致本地存储占用过高。localStorage 仅存储轻量静态数据，容量控制在 5MB 以内，避免滥用。
六、服务端协同优化：极致压缩首屏时间
前端提需求，服务端配合，这是提升上限的关键。
开启压缩是基础。要求服务端开启 Gzip/Brotli 压缩（优先 Brotli，压缩率更高），对 JS/CSS/HTML/接口数据做压缩传输。接口优化方面，要求服务端对首屏接口做数据聚合（多接口合并）、数据裁剪（仅返回首屏所需字段），减少接口响应数据量和耗时。
服务端渲染/静态生成。对首屏要求极高的页面（首页/官网），配合服务端做 SSR（Next.js/Nuxt.js）/SSG，服务端直接渲染首屏完整 DOM。纯静态首屏页面，通过预渲染工具生成静态 HTML，替代客户端渲染。
落地检查：
- 服务端已开启 Gzip/Brotli 压缩，压缩率≥70%
- 首屏接口已做数据聚合/裁剪，无冗余字段，接口响应耗时≤300ms
- 高优先级页面已实现 SSR/SSG/预渲染，首屏可直接渲染完整 DOM
- 服务端接口做了限流/缓存，无接口响应缓慢的情况
备注：SSR/SSG 仅用于首屏要求极高的页面，普通业务页无需使用，避免增加服务端成本。接口数据裁剪需和服务端约定字段，避免后续迭代遗漏所需数据。
七、优化后验证与监控
优化完别急着上线，验效果、控迭代，避免后续性能回退。
本地验证用 Chrome DevTools（Network/Performance）检测首屏加载时间、卡顿率、请求数、包体积；用 Lighthouse 做一站式性能检测，得分≥80 分。线上验证在生产环境模拟不同网络（3G/4G/WiFi）、不同设备（手机/电脑），检测首屏加载时间和体验。线上监控接入前端性能监控平台（Fundebug/Sentry/阿里云前端监控），监控核心指标：首屏加载时间（FCP）、最大内容绘制（LCP）、首次输入延迟（FID）、累积布局偏移（CLS）。
迭代管控将性能指标纳入代码评审，禁止合并会导致性能回退的代码；每次发版前做性能检测，确保指标达标。
落地检查：
- Lighthouse 性能得分≥80 分，核心指标（LCP/FID/CLS）符合行业标准
- 生产环境不同网络/设备下，首屏加载时间符合预期（如 WiFi≤1.5s、4G≤3s）
- 已接入线上性能监控平台，实时监控核心性能指标
- 已将性能指标纳入代码评审，建立性能管控机制
备注：核心性能指标行业标准：LCP≤2.5s、FID≤100ms、CLS≤0.1。模拟网络测试时，重点检测 3G 网络下的首屏体验（最能暴露性能问题）。
前端首屏加载优化落地清单（表格版）
| 优化维度 | 实操步骤 | 落地检查项 | 完成状态 | 备注 / 工具参考 |
|---|---|---|---|---|
| 资源层 | 1. 开启打包工具压缩 + Tree-shaking，第三方库按需引入 2. 路由/组件动态 import 做代码分割，抽离公共依赖 3. 首屏图片替换为 WebP/AVIF，字体打包首屏子集 4. 非首屏资源用 Intersection Observer 做懒加载 5. 清理首屏冗余 DOM/代码/资源，仅内联核心样式/JS | 1. 首屏未压缩 JS≤200KB、CSS≤50KB 2. 无全量引入第三方库，首屏仅加载核心依赖 3. 首屏图片为 WebP/AVIF 且做响应式适配 4. 非首屏资源均懒加载，无首屏加载非核心资源 5. 打包后无未引用冗余代码 | ▢ | 包体积分析：webpack-bundle-analyzer/vite-bundle-visualizer；大图片做渐进式加载 |
| 网络层 | 1. 合并首屏小 CSS/JS/接口，小图标用雪碧图/Iconfont 2. 所有静态资源部署 CDN，分离静态/接口域名 3. 配合服务端开启 HTTP/2/HTTP/3+Keep-Alive 4. 首屏核心资源做 preload，跨域域名做 preconnect 5. 用 priority 标记首屏核心资源加载优先级 | 1. 首屏 HTTP 请求数≤20 个（含接口/静态资源） 2. 静态资源均部署 CDN 且配置跨域 3. 服务端已开启 HTTP/2/HTTP/3+Keep-Alive 4. 首屏关键资源已做预加载/预连接 5. 无首屏无效/重复请求，接口已聚合 | ▢ | 预加载仅用于核心资源，避免资源竞争；CDN 配置 Access-Control-Allow-Origin |
| 渲染层 | 1. 用 DocumentFragment 批量操作 DOM，首屏 DOM 嵌套≤5 层 2. 优先修改 opacity/transform，首屏动画基于 GPU 加速 3. CSS 放头部，非核心 JS 放尾部 + defer/async，核心 CSS 内联 4. 实现首屏纯 CSS 骨架屏，静态首屏独立渲染 5. 移除首屏无用 DOM，减少 DOM 查询/修改 | 1. 首屏无频繁重排重绘，动画均用 transform/opacity 2. 无 JS 阻塞 DOM 解析，核心 CSS 已内联 3. 实现首屏骨架屏，无首屏白屏 4. 首屏 DOM 嵌套≤5 层，无无用节点 5. 首屏渲染不依赖异步数据/第三方库 | ▢ | Performance 面板检测重排重绘，单次耗时≤50ms；骨架屏控制最小体积 |
| 计算层 | 1. 大数据计算/复杂算法放到 Web Worker，仅传递处理后结果 2. 首屏仅保留核心渲染 JS，非核心逻辑 DOMContentLoaded 后执行 3. 优化首屏耗时算法（O(n²)→O(n)），避免嵌套/递归 4. 非核心第三方库（ECharts）触发时再初始化 | 1. 耗时计算均在 Web Worker 执行，主线程阻塞≤50ms 2. 首屏无 DOMContentLoaded 前执行的非核心逻辑 3. 首屏无耗时算法/嵌套递归，操作均异步/分批次 4. 首屏未初始化非核心第三方库 | ▢ | Web Worker 仅传递轻量结果，避免大数据通信开销；Performance 面板检测无长任务 |
| 缓存层 | 1. 静态资源加哈希后缀 + Cache-Control 强缓存，接口配 ETag/Last-Modified 2. 基于 Workbox 做 SW，预缓存首屏核心资源 3. 首屏静态数据存 localStorage，大数据存 IndexedDB 4. 静态资源哈希破缓存，接口用时间戳/版本号控失效 | 1. 所有静态资源加哈希 + 强缓存，接口配协商缓存 2. 首屏核心资源已 SW 预缓存，二次访问可离线 3. 首屏静态数据已本地缓存，二次访问无需重请求 4. 配置合理缓存失效策略，无缓存脏数据 | ▢ | SW 仅缓存核心资源，localStorage 占用≤5MB；避免滥用本地存储 |
| 服务端协同 | 1. 要求服务端开启 Gzip/Brotli 压缩（优先 Brotli） 2. 首屏接口做数据聚合 + 裁剪，仅返回首屏所需字段 3. 高优先级页面（首页/官网）配合做 SSR/SSG/预渲染 4. 要求服务端对接口做限流/缓存，降低响应耗时 | 1. 服务端已开启 Gzip/Brotli，压缩率≥70% 2. 首屏接口无冗余字段，响应耗时≤300ms 3. 高优先级页面已实现 SSR/SSG/预渲染 4. 服务端接口已做限流/缓存，无响应缓慢情况 | ▢ | SSR/SSG 仅用于高优先级页面，避免服务端成本；和服务端约定接口返回字段 |
| 验证与监控 | 1. Chrome DevTools 检测首屏加载/卡顿/请求/包体积，Lighthouse 检测≥80 分 2. 生产环境模拟 3G/4G/WiFi + 手机/电脑验证体验 3. 接入 Fundebug/Sentry 监控 FCP/LCP/FID/CLS 4. 性能指标纳入代码评审，发版前做性能检测 | 1. Lighthouse 性能得分≥80 分，核心指标达行业标准 2. 各网络/设备下首屏加载时间符合预期 3. 已接入线上性能监控，实时监控核心指标 4. 建立性能管控机制，禁止性能回退代码合并 | ▢ | 行业标准：LCP≤2.5s、FID≤100ms、CLS≤0.1；重点测试 3G 网络首屏体验 |
