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.

来源和更多细节:这里。

看起来defer和async的行为是依赖于浏览器的，至少是在执行阶段。说明“defer”仅适用于外部脚本。我假设async遵循相同的模式。

在IE 11及以下版本中，顺序是这样的:

异步(可以在页面加载时部分执行) 无(可以在页面加载时执行) 延迟(在页面加载后执行，所有延迟在文件中的位置顺序)

在Edge, Webkit等中，async属性似乎要么被忽略，要么被放在末尾:

data-page - speed-no-defer(在加载页面时，在任何其他脚本之前执行) 无(可以在页面加载时执行) 延迟(等待DOM加载，所有延迟在文件中的位置顺序) async(似乎等待DOM加载)

在较新的浏览器中，data-pagespeed-no-defer属性在任何其他外部脚本之前运行。这适用于不依赖于DOM的脚本。

注意:当您需要明确外部脚本的执行顺序时，请使用defer。这告诉浏览器按照在文件中的位置顺序执行所有延迟脚本。

旁白:外部javascript的大小在加载时确实很重要……但对执行顺序没有影响。

如果您担心脚本的性能，那么您可能需要考虑缩小或使用XMLHttpRequest动态加载它们。

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，浏览器将在页面完成解析时运行您的脚本。(没有必要下载完所有图像文件。这很好。)

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属性的情况下，脚本文件按照下载时间的顺序执行。

async和defer将在HTML解析期间下载文件。两者都不会中断解析器。

带有async属性的脚本一旦下载就会被执行。而具有defer属性的脚本将在完成DOM解析后执行。 使用async加载的脚本不能保证任何顺序。而使用defer属性加载的脚本则保持它们在DOM上出现的顺序。

当脚本不依赖任何东西时，使用<script async>。 当脚本依赖时，使用<script defer>。

最好的解决方案是在正文的底部添加<script>。不存在阻塞或渲染的问题。

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

它是这样的:

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构造和渲染过程后执行。