标签及async、defer属性注意事项

首先看下html中的<script>标签

在 HTML 中，<script> 标签用于引入和执行 JavaScript 代码。它是一种用于在 HTML 文档中嵌入或引用 JavaScript 代码的标签。

<script> 标签具有以下作用：

1. 引入外部 JavaScript 文件：使用 src 属性指定外部 JavaScript 文件的路径，并通过 <script> 标签将其引入到 HTML 页面中。示例：

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

这样，浏览器将下载并执行 script.js 文件中的 JavaScript 代码。

1. 内嵌 JavaScript 代码：直接在 <script> 标签中编写 JavaScript 代码。示例：

<script>
function sayHello() {
console.log('Hello, World!');
}
</script>
           

当浏览器解析到该 <script> 标签时，其中的 JavaScript 代码将被立即执行。

1. 行内事件处理程序：通过在 HTML 元素上的事件属性中使用 <script> 标签，指定 JavaScript 代码作为事件处理程序。示例：

<button onclick="alert('Button clicked!')">Click me</button>
           

当按钮被点击时，所指定的 JavaScript 代码将被执行。

1. 提供配置和数据：可以在 <script> 标签中定义全局变量、对象或函数，供其他 JavaScript 代码使用。示例：

<script>
var apiUrl = 'https://example.com/api';
</script>
           

<script>标签中的async、defer属性

在 HTML 的 <script> 标签中，async 和 defer 是用于控制脚本加载和执行的属性。

1. async 属性

当 <script> 标签具有 async 属性时，脚本文件将异步加载并执行，不会阻塞页面的渲染。浏览器遇到带有 async 属性的 <script> 标签时，会立即开始下载脚本文件，并在下载完成后立即执行脚本，同时继续解析 HTML 文档。多个带有 async 属性的脚本文件的执行顺序是不确定的，它们可能以不同的顺序完成下载和执行。

作用：

• 异步加载脚本，不会阻塞其他资源的加载和页面渲染。
• 适用于独立的、互不依赖的脚本文件，或者对脚本执行顺序没有严格要求的情况。

示例：

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

1. defer 属性：

当 <script> 标签具有 defer 属性时，脚本文件将异步加载但延迟执行，直到 HTML 文档完全解析完成后再执行脚本。

与 async 属性不同，带有 defer 属性的脚本保留了它们在 HTML 文档中出现的顺序执行，并在 DOMContentLoaded 事件触发前执行。

作用：

• 异步加载脚本，不会阻塞其他资源的加载和页面渲染。
• 保留脚本的执行顺序，适用于需要按照特定顺序执行的脚本文件，或者要在 DOMContentLoaded 事件之前执行的脚本。

示例：

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

使用 async 和 defer 属性可以优化脚本的加载和执行方式，提高页面渲染性能和用户体验。

使用async 和 defer 需要注意

在使用 async 和 defer 属性时，需要注意以下几点：

1. 顺序依赖：

async 属性会导致脚本文件在下载完成后立即执行，并且多个带有 async 属性的脚本文件的执行顺序是不确定的。

而 defer 属性会保留脚本文件的执行顺序，按照它们在 HTML 文档中出现的顺序依次执行。因此，如果脚本之间有依赖关系或需要按特定顺序执行，应选择使用 defer 属性。

1. DOMContentLoaded 事件：

带有 defer 属性的脚本会在 DOMContentLoaded 事件触发前执行。因此，在脚本中操作和访问 HTML 元素时，要确保对应的 HTML 元素已经被解析和加载。如果脚本需要在 DOMContentLoaded 事件之前执行，请使用 defer 属性。

1. 脚本加载失败处理：

使用 async 或 defer 属性加载的脚本文件，如果下载失败，不会触发脚本加载错误事件（onerror 事件），而是会静默失败。为了避免这种情况，可以在 <script> 标签中添加 onerror 属性来指定加载失败时的处理方法。

1. 内联脚本：

async 和 defer 属性不能应用于内联（inline）脚本，即在 HTML 文件中直接写入的脚本代码（不是通过 src 属性引用的外部脚本文件）。async 和 defer 属性只能用于外部脚本文件的加载。

使用 async 和 defer 属性时需要考虑脚本之间的顺序依赖、DOM 解析准备完成事件和加载失败处理。根据具体需求选择合适的属性，并注意避免在内联脚本中使用这些属性。