这张图片解释了正常的脚本标签，异步和延迟

异步脚本在加载脚本时立即执行，因此 不能保证执行的顺序(在 end可能在第一个脚本文件之前执行) 延迟脚本保证了它们出现的执行顺序 在页面中。

参考这个链接:http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

async和defer脚本都立即开始下载，而不需要暂停解析器，并且都支持可选的onload处理程序，以满足执行初始化(依赖于脚本)的常见需求。

The difference between async and defer centers around when the script is executed. Each async script executes at the first opportunity after it is finished downloading and before the window’s load event. This means it’s possible (and likely) that async scripts are not executed in the order in which they occur in the page. Whereas the defer scripts, on the other hand, are guaranteed to be executed in the order they occur in the page. That execution starts after parsing is completely finished, but before the document’s DOMContentLoaded event.

来源和更多细节:这里。

HTML5:异步，延迟

在HTML5中，你可以告诉浏览器什么时候运行JavaScript代码。有三种可能:

<script       src="myscript.js"></script>

<script async src="myscript.js"></script>

<script defer src="myscript.js"></script>

没有async或defer，浏览器会立即运行你的脚本，在呈现脚本标签下面的元素之前。 使用async(异步)，浏览器将继续加载HTML页面并在浏览器加载和执行脚本的同时呈现它。 使用defer，浏览器将在页面完成解析时运行您的脚本。(没有必要下载完所有图像文件。这很好。)

面对同样的问题，现在清楚地了解两者将如何工作。希望这个参考链接会有帮助…

异步

当您将async属性添加到脚本标记时，将发生以下情况。

<script src="myfile1.js" async></script>
<script src="myfile2.js" async></script>

发出并行请求来获取文件。 继续解析文档，就像它从未被打断过一样。 文件下载后立即执行各个脚本。

推迟

延迟与异步非常相似，但有一个主要区别。下面是浏览器遇到带有defer属性的脚本时会发生的情况。

<script src="myfile1.js" defer></script>
<script src="myfile2.js" defer></script>

进行并行请求以获取单个视频文件。 继续解析文档，就像它从未被打断过一样。 即使已经下载了脚本文件，也要完成文档解析。 按照文档中出现的顺序执行每个脚本。

参考:异步和延迟的区别

Default - By default, as soon as the browser sees a script tag it downloads the file and then executes the script file. The script files are executed in the order of their occurrence. async - The browser will download the script file and continue parsing HTML parallelly until the file is downloaded. The file is executed as soon as it is downloaded. defer - The browser will download the script and do HTML parsing at the same time. After parsing is done, the script files are executed in the order of their occurrence.

注意: 在defer中，js文件按照它们在HTML文件中出现的顺序执行，而在async属性的情况下，脚本文件按照下载时间的顺序执行。

渲染引擎经过几个步骤，直到它在屏幕上绘制任何东西。

它是这样的:

Converting HTML bytes to characters depending on encoding we set to the document; Tokens are created according to characters. Tokens mean analyze characters and specify opening tangs and nested tags; From tokens separated nodes are created. they are objects and according to information delivered from tokenization process, engine creates objects which includes all necessary information about each node; after that DOM is created. DOM is tree data structure and represents whole hierarchy and information about relationship and specification of tags;

CSS也是同样的过程。CSS渲染引擎为CSS创建不同的/分离的数据结构，但它被称为CSSOM (CSS对象模型)

Browser只适用于对象模型，所以它需要知道所有关于DOM和CSSDOM的信息。

下一步是以某种方式组合DOM和CSSOM。因为没有CSSOM浏览器不知道在渲染过程中如何样式化每个元素。

以上所有信息意味着，你在html (javascript, css)浏览器中提供的任何东西都会暂停DOM构建过程。如果你熟悉事件循环，有一个简单的规则事件循环如何执行任务:

执行宏任务; 执行微任务; 呈现;

所以当你提供Javascript文件时，浏览器不知道JS代码要做什么，并停止所有的DOM构造过程，Javascript解释器开始解析和执行Javascript代码。

即使你在body标签的末尾提供Javascript，浏览器也会进行HTML和CSS的所有上述步骤，但渲染除外。它会找到Script标签并停止，直到JS完成。

但是HTML为脚本标记提供了两个额外的选项:async和defer。

Async -意思是当代码被下载时执行，并且在下载过程中不阻塞DOM构造。

延迟——意思是在代码下载和浏览器完成DOM构造和渲染过程后执行。