加载script标签

将script标签写在2个地方——head中和body中——进行观察：

head中，他们大概是同时开始加载，运行后，body中的才开始加载运行。也及时body中的，会等待head中的加载完成运行完毕后，才开始加载。也就是页面会阻塞。

<figure class="wp-block-image">
  <img src="/uploads/2019/03/image-4-1024x409.png" alt="" class="wp-image-296"   /> 
</figure> 

还有可能在head中编写一段js代码，它会在head中再添加几个script标签。就会出现下面的情况。

<figure class="wp-block-image">
  <img src="/uploads/2019/03/image-5-1024x437.png" alt="" class="wp-image-297"   />
</figure> 

第一部分是head中写死的，第二部分是JS添加到head中的，第三部分是写在body中的。

第二部分会开始加载，然后body中的不会等待第二部分加载完成，也就是JS添加的script不会阻塞页面。

当body中的script依赖了JS添加的script，就有可能出现找不到依赖报错的情况。

defer async

async 异步加载资源，且加载完JS资源立即执行，并不会按顺序，谁快谁先上， 网页不会失去响应。

defer 异步加载资源，在DOM渲染后之后再按顺序执行JS。