Chrome 里如何定位并优化慢网络请求？

优化 Chrome 网络请求，先用 DevTools Network 找慢在哪里。一次请求会经历 DNS、TCP/TLS、排队、TTFB、下载等阶段；不同阶段慢，处理手段完全不同。TTFB 高通常是后端或网关慢，下载慢可能是资源太大，排队多可能是连接数、优先级或主线程阻塞。

追问

HTTP/2 以后还要合并 JS 和 CSS 吗？

不一定。HTTP/2 多路复用降低了小请求连接成本，过度合并反而会让缓存失效范围变大。

preload、prefetch、preconnect 怎么选？

preconnect 提前建立跨域连接；preload 抢首屏关键资源；prefetch 适合空闲加载下一页资源。

Network 面板看哪些指标？

先看瀑布图是否有长串阻塞，再看 Timing。TTFB、Content Download、Queueing 分别对应不同问题。

缓存策略怎么避免旧资源？

HTML 用短缓存或协商缓存；带 hash 的 JS、CSS、图片可设置长强缓存。没有版本号的资源不要随手缓存一年。

写段代码

html
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
<link rel="preload" href="/assets/app.abcd.js" as="script">