aysnc， defer

[h476564406]

async=false, 同步加载，加载完立刻执行js。
async=true, 异步加载， 加载完立刻执行js。
defer=false， 不会延迟执行。
defer=true， 异步加载，加载完不会立刻执行，而是延迟执行。但是通知浏览器该脚本将在文档完成解析后，触发 DOMContentLoaded 事件前才执行。

两个脚本
体积大，前提脚本。id1 https://code.jquery.com/jquery-3.3.1.slim.min.js
体积小，后续脚本。id2 https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js

script外联标签

case1: 两个标签都是 async=false defer=false

默认async=false, 同步加载并且执行js。
默认defer=false, 不会延迟加载。

<script id='id1' src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous" defer></script>
<script id='id2' src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"  defer></script>

const id1 = document.getElementById('id1');
console.log(id1.async); // 默认false
console.log(id1.defer); // 默认false

case2:  前提脚本加上defer 延迟执行，由于存在依赖顺序关系，报错。

<script id='id1' src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous" defer></script>
<script id='id2' src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"></script>

case3:  两个脚本都加上defer 延迟执行，按顺序执行。
    <script id='id1' src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous" defer></script>
    <script id='id2' src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" crossorigin="anonymous"  defer></script>

case4: 动态挂脚本，设置async， defer无效。默认async=true, defer=false
谁先加载完谁先执行， 和顺序无关。

 const scriptElem = document.createElement('script');
    scriptElem.id = 'next';
    scriptElem.type = 'text/javascript';
    scriptElem.src = 'https://code.jquery.com/jquery-3.3.1.slim.min.js'
    scriptElem.setAttribute('crossOrigin', 'anonymous');
    scriptElem.async = false;
    scriptElem.defer = true;
    document.body.appendChild(scriptElem);
    const next = document.getElementById('next');
    console.log('next.async', next.async);
    console.log('next.defer', next.defer);

   const scriptElem1 = document.createElement('script');
    scriptElem1.id = 'next2';
    scriptElem1.type = 'text/javascript';
    scriptElem1.src = 'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js'
    scriptElem1.setAttribute('crossOrigin', 'anonymous');

    // 在脚本加载并且执行完毕后触发。即使执行中出现报错，仍然触发onload
   // onerror是指脚本加载onerror

    scriptElem1.onload = function () {
      console.log(new Date().valueOf());
      console.log('加载完成2222!!!!!');
    }
    document.body.appendChild(scriptElem1);

load必须等待所有资源包括动态加载的资源加载并且执行完成才会触发，但是不会等待setTimeout（这是新的宏队列）。
DOMContentLoaded 在整个html文档完成解析后就会触发, 会等待同步脚本script，不会等待异步加载的js脚本。

 <script>
    window.addEventListener('load',  ()=> {
    console.log('load');
    });
    window.addEventListener('DOMContentLoaded',  ()=> {
    console.log('DOMContentLoaded');
    });
  </script>

即使放在外，也会影响DOMContentLoaded。

 for (let index = 0; index < 1000; index++) {
      console.log(index);
    }