如何利用浏览器资源提示关键词优化网页性能
本文由 ChatMoney团队出品
在现代Web开发中，页面加载速度对用户体验至关重要。浏览器提供了一些资源提示关键词（Resource Hints），帮助开发者优化页面加载速度。这些关键词包括 defer、async、preload、prefetch、dns-prefetch、prerender 和 preconnect。合理利用这些关键词，可以显著提高页面加载性能，优化用户体验。
- 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>
- 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 头。
- prefetch
prefetch 利用浏览器的空闲时间加载页面将来可能用到的资源，通常用于加载非首页的其他页面资源，以加快后续页面的加载速度。
<link rel="prefetch" href="/path/to/style.css" as="style">
prefetch 加载的资源可以缓存至少5分钟，即使资源本身不缓存，未完成的 prefetch 请求也不会在页面跳转时中断。 - 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">
- prerender
prerender 类似于 prefetch，但它实际上在后台渲染整个页面。这样，当用户导航到该页面时，页面已经渲染完毕，可以立即显示。
<link rel="prerender" href="https://www.keycdn.com"> - 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 这些资源提示关键词，开发者可以显著提升网页的加载速度和用户体验。这些关键词使得浏览器能够更智能地管理资源加载顺序和优先级，从而最大限度地减少渲染阻塞和网络延迟。优化资源加载不仅能提升页面性能，还能为用户带来更加流畅和高效的浏览体验。
关于我们
本文由ChatMoney团队出品，ChatMoney专注于AI应用落地与变现，我们提供全套、持续更新的AI源码系统与可执行的变现方案，致力于帮助更多人利用AI来变现，欢迎进入ChatMoney获取更多AI变现方案！
