JZTXT

script的加载方式标记

发布时间 2023-08-01 13:14:47作者: 凉策

在 HTML 中，可以通过以下几种方式来指定 JavaScript 脚本的加载方式：

  1. <script> 标签的 async 属性：async 属性用于指定脚本的异步加载。当指定了 async 属性时，脚本将会在加载时不阻塞 HTML 解析，并在加载完成后立即执行。多个异步脚本的执行顺序是不确定的。
Copy
<script src="script.js" async></script>
  1. <script> 标签的 defer 属性：defer 属性用于指定脚本的延迟加载。当指定了 defer 属性时，脚本将会在 HTML 解析完成后再执行，但在 DOMContentLoaded 事件之前执行。多个延迟脚本的执行顺序是按照它们在文档中出现的顺序执行的。
Copy
<script src="script.js" defer></script>
  1. 动态加载脚本：通过 JavaScript 动态创建 <script> 标签，然后将其插入到文档中。动态加载脚本可以在任何时候进行，例如在页面加载后、用户操作后或其他事件触发时。这种方式可以控制脚本的加载时机。
Copy
var script = document.createElement('script');
script.src = 'script.js';
document.body.appendChild(script);

需要注意的是，JavaScript 脚本默认是同步加载的，即阻塞 HTML 解析并立即执行。以上的标记和方法可以调整脚本的加载方式，使其异步或延迟加载，提高页面加载性能或控制脚本执行时机。