了解几个 HTML 标签属性，实现优化页面加载性能

引言

当浏览器解析 HTML 文档时，如果遇到一个普通的脚本标签（不带 async 或 defer 属性），浏览器会立即下载并执行该脚本，同时阻塞 HTML 解析过程。这意味着，如果脚本文件较大或者网络连接较慢，页面加载速度会受到影响。

为了解决这个问题，HTML5 引入了 async 和 defer 属性来控制脚本的加载和执行顺序。

1. async

当浏览器遇到带有 async 属性的脚本标签时，它会立即开始下载该脚本，并继续解析 HTML 文档。
下载完成后，浏览器会立即执行该脚本。这意味着脚本的执行可能发生在整个文档解析过程中的任何时刻。
多个带有 async 属性的脚本标签之间的执行顺序是不确定的。因此，如果一个脚本依赖于另一个脚本加载完成后才能执行，就不能使用 async 属性。
<script async src="script1.js"></script> <script async src="script2.js"></script>

2. defer

当浏览器遇到带有 defer 属性的脚本标签时，它会立即开始下载该脚本，并继续解析 HTML 文档。
与 async 不同的是，在整个文档解析完成后（包括其他资源的下载和处理），浏览器会按照脚本在文档中出现的顺序依次执行这些脚本。
多个带有 defer 属性的脚本标签之间的执行顺序是确定的，即按照它们在文档中出现的顺序依次执行。
defer 属性适用于那些需要等待整个文档解析完成后再执行的脚本，或者依赖于 DOM 元素的脚本。
<script defer src="script1.js"></script> <script defer src="script2.js"></script>

需要注意的是，async 和 defer 属性只对外部脚本（通过 src 属性指定 URL）有效，对内联脚本（直接在 HTML 文档中嵌入）无效。此外，async 和 defer 属性只适用于外部脚本文件，不适用于 CSS 文件或其他资源。

综上所述，async 和 defer 属性可以提高页面加载性能，并且可以控制脚本加载和执行顺序。如果一个脚本不依赖于其他资源或 DOM 元素，并且可以独立运行，则可以使用 async 属性。如果一个脚本需要等待整个文档解析完成后才能执行，或者依赖于其他资源或 DOM 元素，则应使用 defer 属性。

3. preload

preload 属性用于指示浏览器在页面加载过程中提前加载指定的资源（如脚本、样式表、字体等）。它可以在 head 标签中的 link 元素或者 script 元素上使用。

对于脚本资源，可以使用 preload 属性来指示浏览器提前下载并缓存脚本文件，以便在稍后执行时能够更快地加载和执行。
<link rel="preload" href="script.js" as="script" />
对于样式表资源，可以使用 preload 属性来指示浏览器提前下载并缓存样式表文件，以便在稍后应用到文档时能够更快地渲染页面。
<link rel="preload" href="styles.css" as="style" />
对于字体资源，可以使用 preload 属性来指示浏览器提前下载并缓存字体文件，以便在稍后应用到文档时能够更快地显示文本内容。
<link rel="preload" href="font.woff2" as="font" />

4. prefetch

prefetch 属性用于指示浏览器在空闲时间预先获取未来可能需要的资源。它可以在 head 标签中的 link 元素上使用。

prefetch 属性适用于那些可能会被用户访问到的资源，但不是当前页面所必需的资源。例如，下一页的 HTML 文件、图片、视频等。
<link rel="prefetch" href="next-page.html" />
prefetch 属性可以帮助浏览器在空闲时间提前下载这些资源，以便在用户访问到它们时能够更快地加载和显示。需要注意的是，preload 和 prefetch 属性并不会立即执行加载操作，而是在浏览器空闲时自动触发。此外，不同浏览器对 preload 和 prefetch 的支持程度可能有所差异。

5. prerender

prerender 属性用于指示浏览器在后台预渲染指定的页面，以便在用户访问到该页面时能够立即呈现出来。它可以在 head 标签中的 link 元素上使用。

复制代码

<link rel="prerender" href="next-page.html" />

当浏览器遇到带有 prerender 属性的 link 标签时，它会在后台自动加载并渲染指定的页面，而不会显示在当前页面中。
当用户访问到该页面时，浏览器可以立即呈现出来，从而提供更快的用户体验。
prerender 属性适用于那些用户可能会访问到但不是当前页面所必需的内容，例如下一页、相关文章等。需要注意的是，prerender 属性可能会增加网络和服务器负载，并且只有在用户设备和网络条件允许时才会生效。因此，在使用 prerender 属性时需要谨慎考虑其适用性和效果。

6. preconnect

preconnect 属性用于指示浏览器在空闲时间预先建立与指定域名的连接。它可以在 head 标签中的 link 元素上使用。

复制代码

<link rel="preconnect" href=" https://example.com " />

当浏览器遇到带有 preconnect 属性的 link 标签时，它会在空闲时间预先建立与指定域名的连接，以便在后续请求资源时能够更快地建立连接并获取数据。
preconnect 属性适用于那些可能会被页面中的资源（如脚本、样式表、图片等）所使用的域名。
通过预先建立连接，可以减少请求延迟并提高资源加载速度，从而改善页面加载性能。需要注意的是，preconnect 属性并不会立即执行连接操作，而是在浏览器空闲时自动触发。此外，不同浏览器对 preconnect 的支持程度可能有所差异。

总结

async 属性：用于异步加载脚本文件，适用于独立运行的脚本，可以提高页面加载性能。
defer 属性：用于延迟执行脚本文件，适用于依赖其他资源或 DOM 元素的脚本，可以保证按顺序执行。
preload 属性：用于预加载必需的资源，如脚本、样式表、字体等，以加快后续加载和渲染过程。
prefetch 属性：用于预先获取未来可能需要的资源，如下一页的 HTML 文件、图片、视频等，以提高用户访问时的加载速度。
prerender 属性：用于后台预渲染指定页面，在用户访问时能够立即呈现出来，提供更快的用户体验。
preconnect 属性：用于预先建立与指定域名的连接，在后续请求资源时能够更快地建立连接并获取数据。

这些属性都是通过在 HTML 标签上设置相应的属性来实现优化页面加载性能。根据具体需求和场景选择合适的属性可以帮助提升页面加载速度、减少延迟，并提供更好的用户体验。