在 HTML 页面中，我们通常会使用 script 标签来将 JavaScript 代码引入到页面中。在 script 标签中，有两个非常常见的属性：async 和 defer。这两个属性都表示脚本的加载方式，但它们之间有着不同的区别。在本篇文章中，我们将深入探讨这两个属性的区别以及如何选择正确的加载方式。
- async 属性 async 属性是 HTML5 中新增的属性。它告诉浏览器，不必等到脚本加载完成后再执行页面中的其他任务，而是继续渲染页面，同时异步加载脚本并执行它。当脚本加载完成后，浏览器会中断渲染页面，执行该脚本，并等待该脚本执行完毕后重新开始渲染页面。如果有多个脚本有 async 属性，它们的加载和执行顺序是不确定的，因为每个脚本的加载和执行时间都是异步的。
使用 async 属性的优点是可以提高页面的加载速度，因为浏览器不必等待脚本的下载和执行。另外，async 属性适用于独立于页面其他部分的脚本，例如分析和跟踪工具。
下面是一个例子，演示如何使用 async 属性：
<!DOCTYPE html> <html> <head> <title>async 属性实例</title> </head> <body> <h1>async 属性实例</h1> <script async src="example.js"></script> <p>这是一个段落。</p> </body> </html>在上面的代码中，我们使用 async 属性加载 example.js 文件。由于该脚本包含了独立于页面其他部分的功能，因此使用 async 属性是合适的。
- defer 属性 defer 属性也是 HTML5 中新增的属性。它告诉浏览器，不必等到脚本加载完成后再执行页面中的其他任务，同时也会在 HTML 文档解析完成后才开始加载脚本。当脚本下载完成后，它会被按照原来的顺序执行。如果多个脚本有 defer 属性，它们的加载顺序是按照在页面中的出现顺序执行的。
使用 defer 属性的优点是可以提高页面的响应速度，因为脚本的下载和解析不会阻塞页面的渲染。另外，defer 属性适用于需要在文档结构完全解析后才能工作的脚本，例如修改 DOM 或事件绑定。
下面是一个例子，演示如何使用 defer 属性：
<!DOCTYPE html> <html> <head> <title>defer 属性实例</title> </head> <body> <h1>defer 属性实例</h1> <script defer src="example.js"></script> <p>这是一个段落。</p> </body> </html>在上面的代码中，我们使用 defer 属性加载 example.js 文件。由于该脚本需要在 HTML 文档结构完全解析后才能工作，因此使用 defer 属性是合适的。
- async 和 defer 的选择 在选择 async 和 defer 属性时，要考虑页面加载和交互的优先级。如果脚本需要在页面加载后立即执行或具有高优先级，则使用 async 属性。另一方面，如果脚本需要在文档解析完成后才能工作或对页面交互没有直接影响，则使用 defer 属性。
总之，async 和 defer 属性都可以帮助我们优化页面性能，但它们之间有着不同的行为和用途。我们应该根据页面的具体情况来选择正确的属性。