如何优化首屏资源的加载链路并正确使用预加载

# 核心结论

首屏资源优化的重点是缩短关键资源从发现、建连、请求、下载、执行到呈现的完整依赖链，而不是盲目提高所有请求的优先级。应先通过网络瀑布图找出真正决定首屏的资源和串行关系，再减少依赖层级、提前暴露关键资源、提高少数关键请求的优先级，并延后非关键代码和第三方资源。preload、preconnect 与 prefetch 的语义不同，滥用会争抢带宽、连接和浏览器调度资源。

# 底层机制

浏览器解析 HTML 时会发现样式表、脚本、图片和字体，并由预加载扫描器提前发现一部分静态引用。外部样式通常会影响首次渲染；经典同步脚本可能阻塞文档解析。带 defer 的脚本可并行下载，在文档解析完成后按文档