defer和async

现代浏览器引入了defer和async

async 表示加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。也就是说下载 JS 文件的树的构建，但是执行该 JS 代码会阻塞 DOM 树的构建。

<script async src="script.js"></script>

defer 表示加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。也就是说，下载 JS 文件的时候不会阻塞 DOM 树的构建，然后等待 DOM 树构建完毕后再执行此 JS 文件。

<script defer src="mys

image-20211208112125053

preload预加载声明

它通过声明向浏览器声明一个需要提前加载的资源，当资源真正被使用的时候立即执行，就无需等待网络的消耗。

例如

<link rel="stylesheet" href="style2.css">
<script src="main2.js"></script>
​
<link rel="preload" href="style1.css" as="style">
<link rel="preload" href="main1.js" as="script">


在上面的代码中，会先加载 style1.css 和 main1.js 文件（但不会生效），在随后的页面渲染中，一旦需要使用它们，它们就会立即可用。

可以使用 as 来指定将要预加载的内容类型。

preload 指令的一些优点如下：

  • 允许浏览器设置资源优先级，从而允许 Web 开发人员优化某些资源的交付。

  • 使浏览器能够确定资源类型，因此它可以判断将来是否可以重用相同的资源。

  • 浏览器可以通过引用 as 属性中定义的内容来确定请求是否符合内容安全策略。

  • 浏览器可以根据资源类型发送合适的 Accept 头（例如：image/webp ）


prefetch空闲加载

利用浏览器的空闲时间加载页面将来可能用到的资源的一种机制，通常可以用于加载非首页的其他页面所需要的资源，以便加快后续页面的首屏速度。

prefetch 加载的资源可以获取非当前页面所需要的资源，并且将其放入缓存至少 5 分钟（无论资源是否可以缓存）。并且，当页面跳转时，未完成的 prefetch 请求不会被中断；

它的用法跟 preload 是一样的：

<link rel="prefetch" href="/path/to/style.css" as="style">

DNS prefetching

DNS prefetching 允许浏览器在用户浏览时在后台对页面执行 DNS 查找。这最大限度地减少了延迟，因为一旦用户单击链接就已经进行了 DNS 查找。

通过将 rel="dns-prefetch" 标记添加到链接属性，可以将 DNS prefetching 添加到特定 URL。建议在诸如 Web 字体、CDN 之类的东西上使用它。

<!-- Prefetch DNS for external assets -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//www.google-analytics.com">
<link rel="dns-prefetch" href="//cdn.domain.com">

prerender

prerender 与 prefetch 非常相似，prerender 同样也是会收集用户接下来可能会用到的资源。

不同之处在于 prerender 实际上是在后台渲染整个页面。

<link rel="prerender" href="https://www.keycdn.com">

preconnect预先连接

preconnect 指令允许浏览器在 HTTP 请求实际发送到服务器之前设置早期连接。

浏览器要建立一个连接，一般需要经过 DNS 查找，TCP 三次握手和 TLS 协商（如果是 https 的话），这些过程都是需要相当的耗时的。所以 preconnet，就是一项使浏览器能够预先建立一个连接，等真正需要加载资源的时候就能够直接请求了。

image-20211208112216614

以下是为 CDN URL 启用 preconnect 的示例。

<link href="https://cdn.domain.com" rel="preconnect" crossorigin>

在上面的代码中，浏览器会进行以下步骤：

  • 解释 href 的属性值，判断是否是合法的 URL。如果是合法的 URL，然后继续判断 URL 的协议是否是 http 或者 https，如果不是合法的 URL，则结束处理。

  • 如果当前页面 host 不同于 href 属性中的 host，那么将不会带上 cookie，如果希望带上 cookie 等信息，可以加上 crossorign 属性。