Script标签的加载顺序
2023-12-22 22:10:17 287
script标签加载相关的一些属性
| 属性名称 | 解释 |
|---|---|
| async | 对于普通脚本，如果存在 async 属性，那么普通脚本会被并行请求，并尽快解析和执行。简单的说，就是异步执行 |
| crossorigin | 正常的 script 元素将最小的信息传递给 window.onerror，用于那些没有通过标准 CORS 检查的脚本 |
| defer | 这个布尔属性的设置是为了向浏览器表明，该脚本是要在文档被解析后，但在触发 DOMContentLoaded 事件之前执行的.包含 defer 属性的脚本会按照它们出现在文档中的顺序执行 |
| fetchpriority | 提供一个指示，说明在获取外部脚本时要使用的相对优先级。允许的值：high/low/autointegrity/nomodule/nonce |
结论
- 如果实在html内部写的script标签，是边加载边执行的，从上到下
- 如果是需要外部引入（一般来说也都是外部引入的），那么就需要下载完成并且解释执行完才会执行后面的Html和js，这就是常说的阻塞原理
- 如果外部引入的js体积过大，就会存在页面假死的情形，我们一般通过async和defer去解决
- async属性就是异步加载
- defer属性就是延迟加载，并严格按照标签引入顺序去执行
这里有两个概念在解释下，加载（下载）和执行（解释）；
一般外部的资源，是要通过网络下载的，体积越大，下载用的时间也就越多。
如果我们1.js体积很大，下载耗时3秒；2.js体积很小，下载1ms，而我们2.js的方法会先执行，但是这个方法又依赖1.js里的方法，这时就会报错。
所以我们要保证1.js先执行，这时就需要用defer属性保证执行顺序了。
如果2.js不依赖1.js，而2.js的执行会阻塞页面的渲染，为了更好的体验，我们肯定希望它们是异步执行的，所以可以用async了
这里注意，用document.createElement创建的标签async默认truescript.async = false;
