浏览器资源提示关键词

在现代Web开发中，页面加载速度对用户体验至关重要。浏览器提供了一些资源提示关键词（Resource Hints），帮助开发者优化页面加载速度。这些关键词包括 defer、async、preload、prefetch、dns-prefetch、prerender 和 preconnect。合理利用这些关键词，可以显著提高页面加载性能，优化用户体验。

1. defer 和 async

现代浏览器引入了 defer 和 async 属性，用于优化 JavaScript 的加载和执行。

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

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

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

    <script defer src="myscript.js"></script>

2. preload

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">

优点：

  • 允许浏览器设置资源优先级，优化资源交付。
  • 使浏览器能够确定资源类型，判断是否可以重用相同资源。
  • 浏览器可以根据资源类型发送合适的 Accept 头。

3. prefetch

prefetch 利用浏览器的空闲时间加载页面将来可能用到的资源，通常用于加载非首页的其他页面资源，以加快后续页面的加载速度。

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

prefetch 加载的资源可以缓存至少5分钟，即使资源本身不缓存，未完成的 prefetch 请求也不会在页面跳转时中断。

4. DNS prefetching

dns-prefetch 允许浏览器在后台执行 DNS 查找，减少延迟。当用户点击链接时，DNS 查找已经完成。

<!-- 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">

5. prerender

prerender 类似于 prefetch，但它实际上在后台渲染整个页面。这样，当用户导航到该页面时，页面已经渲染完毕，可以立即显示。

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

6. preconnect

preconnect 允许浏览器在 HTTP 请求实际发送到服务器之前设置早期连接，减少 DNS 查找、TCP 握手和 TLS 协商的时间。

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

浏览器会进行以下步骤：

  • 解析 href 属性值，判断是否为合法 URL。如果是，则继续判断 URL 的协议是否为 http 或 https。
  • 如果当前页面的 host 与 href 中的 host 不同，则不会带上 cookie；如果希望带上 cookie，可以加上 crossorigin 属性。

结语

通过合理利用 defer、async、preload、prefetch、dns-prefetch、prerender 和 preconnect 这些资源提示关键词，开发者可以显著提升网页的加载速度和用户体验。这些关键词使得浏览器能够更智能地管理资源加载顺序和优先级，从而最大限度地减少渲染阻塞和网络延迟。优化资源加载不仅能提升页面性能，还能为用户带来更加流畅和高效的浏览体验。

文章目录