Script标签中几个常见的属性

Script标签的几个常见属性

type 属性

如果type 的类型为module，则script 内可以使用ES6模块

 <script type="module">
   import { numberOne } from "./index.js";
 ​
   console.log(numberOne); // 1
 </script>
 ​
 <script>
   import { numberOne } from "./index.js";
 ​
   console.log(numberOne); 
   // Uncaught SyntaxError: Cannot use import statement outside a module
 </script>

defer 属性

通知浏览器该脚本在页面解析之后，触发DOMContentLoaded 事件之前执行。但是下载时间没有发生改变。

0. 如果是内嵌脚本，则无效
1. 如果类型为module，defer属性也没有效果，因为module默认defer
2. 多个推迟脚本下载是并行下载的，但是执行的时候文档顺序优先

常用于需要控制DOM的脚本

async 属性

async 特性意味着脚本是完全独立的：

• 浏览器不会因 async 脚本而阻塞（与 defer 类似）。
• 其他脚本不会等待 async 脚本加载完成，同样，async 脚本也不会等待其他脚本。
• DOMContentLoaded 和异步脚本不会彼此等待
• 多个异步脚本之间也没有任何关联，谁先被加载，就先被执行。（加载优先）

1. 同样，async 属性也仅作用于外部脚本
2. 常用于独立脚本，例如计数器或广告牌

动态加载script

默认情况下，动态加载创建的script标签是以异步的方式被加载的。