一文详解HTML中script标签的属性
在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 class="lazy" data-src="script1.js" async></script>
<script class="lazy" data-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属性会被忽略。
到此这篇关于一文详解HTML中script 标签的属性的文章就介绍到这了,更多相关HTML script标签属性内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
