【JavaScript 基础】-- JS 加载引入方式（defer、async、prefetch、preload）

JavaScript是个单线程语言，渲染引擎和JS引擎不是同时进行的。所以提前引入js文件可能会造成堵塞，从而影响页面加载，出现闪屏等情况。于是为了解决这种情况，就出现了js在body最后引入、script标签中defer和async异步加载JS的方式。

defer：如果script标签设置了该属性，则浏览器会异步的下载该文件并且不会影响到后续DOM的渲染。如果有多个设置了defer的script标签存在，则会按照顺序执行所有的script。defer脚本会在文档渲染完毕后，DOMContentLoaded事件调用前执行。

async：async浏览器立即异步下载文件，不同于defer得是，下载完成会立即执行，此时会阻塞dom渲染，所以async的script最好不要操作dom。因为是下载完立即执行，不能保证多个加载时的先后顺序。

引用网上的图片（可以明显的看出来区别）：

preload和prefecth是link标签上的属性

preload：让浏览器提前加载指定资源(加载后并不执行)，需要执行时再执行

prefetch：它告诉浏览器，这段资源将会在未来某个导航或者功能要用到，但是本资源的下载顺序权重比较低。也就是说prefetch通常用于加速下一次导航，而不是本次的。被标记为prefetch的资源，将会被浏览器在空闲时间加载。