脚本标记 – asynchronous＆延迟
我有一些关于属性async ＆ defer的问题，这个问题我的理解只能在HTML5浏览器中使用。
我的一个网站有两个外部JavaScript文件，当前坐在</body>标签之上; 第一个是来自谷歌的jquery ，第二个是本地外部脚本。
尊重网站加载速度
-
添加
async到页面底部的两个脚本有什么好处吗？ -
将这两个脚本的
async选项添加到<head>的页面顶部会有什么好处吗？ - 这是否意味着他们下载页面加载？
- 我认为这会导致HTML4浏览器延迟，但它会加快HTML5浏览器的页面加载？
使用<script defer src=...
- 在
<head>加载这两个脚本的属性会defer与</body>之前的脚本相同的影响吗？ - 我再次假设这会使HTML4浏览器变慢。
使用<script async src=...
如果我有两个启用了async脚本
- 他们会同时下载吗？
- 或者一次一个页面的其余部分？
- 脚本的顺序是否会成为一个问题？ 例如，一个脚本依赖于另一个脚本，所以如果下载速度更快，则第二个脚本可能无法正确执行。
最后，我最好把事情保持原样，直到HTML5更常用。
在</body>之前保留你的脚本。 Async可以在几种情况下与脚本一起使用（参见下面的讨论）。 对于位于那里的脚本来说，延迟不会有太大的区别，因为DOMparsing工作已经完成了。
这里有一篇文章解释了asynchronous和延迟之间的区别： http : //peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/ 。
如果将脚本保留在</body>之前，那么在较旧的浏览器中，HTML会更快地显示出来。 所以，为了保持旧版浏览器的加载速度，你不想把它们放在其他地方。
如果你的第二个脚本依赖于第一个脚本（例如你的第二个脚本使用第一个脚本中加载的jQuery），那么你不能让它们asynchronous，没有额外的代码来控制执行顺序，但你可以让它们延迟，因为延迟脚本将仍然按顺序执行，直到文档被parsing之后。 如果你有这个代码，你不需要脚本立即运行，你可以使它们asynchronous或延迟。
您可以将脚本放在<head>标记中，并将它们设置为defer并且脚本的加载将被延迟，直到DOM被parsing，并且将在支持延迟的新浏览器中快速显示页面，但是不会在以前的浏览器中都可以帮到你，而且它并不比在所有浏览器中工作的</body>都要快。 所以，你可以看到为什么最好把它们放在</body>之前。
asynchronous是更有用的，当你真的不在乎何时加载脚本，而不依赖于用户的其他东西取决于该脚本加载。 使用asynchronous最经常引用的例子是Google Analytics等分析脚本，您不需要等待任何内容，即时运行并不是紧急事件，因此无需依赖它。
通常jQuery库不适合async，因为其他脚本依赖于它，并且您希望安装事件处理程序，以便您的页面可以开始响应用户事件，并且您可能需要运行一些基于jQuery的初始化代码来build立初始状态的页面。 它可以用于asynchronous，但其他脚本将不得不被编码，直到加载jQuery不执行。
HTML5： async ， defer
在HTML5中，您可以告诉浏览器何时运行您的JavaScript代码。 有三种可能性：
<script src="myscript.js"></script> <script async src="myscript.js"></script> <script defer src="myscript.js"></script>
-
如果没有
async或defer，浏览器将在渲染脚本标记下方的元素之前立即运行脚本。 -
使用
async（asynchronous），浏览器将继续加载HTML页面并在浏览器同时加载并执行脚本时呈现它。 -
随着
defer，浏览器将在页面完成parsing时运行脚本。 （没有必要完成下载所有的图像文件，这是很好的。）
这张图解释了正常的脚本标记，asynchronous和延迟
-
asynchronous脚本在脚本加载后立即执行，因此不能保证执行的顺序（最后包含的脚本可能会在第一个脚本文件之前执行）
-
推迟脚本保证了它们在页面中出现的执行顺序。
请参阅此链接： http ： //www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html
async脚本和defer脚本都会立即开始下载，而不会暂停分析器，并且都支持可选的onload处理程序，以解决执行依赖于脚本的初始化的常见需求。
async和defer之间的区别在执行脚本时发生。 每个async脚本在完成下载之后和窗口的加载事件之前的第一个机会中执行。 这意味着可能（也可能） async脚本不按它们在页面中出现的顺序执行。 而defer脚本则保证按照页面中出现的顺序执行。 parsing完成之后，在文档的DOMContentLoaded事件之前开始执行。
来源和进一步的细节： 在这里 。
面对同样的问题，现在明确了解如何将作品。希望这个参考链接将有所帮助…
asynchronous
将async属性添加到脚本标记时，将会发生以下情况。
<script src="myfile1.js" async></script> <script src="myfile2.js" async></script>
- 进行并行请求来获取文件。
- 继续parsing文档，就好像它从不中断。
- 在下载文件的时候执行单个脚本。
推迟
延期和asynchronous有很大的区别。 以下是浏览器遇到具有defer属性的脚本时发生的情况。
<script src="myfile1.js" defer></script> <script src="myfile2.js" defer></script>
- 并行请求获取单个文件。
- 继续parsing文档，就好像它从不中断。
- 即使脚本文件已经下载完成parsing文档。
- 按照在文档中遇到的顺序执行每个脚本。
参考： asynchronous和延迟之间的区别
看来延迟和asynchronous的行为是依赖于浏览器的，至less在执行阶段。 注意，延迟只适用于外部脚本。 我假设asynchronous遵循相同的模式。
在IE 11及以下版本中，顺序似乎是这样的：
- asynchronous（可以部分执行页面加载时）
- 没有（可以在页面加载时执行）
- 延迟（在页面加载后执行，全部按照文件中的放置顺序）
在Edge，Webkit等中，asynchronous属性似乎被忽略或放在最后：
- data-pagespeed-no-defer（在任何其他脚本之前执行，而页面正在加载）
- 无（可以在页面加载时执行）
- 延迟（等到DOM加载，所有的延迟都按照文件中的放置顺序）
- asynchronous（似乎等到DOM加载）
在较新的浏览器中，data-pagespeed-no-defer属性在任何其他外部脚本之前运行。 这是针对不依赖于DOM的脚本。
注：当您需要明确的外部脚本执行顺序时使用延迟。 这告诉浏览器按照在文件中的位置顺序执行所有的延期脚本。
ASIDE：加载时，外部JavaScript的大小确实很重要，但对执行顺序没有影响。
如果您担心脚本的性能，您可能需要考虑缩小或仅使用XMLHttpRequestdynamic加载它们。
asynchronous和延期将在HTMLparsing期间下载文件。 asynchronous会暂停HTMLparsing器。 一旦完成下载，它将被执行。 如果延迟不会暂停HTMLparsing器，则在parsing器完成后将执行。推迟执行将按照文档中的顺序执行。
当脚本不依赖任何东西的时候使用。 当脚本依赖使用。
最好的解决scheme将是在底部添加body.There不会有阻塞或渲染的问题。
