为何部分网站在声明CSS前立即进行preload预加载？

这种先通过rel="preload"预加载CSS，再用rel="stylesheet"加载的做法，核心是优化资源加载时序，减少渲染阻塞延迟，具体可以拆解为这几点：

• 提前发起资源请求：浏览器解析HTML时，只有读到rel="stylesheet"标签才会启动CSS加载。而preload能在页面解析初期就发起请求，相当于把请求启动时间提前，压缩整体加载耗时。
• 缩短渲染阻塞时长：普通stylesheet加载会阻塞页面渲染，直到CSS下载、解析完成。用preload提前把CSS缓存到浏览器后，后续遇到stylesheet标签时直接读取缓存，能大幅减少阻塞渲染的时间，让页面更快呈现。
• 适配框架复杂加载逻辑：像示例里的Next.js这类框架，内部可能存在资源加载的依赖或异步处理，preload能确保关键CSS资源优先被获取，不会因框架逻辑延迟请求，保障首屏渲染资源及时到位。

要注意的是，preload仅负责提前下载资源，不会解析CSS并应用到页面，所以必须配合后续的stylesheet标签完成CSS的解析生效——浏览器会识别两次请求的是同一资源，不会重复下载，只会复用缓存文件。

示例代码（来自vercel.com）：

<link rel="preload" href="/_next/static/media/c9a5bc6a7c948fb0-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/>
<link rel="preload" href="/_next/static/css/834c693f73f8a310.css?dpl=dpl_7X1gBUozydx7F9WQkRbor8tutgFy" as="style"/>
<link rel="stylesheet" href="/_next/static/css/834c693f73f8a310.css?dpl=dpl_7X1gBUozydx7F9WQkRbor8tutgFy" data-n-g=""/>

内容的提问来源于stack exchange，提问作者Mohamed Ramrami