前端首屏加载优化实战清单(可直接落地 / 自查)
优化这事儿,咱们得讲究个顺序:先搞定那些成本低、收益高的基础项,再啃硬骨头。下面这份清单按资源层、网络层、渲染层、计算层、缓存层、服务端协同六大维度划分,每个维度都包含了实操建议、检查标准和注意事项,适配项目开发或重构的全流程,可以直接作为团队协作的落地标准。
一、资源层优化:减体积、按需加载
这一步的核心是'瘦身'。低成本高收益,优先处理。
首先把打包工具的配置调优一下。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),数据未加载时先渲染骨架屏,保证纯静态首屏可独立渲染。

