Script标签的加载顺序

kyaa111 9月前 ⋅ 266 阅读

script标签加载相关的一些属性

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

结论

  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了
这里注意,用document.createElement创建的标签async默认true
script.async = false;