什么是预加载（Preload）

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

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

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

更多精选文章

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

com"> 标签，可以告诉浏览器：“这个域名我待会儿要用，请提前准备好连接

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

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

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

吴雅柏

浏览器在解析HTML文档时，会😎按照默认顺序进行DNS解析、建立TCP连接、下载资源并渲染页面

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

每个预连接都会占用浏览器连接数，每增加一个预加载都会占用网络带宽

实施时的注意事项

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

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