HTML等待属性

HTML等待属性是指将一个网页的加载和执行分成多个步骤，等待某些特定的元素或事件加载完成后再进行下一步操作的属性。它们的作用在于优化网页的性能和用户体验。

常见的等待属性

async

<script async src="script.js"></script>

async属性用于异步加载JS脚本，使网页能够更快地加载和渲染。这个属性告诉浏览器在下载该脚本的同时继续解析页面。当脚本下载完成后，会中断页面的解析，立即执行该脚本。async属性仅适用于外部脚本文件，并且不保证脚本文件的执行顺序。

defer

<script defer src="script.js"></script>

defer属性也是用于异步加载JS脚本，但它会在DOM树解析完成后执行，而不是在下载完成后立即执行。与async不同，设置defer属性的脚本会按照其在文档中出现的顺序依次执行。如果有多个脚本文件都设置了defer属性，则它们的执行顺序是按照它们在文档中出现的顺序执行的。

preload

<link rel="preload" href="image.png" as="image">

preload属性用于预加载资源文件，例如图片、音频和视频文件等。这个属性告诉浏览器在页面加载期间提前下载指定的资源文件，以便之后快速渲染。preload属性不会阻塞页面的解析和渲染，并且可以设置as属性指定资源类型，以便浏览器进行优化。

prefetch

<link rel="prefetch" href="page.html">

prefetch属性也用于预加载资源，但它预加载的是将在未来的页面中使用的资源。例如，当用户访问一个网站的主页时，它可以使用prefetch属性预加载相关页面的文件，以便之后快速响应用户的请求。与preload不同，prefetch属性只是提前下载资源，不会立即使用它们。

总结

利用HTML等待属性，我们可以将网页的加载和渲染过程分成不同的阶段，以优化用户的使用体验。不同的等待属性具有不同的用途和特性，开发者可以根据实际情况选择最适合的属性。