1 性能优化方式

⚡ 30 秒速记

• 按用户感知的时间线分四段：加载（网络 + 体积）、渲染（首屏绘制）、交互（响应延迟）、运行时（长任务、内存）
• 加载：DNS 预解析、HTTP 缓存、HTTP/2、CDN、gzip / br、路由懒加载、图片按尺寸出 + WebP / AVIF
• 渲染：关键 CSS 内联、JS 加 defer、首屏图别懒加载还要加 fetchpriority="high"
• 交互与运行时：长任务拆分或丢进 Worker、动画只动 transform / opacity、长列表虚拟滚动
• 先量再改：本地用 Performance / Lighthouse，线上看 LCP / INP / CLS 的 P75

性能优化我会按用户等待的时间线来讲：资源怎么更快到、页面怎么更快画出来、交互怎么不卡。 加载阶段是减少请求和体积，比如 DNS 预解析、强缓存加协商缓存、HTTP/2 多路复用、代码分割和压缩；渲染阶段是让首屏关键资源先到，CSS 内联关键部分、脚本 defer，首屏大图要提高优先级而不是懒加载；交互阶段是别让主线程被长任务卡住。最重要的一条是先量再改，线上 LCP、INP、CLS 拿到 P75 数据，找到最差的那一项再动手，不然很容易优化了一堆用户根本感知不到的东西。

💬 面试官追问

• 首页 LCP 有 4s，你第一步看什么？

  先看 LCP 元素是谁、它卡在哪段：TTFB 慢是服务端或 CDN，资源发现晚是图片藏在 JS 里或被懒加载了，下载慢是图片太大，渲染晚是被阻塞的 CSS / JS 拖住。Lighthouse 和 Performance 面板的 LCP 分段都能直接看到。

• 首屏 banner 图加了 loading="lazy"，有什么问题？

  懒加载要等布局算完、判断进了视口才开始下载，首屏大图被白白推后，LCP 直接变差。首屏图去掉 lazy，加 fetchpriority="high"，必要时 <link rel="preload">。

• dns-prefetch 和 preconnect 怎么选？

  dns-prefetch 只做 DNS 解析，便宜，第三方域名多可以都加；preconnect 会把 TCP 和 TLS 握手也做了，开销大，只给首屏马上要用的一两个关键源，比如图片 CDN。

• 点击按钮后要等半秒才有反应，INP 很差，怎么优化？

  Performance 录一下看点击后的长任务是谁。能拆就拆，用 scheduler.yield() 或 setTimeout 把大任务切碎，先更新界面再做重活；纯计算挪到 Web Worker；React 里可以用 startTransition 把非紧急更新降级。

• 打包产物 2MB，从哪开始砍？

  先跑 webpack-bundle-analyzer 或 rollup-plugin-visualizer 看大头。常见收益最大的是路由懒加载、moment 换 dayjs、lodash 按需引入、图表和编辑器这类重组件动态 import()，再用 Coverage 面板看首屏实际用到多少。