预连接与预加载的配合时序

它们虽然目标类🎯似，但作用阶段和⭐方式有明显区别，下面分别介绍

预加载的关键属性是 as ，必须正确指定资源类型（如 style、font、image、script、fetch 等）

不过对于当前页面的加载速度优化来说，preconnect 和 preload 的优先级更高

理解浏览器的连接与加载机制

如果所有域名都加预连接，🌅反而可能导致连接池被挤占，影响☀️其他资源的加载

使用 <link rel="preload"🌺; ⭐href="style

实施时的注意事项

什么是预连接（Preconnect） 预连接的作用是提前与第三方域名建立连接

一般只对页面中最重要的、最靠前的第三方域名使用💯，建议控🌅制在3个以内

css&q🎵uot; as="style"> 可以强制浏览器以高优先👍级提前下载该资源，而不必等待解析到引用它的位置

实施时的注意事项

当页面需要从外部域名（如CDN、字体库、统计服🎯务器或广告平台）加载资源时，浏览器通常要先完成DNS查询、TCP握手，如果是HTTPS还需要TLS协商

紧接着预连接之后，使用 <link rel="prelo🔥ad"> 提前请求浏览器首屏渲染所必需的CSS、字体或图片

理解浏览器的连接与加载机制

页面的其余脚本、图片等资源按常规顺序加载，此时预连接和预加载的资源已经就位，浏览器可以更快完成首次渲染