如何利用浏览器资源提示关键词优化网页性能

本文由 ChatMoney团队出品

在现代Web开发中,页面加载速度对用户体验至关重要。浏览器提供了一些资源提示关键词(Resource Hints),帮助开发者优化页面加载速度。这些关键词包括 deferasyncpreloadprefetchdns-prefetchprerenderpreconnect。合理利用这些关键词,可以显著提高页面加载性能,优化用户体验。

1. defer 和 async

现代浏览器引入了 deferasync 属性,用于优化 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 的协议是否为 httphttps
  • 如果当前页面的 hosthref 中的 host 不同,则不会带上 cookie;如果希望带上 cookie,可以加上 crossorigin 属性。

最后

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

关于我们

本文由ChatMoney团队出品,ChatMoney专注于AI应用落地与变现,我们提供全套、持续更新的AI源码系统与可执行的变现方案,致力于帮助更多人利用AI来变现,欢迎进入ChatMoney获取更多AI变现方案!

ChatMoney的头像ChatMoney
上一篇 2024年 7月 10日 上午11:20
下一篇 2024年 7月 12日 上午11:03

相关推荐

  • PHP的命名空间

    本文由 ChatMoney团队出品 PHP 命名空间:模块化和避免命名冲突 在 PHP 项目中,命名空间用于对代码进行模块化和避免命名冲突,尤其在大型项目或使用第三方库时尤为重要。本文将介绍如何使用 PHP 命名空间来组织你的代码。 什么是命名空间 命名空间是通过 namespace 关键字定义的。它们提供了一种方法来封装一组相关的类、接口、函数和常量,从而…

    2024年 7月 31日
    185
  • TypeScript中never类型的妙用

       本文由 ChatMoney团队出品 妙用一   当我们在一个项目中,可能会去改动一个在整个项目中应用很广泛的函数的参数类型,但是可能由于代码量比较庞大,我们不好排查改了之后哪些地方会出现问题,此时我们可以使用never类型来辅助我们的函数,当我们在原有的类型基础上添加了新的类型时,可能会导致else分支中的代码逻辑出现问题,此时我们…

    2024年 6月 12日
    228
  • PHP 7+ PHP-FPM 参数配置注意事项

    本文由 ChatMoney团队出品 在安装 PHP 7+ 并使用 PHP-FPM 作为进程管理器时,确保 PHP-FPM 的参数配置正确至关重要。不当的配置可能导致 PHP-FPM 无法启动,进而使得 Nginx 无法解析 PHP 文件并返回 404 错误。 相关命令(适用于 CentOS 7+) 启动 PHP-FPM: 查看 PHP-FPM 是否启动: P…

    2024年 7月 26日
    184
  • ThinkPHP6事件系统使用指南

    本文由 ChatMoney团队出品 在ThinkPHP 6中,事件系统提供了一种优雅的方式来实现解耦和动态响应。你可以通过注册事件和对应的监听者来处理各种应用逻辑。 事件注册 闭包注册 闭包是最简单的事件监听者,可以直接在注册时定义。 静态方法与普通方法注册 默认方法 首先定义一个事件类,并包含默认的处理方法。 然后在index.php中注册事件。 自定义方…

    2024年 7月 16日
    166
  • TypeScript中,如何利用数组生成一个联合类型

    本文由 ChatMoney团队出品 在开发中我们常常会遇到这样一个问题,代码如下: 我们想要传入一个参数到str,而且这个参数必须是arr数组中的某一个元素,这时我们希望的是可以直接得到这个arr的联合类型,接下来一般我们会使用传统的方法去声明类型,如下: 先不说这样的写法很笨,写的时候就已经很ex了,我们希望的是Strs可以根据上面arr的值来自动生成一个…

    2024年 7月 2日
    175

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信