一、script标签的上的一些属性

async

可选属性，表示应该立即开始下载脚本，但不能阻止其他页面动作（如解析其他标签，加载dom等，或者后续其他的js执行），只对外部脚本文件有效如果页面中有多个异步加载的脚本，它们的执行顺序是不确定的，取决于它们完成下载的时间。async属性必须在一些没有相互依赖的外部脚本使用。

<script src="script1.js" async></script>

defer

可选属性，表示脚本可以延迟到文档完全被解析后和显示之后再执行，(有点在onMunted中执行脚本那意思，或者把script放在body标签最后要有同样的效果吧,猜测)，如果有多个defer属性的script标签,理论上它们会按照它们在页面中的顺序依次执行。这对于依赖于文档结构或其他脚本的脚本非常有用，因为它们需要在文档解析完成后才能正确执行，但红宝书上却写着“不过在实际单重，推迟执行的脚本不一定总会按照顺序执行”

<script src="script2.js" defer></script>

crossorigin

可选属性，配置该请求是否被浏览器同源策略限制，默认是不使用cors的，所以当人说到使用script标签请求外部资源不受同源策略限制的时候，你可以多说一句这个属性的作用。

script标签去请求资源的时候，request会带上origin头，然后会要求服务器进行 cors校验，跨域的时候如果response header 没有 ‘Access-Control-Allow-Origin’ 是不会拿到资源的。cors验证通过后，拿到的script运行内部报错的话，window.onerror 捕获的时候，内部的error.message可以看到完整的错误信息。
crossorigin的属性值分为 anonymous和use-credentials。如果设置了crossorigin属性，但是属性值不正确的话，默认是anonymous。

作者：菜蚴菜
链接：www.jianshu.com/p/9412e4ad6…
来源：简书

integrity

可选属性，中文意思就是完整性，顾名思义，验证接受到的资源和指定加密签名进行比对，已验证资源的完整性，如果接受到的资源的签名这个属性指定的签名不匹配则不会执行，可确保CDN不会提供恶意内容

这里对加密签名说明一下，通过加密算法把整个js脚本文件加密，一般采用sha256，sha384等一系列的加密方法，这些加密方法都是单向加密，把一大堆东西加密成为一个唯一的字符串，如果被加密的内容有任何一点改变，那么加密后的字符串就会不一样！

<script src="script1.js" integrity="sha256-aksjdhfkjahj3jt4...." async></script>

当浏览器解析它的时候，会把资源通过指定的加密算法进行计算，如果得到的结果和你写的不一样，就证明该资源被污染了存在风险，就不会加载！

charset

可选属性，用于指定脚本文件的字符编码。这个属性已经不太常用，因为现在大多数浏览器和服务器默认使用UTF-8编码。

src、type、language

src我们再熟悉不过了，可选属性，表示包含执行的代码的外部文件

type可选属性，是代替原来的language属性,表示代码块中脚本语言的内容类型(也称为MINE类型)，按照惯例这个值始终是text/javascript，不过值得注意的是，如果这个属性的值是module,则代码会被当成ES6模块，而且只有这时候代码中才能出现import和export关键字

language这个属性已经废弃，最初用于表示代码中的脚本语言（如'JavaScript'、'JavaScript1.2'）

二、行内代码与外部代码

虽然HTML可以在文档中嵌入JavaScript代码，但是通常最佳实践是尽可能将JavaScript代码放在外部文件中。

可维护性：将代码放在外部，多个页面可以同时引用这个地址下的js代码，只用改一处代码，其他页面都生效使用，这样代码的可维护性不言而喻
缓存：浏览器会根据特定的设置，缓存所有的外部链接的js文件，这意味着如果连个页面都使用到了该js文件，那么用户只用下载一次，以后得页面加载会更快。
请求带宽问题：外部链接的js代码，会发起请求该地址下的js文件，自然请求是会花时间的，如果可以利用缓存减少请求就好了，现在浏览器基本上都是支持SPDY/HTTP2，那么就可以从同一个地方获取一批文件，并将他们逐个放到浏览器缓存中，从浏览器角度看获取这些被分割的独立js文件与获取一个完整大的的延迟差不多。这让我们想到可以拆分js代码，将他们分成多个js文件，也许当前的页面只会用到第一个页面一部分的代码（如什么公共方法，公共组件等）那么在第二个页面中就可以取第一个页面已经缓存好的js文件，从而减少js请求数量。

文章内容来源：Javascript高级程序设计

关于script标签一些知识点