在HTML中， <script> 标签用于嵌入或引用JavaScript代码。

在 <script> 标签中，有两个属性可以用来控制脚本的加载和执行方式： async 和 defer 。


当然这也是常见的一道面试题， async  和  defer 的作用和区别。

async 和 defer 属性都可以用于异步加载脚本，从而避免了在加载脚本时阻塞浏览器渲染页面的问题。但是它们的具体行为略有不同。

当使用 async 属性时，浏览器会异步地加载脚本，并在下载完成后立即执行脚本，而不会等待页面的其他内容加载完成。如果页面中有多个异步加载的脚本，它们的执行顺序是不确定的，取决于它们完成下载的时间。 async 属性适用于不依赖于其他脚本或文档解析顺序的独立脚本。

当使用 defer 属性时，浏览器会异步地加载脚本，但是会在文档解析完毕后，按照它们在页面中出现的顺序执行它们。因此，如果页面中有多个 defer 脚本，它们会按照它们在页面中的顺序依次执行。这对于依赖于文档结构或其他脚本的脚本非常有用，因为它们需要在文档解析完成后才能正确执行。

 


以下是一个简单的例子，展示了 async 和 defer 属性的不同行为：

<!DOCTYPE html>
<html>
  <head>
    <title>Script</title>
  </head>
  <body>
    <h1>Hello, script!</h1>
    <script src="script1.js" async></script>
    <script src="script2.js" defer></script>
  </body>
</html>

 

在这个例子中，我们在页面中引入了两个脚本： script1.js 和 script2.js 。其中， script1.js 使用了 async 属性，而 script2.js 使用了 defer 属性。

当浏览器解析这个页面时，它会异步地加载 script1.js ，但会继续解析页面并渲染内容。一旦 script1.js 下载完成，它会立即执行。在此期间，浏览器可能仍在解析和渲染页面。

对于 script2.js ，浏览器也会异步加载它，但是会等待页面解析完毕后才执行。因此， script2.js 的执行会在页面解析完毕后，按照它在页面中的出现顺序执行。

 

 



总结一下：

- 不带 async 或 defer 的脚本会立即加载并阻塞HTML解析。
- 带有 async 属性的脚本会异步加载并在加载完成后立即执行，可能在HTML解析完成之前或之后。
- 带有 defer 属性的脚本会延迟执行，直到HTML文档解析完成。
- 如果在一个 <script> 标签中同时使用了 async 和 defer 属性， async 属性会被忽略。

 




除了 async 和 defer 属性外， <script> 标签还有一些其他属性和特性：


1. src 属性：用于指定外部脚本文件的URL。如果设置了 src 属性， <script> 标签内部的JavaScript代码将被忽略。

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

 


2. type 属性：用于指定脚本的MIME类型。对于JavaScript，推荐使用 text/javascript 。但是，大多数浏览器默认将 <script> 标签识别为JavaScript，因此通常不需要显式设置 type 属性。

<script type="text/javascript" src="script.js"></script>

 


3. charset 属性：用于指定脚本文件的字符编码。这个属性已经不太常用，因为现在大多数浏览器和服务器默认使用UTF-8编码。

<script charset="UTF-8" src="script.js"></script>

 


4. crossorigin 属性：用于配置跨域资源共享（CORS）设置。当加载的脚本文件位于不同的域名下时，可以使用 crossorigin 属性来控制浏览器的跨域策略。

<script crossorigin="anonymous" src="https://script.com/script.js"></script>

 


5. integrity 属性：用于确保脚本文件的完整性。通过提供脚本文件的哈希值（例如，SHA-256、SHA-384或SHA-512），浏览器可以在加载文件时验证其完整性。

<script src="script.js" integrity="sha384-xxxxxxx"></script>

 


6. nomodule 属性：用于指定脚本不应在支持ES6模块的浏览器上执行。这可以用于向不支持ES6模块的旧浏览器提供回退脚本。

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

 


这些属性和特性使得 <script> 标签在不同的使用场景下更加灵活和易于配置。