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

引言

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

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

1. async

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

2. defer

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

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

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

3. preload

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

对于脚本资源，可以使用 preload 属性来指示浏览器提前下载并缓存脚本文件，以便在稍后执行时能够更快地加载和执行。
对于样式表资源，可以使用 preload 属性来指示浏览器提前下载并缓存样式表文件，以便在稍后应用到文档时能够更快地渲染页面。
对于字体资源，可以使用 preload 属性来指示浏览器提前下载并缓存字体文件，以便在稍后应用到文档时能够更快地显示文本内容。

4. prefetch

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

prefetch 属性适用于那些可能会被用户访问到的资源，但不是当前页面所必需的资源。例如，下一页的 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 标签上设置相应的属性来实现优化页面加载性能。根据具体需求和场景选择合适的属性可以帮助提升页面加载速度、减少延迟，并提供更好的用户体验。