Script

  ;script (opens new window) 用于嵌入或者引用可执行脚本。

  其中可选属性如下。

• type：用于定义脚本语言的 MIME (opens new window) 类型，包括text/javascript、text/ecmascript、application/javascript、application/ecmascript，注意HTML5中可以省略掉type，其默认值为text/javascript
• src：指定引用的外部脚本的URL
• defer：仅适用于外链，规定脚本延迟执行
• async：仅适用于外链，规定脚本异步执行
• integrity：用于验证获取的资源是否被篡改，若接收的资源的签名和integrity指定的签名不匹配，页面会报错，脚本也不会执行
• crossorigin：浏览器启用CROS访问检查，属性值包括anonymous、use-credentials，若未指定属性值或非法属性值，浏览器默认采用anonymous

defer/async

  一般的script标签都是会阻塞页面的解析，为了避免DOM的解析被阻塞，通常是将script标签放在html页面的底部。

  ;defer在页面完成解析才执行代码（即DOM加载完毕，图片资源等还未下载），带有defer属性的script，其下载会与后续的文档元素的解析并行加载，而脚本会延迟到DOM解析完成，而在DOMContentLoaded之前执行。

  带有async属性的script，其下载会与后续的文档元素的解析并行加载，但是只要script下载完成，那么就会立即执行，若此时DOM未加载完毕，则会阻塞DOM解析。

  两者都是后续的文档元素的解析与脚本的下载并行执行，唯一不同在于脚本执行的时机，defer是延迟到DOM解析完成且DOMContentLoaded之前执行，而async则是在下载完立即执行，若DOM未加载完毕，则其解析会被阻塞。

  更多阻塞问题参考 关于 JS 与 CSS 是否阻塞 DOM 的渲染和解析。

integrity

  如下告知浏览器使用sha256签名算法对下载的js文件进行计算，并且与integrity提供的签名进行对比，若二者不一致，就不会执行此脚本。

  ;integrity一般是是对 CDN (opens new window) 上的静态文件使用。CDN虽然好用但是 CDN有可能被劫持，导致下载的文件是被篡改过的，有了integrity就可以检查文件是否是原版。而本地文件用的域名跟网页是同一个域名，不存在劫持的问题，所以本地静态文件没有必要用此属性。

<script integrity="sha256-PJJrxrJLzT6CCz1jDfQXTRWOO9zmemDQbmLtSlFQluc=" src="https://xxx.xxx.js"></script>

crossorigin

  当网页引入跨域的脚本时，若此脚本有错误，由于浏览器的限制（根本原因是协议的规定），是获取不到错误信息的。在本地尝试window.onerror去捕获脚本的错误时，跨域脚本的错误只会返回Script error。

  而HTML5规定是可以允许本地获取到跨域脚本的错误信息的，但是要满足两个条件，一是跨域脚本的服务器必须通过Access-Control-Allow-Origin头信息允许当前域名可以获取错误信息，二是script标签必须指明src属性指定的地址是支持跨域的地址，即crossorigin属性，详细参考 MDN (opens new window)。

🎉 写在最后

🍻伙伴们，如果你已经看到了这里，觉得这篇文章有帮助到你的话不妨点赞👍或 Star (opens new window) ✨支持一下哦！

手动码字，如有错误，欢迎在评论区指正💬~

你的支持就是我更新的最大动力💪~

GitHub (opens new window) / Gitee (opens new window)、GitHub Pages (opens new window)、掘金 (opens new window)、CSDN (opens new window) 同步更新，欢迎关注😉~