将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。