HTML ＜script＞元素的10个属性

将javascrip插入HTML的主要方法是使用<script>元素，这个元素是网景公司（Netscape）创造出来的，script 元素所属类型因其用法而异。位于 head 元素中的 script 元素属于元数据元素，位于其他元素（如 body 或 section）中的则属于短语元素。

script的10个属性

1、async

可选。只对外部文件有效，HTML5中新增属性，用于定义一个异步执行的脚本；该属性表示应该立即下载src属性指定的脚本资源，但不能阻止其他页面动作，比如下载资源或其他脚本加载，即不必等该异步脚本下载和执行后再加载页面，同样也不必等到该异步脚本下载和执行后再加载其他脚本；当有多个添加了async属性的脚本时，不能保证执行顺序和出现顺序一致；所以要避免异步执行脚本之间存在依赖关系

<script async src="https://www.somewhere.com/index.js"></script>

2、charset

可选。规定在外部脚本文件中使用的字符编码。这个属性很少使用，因为大多数浏览器不在乎它的值，在w3c的script标签属性列表已经没有列出这个属性

<script type="text/javascript" src="myscripts.js" charset="UTF-8"></script>

常用字符集如下： 

• UTF-8 - Unicode 字符编码
• ISO-8859-1 - 拉丁字母表的字符编码

如需查看所有可用的字符集，可以在w3c查看 ：HTML 字符集

3、crossorigin

可选。配置相关请求的CORS(跨域资源共享）设置，默认不使用CORS。

• crossorigin = "anonymus"：表示文件请求不必设置凭据标志
• crossorigin ="use-credentials"： 需要设置凭据标志，出站请求会包含凭据

<script src="https://www.somewhere.com/index.js" crossorigin="anonymous|use-credentials">

4、defer 

可选，表示脚本需要立即下载但可以延迟到文档完全被解析和显示之后再执行，即推迟执行脚本

<script defer src="https://www.somewhere.com/index.js"></script>

注意，HTML5规范要求脚本应该按照他们出现的顺序执行，理论上，第一个被推迟的脚本会比第二个 被推迟的脚本先执行，且被推迟执行的脚本都会在DOMContentLoaded事件之前执行，但实际上这个顺序无法保证，所以，最好只包含一个加defer的延迟执行的脚本

5、intergrity

允许比对接受到的资源和指定的加密签名（一般是一个hash值）以验证子资源完整性，如果接收到的资源的签名与这个属性指定的签名不匹配，则页面会报错了，脚本不会执行，这个属性可以用于确保CDN不会提供恶意内容

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>

主要起到安全防护的作用，比如：

• 减少由托管在 CDN 的资源被篡改而引入的 XSS 风险
• 只下载资源源站的指定资源
• 如果http协议请求的资源，可以避免，在通信过程中请求资源被篡改而导致的XSS风险

 

6、src

可选，表示包含要执行的代码的外部文件，规定外部脚本文件的 URL

<script src="myscripts.js"></script>

src的值可以是可以是外部url也可以是站内文件：

• 绝对 URL - 指向另一个网站（如 src="http://www.example.com/example.js"）

• 相对 URL - 指向网站内的文件（如 src="/scripts/example.js"）

注意：外部脚本文件内容中不能包含 <script> 标签。

7、language

已弃用，最初用于表示代码块中的脚本语言，在w3c的script标签属性列表已经没有列出这个属性

8、type

可选，代替language，规定脚本类型，常用值是 JavaScript MIME 类型，如果没有指定type的值，浏览器会假定使用的是 JavaScript，此属性默认值是：application/javascript，还有一个常用值是：application/ecmascript

<script type="application/javascript">
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

9、referrerpolicy（补，红宝书没列但w3c有列出）

可选，规定在获取脚本时要发送的引用者信息

<script src="myscripts.js" referrerpolicy="origin-when-cross-origin"></script>

 可取值如下：

no-referrer	不发送引用者信息。
no-referrer-when-downgrade	默认值。如果协议安全级别保持不变或更高（从 HTTP 到 HTTP，从 HTTPS 到 HTTPS，从 HTTP 到 HTTPS 是可以的），则发送原始来源、路径和查询字符串。 如果协议安全级别较低（从 HTTPS 到 HTTP 不行），则不发送任何内容。
origin	发送文档的来源（协议、主机和端口）。
origin-when-cross-origin	对于跨域请求，发送文档的来源。对于同源请求，发送文档的来源、路径和查询字符串。
same-origin	对于同源请求，发送引用者(referrer)。对于跨域请求，不发送引用者。
strict-origin-when-cross-origin	如果协议的安全级别保持不变或更高（从 HTTP 到 HTTP，从 HTTPS 到 HTTPS，以及从 HTTP 到 HTTPS 都可以），则发送来源信息。 对于较低安全级别（从 HTTPS 到 HTTP），则不发送任何内容。
unsafe-url	发送来源、路径和查询字符串（无论安全级别如何）。请谨慎使用此值！

10、nomodule（补，红宝书没列但w3c有列出）

规定脚本不应在支持 ES2015 模块的浏览器中执行。

可取值为

• True
• False

ps：本文基于红宝书第4版，并结合w3c的学习小笔记，若有不恰当之处，欢迎交流