一、先明确性能指标优化前先确定度量口径常用指标FP / FCP首次绘制 / 首次内容绘制—— 白屏优化的核心指标LCP最大内容绘制—— 首屏优化的核心指标TTI可交互时间、FID / INP交互响应CLS布局偏移二、白屏优化方案白屏的本质HTML 加载后JS 尚未执行完成、页面没有内容可渲染。1. 减少白屏持续时间SSR / 预渲染服务端渲染Nuxt / Next / 自研 Node 中间层首屏内容由服务端直出对于内容固定的页面用prerender-spa-plugin/vite-plugin-prerender预渲染成静态 HTMLHTML 骨架 / Loading 动画在 HTML 模板中内置骨架屏Skeleton或 LoadingJS 执行前用户就能看到占位内容感知白屏时间大幅降低可用page-skeleton-webpack-plugin或手写骨架组件inline critical CSS将首屏关键 CSS 内联到 HTML 中避免 CSS 阻塞渲染2. 加快 JS 执行路由懒加载 组件懒加载(component: () import(...))避免首屏加载全量 JS代码分割Code Splitting按路由 / 按业务域拆 chunkDLL / 缓存长期不变的库比如这个仓库里的.temp/dll-development就是这种思路HTTP 缓存 长效强缓存文件名带 hashCache-Control: max-age31536000, immutableHTML 不缓存JS/CSS 长缓存Tree Shaking移除无用代码避免引入组件库全量包按需引入3. 网络层优化HTTP/2 或 HTTP/3多路复用消除队头阻塞CDN 加速静态资源就近分发域名收敛/分域减少 DNS 查询同时利用分域突破并发限制资源压缩Gzip / Brotli图片 WebP / AVIFpreload / prefetch / dns-prefetchlink relpreload asscript提前加载首屏关键 JSlink reldns-prefetch/preconnect提前建连三、首屏优化方案首屏优化的目标不只是出现内容而是最大内容尽快出现且可交互。1. 资源维度首屏资源最小化首屏只加载必须的 JS/CSS非首屏用prefetch/ 动态 import图片优化懒加载loadinglazy、IntersectionObserver使用 WebP/AVIF、响应式图片srcsetLCP 图片用fetchpriorityhighpreload优先加载字体优化font-display: swap字体子集化避免 FOIT2. 数据维度接口聚合首屏多个接口合并为一个 BFF 聚合接口减少串行请求并行请求串行改并行Promise.all数据预取SSR 时服务端直接取数据直出CSR 可在 HTML 里 inline 首屏数据window.__INITIAL_STATE__接口缓存localStorage / 内存缓存上次数据先渲染旧数据再静默更新分页 / 虚拟滚动长列表用虚拟列表如vue-virtual-scroller首屏只渲染可视区域3. 渲染维度v-if 延迟渲染非首屏组件、弹窗组件懒挂载异步组件 骨架屏defineAsyncComponent配合 loading 组件避免同步阻塞大数据计算放 Web Worker避免长任务Task 50ms减少重排重绘批量 DOM 操作、transform替代top/left4. 缓存与分发PWA / Service Worker静态资源离线缓存二次访问秒开客户端缓存 HTML移动端 Hybrid 容器可以做离线包 / 直出快照动静分离静态资源上 CDN动态请求走机房就近接入四、Web 端PC专项浏览器兼容下做Polyfill 按需加载babel/preset-envuseBuiltIns: usage现代浏览器不加载 legacy chunkmodule/nomodule弱网降级接口超时兜底、错误重试监控体系接入性能监控如公司内 Raptor / 自建上报采集 FCP/LCP/白屏率用 RUM 数据驱动优化构建产物分析webpack-bundle-analyzer/rollup-plugin-visualizer找大包剔除重复依赖五、移动端专项移动端特点弱网、低端机、内存受限优化侧重不同。网络层弱网优化请求合并、降低首屏请求优先级、HTTP/2 复用、QUIC/HTTP3 抗弱网离线包Hybrid / 小程序场景静态资源提前下发本地缓存图片按网络环境加载弱网加载低清图 / 降级 WebP渲染层低端机降级检测设备性能关闭复杂动画、减少模糊/阴影效果GPU 加速合理使用transform/will-change但避免层爆炸长列表虚拟滚动移动端尤其重要避免大量 DOM 节点减少 JS 执行时长低端机 CPU 弱避免启动时大量同步 JS可把非核心逻辑延迟到requestIdleCallback执行容器层H5 秒开方案客户端预加载 / 预初始化 WebView、URL 预热原生骨架屏直出Native 端先渲染骨架H5 ready 后替换RN / 小程序分包加载、按需注入启动只加载核心 bundle六、优化落地路径建议先度量接入性能监控量化白屏率、FCP、LCP 基线找瓶颈用 Lighthouse / Chrome DevTools Performance 面板定位是网络慢、JS 大还是渲染阻塞分优先级做高 ROI路由懒加载、骨架屏、CDN强缓存、图片懒加载中 ROISSR/预渲染、接口聚合、BFF 直出低 ROI / 高成本Service Worker、离线包、Web Worker 重构持续监控防劣化性能指标纳入 CI 卡口和线上监控告警