在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>
标签还有一些其他属性和特性:
src
属性:用于指定外部脚本文件的URL。如果设置了src
属性,<script>
标签内部的JavaScript代码将被忽略。
<script src="script.js"></script>
type
属性:用于指定脚本的MIME类型。对于JavaScript,推荐使用text/javascript
。但是,大多数浏览器默认将<script>
标签识别为JavaScript,因此通常不需要显式设置type
属性。
<script type="text/javascript" src="script.js"></script>
charset
属性:用于指定脚本文件的字符编码。这个属性已经不太常用,因为现在大多数浏览器和服务器默认使用UTF-8编码。
<script charset="UTF-8" src="script.js"></script>
crossorigin
属性:用于配置跨域资源共享(CORS)设置。当加载的脚本文件位于不同的域名下时,可以使用crossorigin
属性来控制浏览器的跨域策略。
<script crossorigin="anonymous" src="https://script.com/script.js"></script>
integrity
属性:用于确保脚本文件的完整性。通过提供脚本文件的哈希值(例如,SHA-256、SHA-384或SHA-512),浏览器可以在加载文件时验证其完整性。
<script src="script.js" integrity="sha384-xxxxxxx"></script>
nomodule
属性:用于指定脚本不应在支持ES6模块的浏览器上执行。这可以用于向不支持ES6模块的旧浏览器提供回退脚本。
<script nomodule src="script.js"></script>
这些属性和特性使得<script>
标签在不同的使用场景下更加灵活和易于配置。
原文链接:https://juejin.cn/post/7226897268275478587 作者:施主来了