如何利用浏览器资源提示关键词优化网页性能
本文由 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变现方案!