工程化与性能 · 主观题 · 第 62 题
前端与全栈开发面试 · 第 62 题
如果一个页面首屏加载很慢,你会从哪些方面排查和优化?
参考答案
1. 先度量:用 Lighthouse、WebPageTest、Chrome Performance 面板以及线上真实用户数据(web-vitals 上报)定位瓶颈,看 TTFB、FCP、LCP、长任务。
2. 网络与资源:开启 HTTP/2 或 HTTP/3、CDN、Brotli/gzip 压缩;对关键资源使用 preconnect、preload;图片使用 WebP/AVIF、按尺寸响应式加载、非首屏懒加载,给 LCP 图片设置 fetchpriority=high。
3. JS 体积:路由级代码分割、Tree Shaking、去掉体积大的依赖(用 bundle 分析工具查看)、按需引入组件库;非关键脚本使用 defer 或延后加载。
4. 渲染:关键 CSS 内联;字体使用 font-display: swap 并做子集化;避免布局抖动;拆分长任务,减少主线程阻塞。
5. 架构:SSR 或 SSG 输出首屏 HTML、流式渲染;接口合并与数据预取;骨架屏改善感知速度。
6. 缓存:哈希资源长期强缓存;Service Worker 缓存;接口数据缓存。
7. 持续:设置性能预算,在 CI 中加入 Lighthouse 检查,防止性能回退。
解析
按「度量 → 网络 → JS → 渲染 → 架构 → 缓存」的顺序作答更有条理。