如何保证script标签的加载顺序

目的

本章博文主要解决script标签的加载顺序问题。

问题现状

在写前端代码的时候，我们一般有两种方式去运行我们的脚本，第一种：直接在html中通过<script></script>去写，或者把脚本放到js中来引用。但是script标签的一些属性有哪些呢？我们来研究下.

属性名称	解释
async	对于普通脚本，如果存在 async 属性，那么普通脚本会被并行请求，并尽快解析和执行。简单的说，就是异步执行
crossorigin	正常的 script 元素将最小的信息传递给 window.onerror，用于那些没有通过标准 CORS 检查的脚本。
defer	这个布尔属性的设置是为了向浏览器表明，该脚本是要在文档被解析后，但在触发 DOMContentLoaded 事件之前执行的.包含 defer 属性的脚本会按照它们出现在文档中的顺序执行
fetchpriority	提供一个指示，说明在获取外部脚本时要使用的相对优先级。允许的值：high/low/autointegrity/nomodule/nonce
src	这个属性定义引用外部脚本的 URI，这可以用来代替直接在文档中嵌入脚本。
type (en-US)	该属性表示所代表的脚本类型

结论

1 如果实在html内部写的script标签，是边加载边执行的，从上到下
2 如果是需要外部引入（一般来说也都是外部引入的），那么就需要下载完成并且解释执行完才会执行后面的Html和js，这就是常说的阻塞原理
3 如果外部引入的js体积过大，就会存在页面假死的情形，我们一般通过async和defer去解决
4 async属性就是异步加载
5 defer属性就是延迟加载，并严格按照标签引入顺序去执行
这里有两个概念在解释下，加载（下载）和执行（解释）；一般外部的资源，是要通过网络下载的，体积越大，下载用的时间也就越多。如果我们1.js体积很大，下载耗时3秒；2.js体积很小，下载1ms，而我们2.js的方法会先执行，但是这个方法又依赖1.js里的方法，这时就会报错。所以我们要保证1.js先执行，这时就需要用defer属性保证执行顺序了。如果2.js不依赖1.js，而2.js的执行会阻塞页面的渲染，为了更好的体验，我们肯定希望它们是异步执行的，所以可以用async了。这里注意，用createelement创建的标签async默认true