code前端网除了async和defer之外，还组织了HTML中的SCRIPT标签属性
在HTML中，标签用于嵌入或引用JavaScript代码。
在标签中，有两个属性可以用来控制脚本如何加载和执行：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 async></script>
<script 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 文档。
- 如果 标签中使用了 async 和 defer 属性，则 async 属性将被忽略。
除了 async 和 defer 属性之外， 标签还有其他几个属性和特征：
1。 src属性：用于指定外部脚本文件的URL。如果设置了 src 属性，则 标记内的 JavaScript 代码将被忽略。
<script ></script>
2.类型属性：用于指定脚本的MIME类型。 JavaScript 推荐使用 Text/javascript。然而，大多数浏览器默认将 标签识别为 JavaScript，因此通常不需要显式设置 type 属性。
<script type="text/javascript" ></script>
3.字符集属性：用于指定脚本文件的字符编码。该属性较少使用，因为大多数浏览器和服务器现在默认使用 UTF-8 编码。
<script charset="UTF-8" ></script>
4。 跨域属性 ：用于配置跨域资源共享 (CORS) 设置。当上传的脚本文件位于不同域名下时，可以使用跨域属性来控制浏览器的跨域策略。
<script crossorigin="anonymous" ></script>
5。 完整性属性：用于保证脚本文件的完整性。通过提供脚本文件的哈希值（例如 SHA-256、SHA-384 或 SHA-512），浏览器可以在加载文件时验证文件的完整性。
<script integrity="sha384-xxxxxxx"></script>
6。 nomodule 属性：用于指定脚本不应在支持 ES6 模块的浏览器中执行。这可用于为不支持 ES6 模块的旧浏览器提供后备脚本。
<script nomodule ></script>
这些属性和功能使得标签在不同的使用场景下更加灵活、易于配置。
版权声明
本文仅代表作者观点，不代表Code前端网立场。
本文系作者Code前端网发表，如需转载，请注明页面地址。
