defer 与 async 的区别

defer 与 async 的区别

按照惯例，所有 script 元素都应该放在页面的 head 元素中。这种做法的目的就是把所有外部文件(css 文件和 JavaScript 文件)的引用都放在相同的地方。可是，在文档的 head 元素中包含所有 JavaScript 文件，意味着必须等到全部 JavaScript 代码都被下载，解析和执行完成以后，才能开始呈现页面的内容(浏览器在遇到 body 标签时才开始呈现内容)

对于那些需要很多 JavaScript 代码的页面来说，这无疑会导致浏览器在呈现页面出现明显的延迟，而延迟期间的浏览器窗口中将是一片空白。为了避免这个问题。现在 Web 应用程序一般都全部 JavaScript 引用放在 body 元素中页面的内容后面。这样一来，在解析包含的 JavaScript 代码之前，页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。

有了 defer 和 async 后，这种局面得到了改善。

defer(延迟脚本)

延迟脚本：defer 属性只适用于外部脚本文件。

如果给了 script 标签定义了 defer 属性，这个属性的作用是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。因此，如果 script 元素中设置了 defer 属性，相当于告诉浏览器立即下载，但延迟执行。

async(异步脚本)

异步脚本：async 属性也只适用于外部脚本文件，并告诉浏览器立即下载文件。

但与defer不同的是：标记为 async 的脚本并不保证按照指定它们的先后顺序执行。

所以总结起来，两者之间最大的差异就是在于脚本下载完之后何时执行，显然 defer 是最接近我们对于应用脚本加载和执行的要求的。

defer 是立即下载但延迟执行，加载后续文档元素的过程将和脚本的加载并行进行(异步)，但是脚本的执行要在所有元素解析完成之后，DOMContentLoaded 时间触发之前完成。async 是立即下载并执行，加载和渲染后续文档元素的过程将和 js 脚本的加载与执行并行进行(异步)。