前端阅读 05月30日 19:58
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、图片可设置长强缓存。没有版本号的资源不要随手缓存一年。写段代码<link rel="preconnect" href="https://cdn.example.com" crossorigin><link rel="preload" href="/assets/app.abcd.js" as="script">