在Angular.js </script>中使用<script async =“”>标记

Question

Ilya Grigorik建议尽可能使用<script async>标签。

使用标签加载Angular.js应用程序是否有一种干净，首选的方法，而不使用require.js等工具或angular-seed推荐的$ script.js工具？

显而易见的问题是执行顺序。例如防止：

Uncaught ReferenceError: angular is not defined

https://www.igvita.com/2014/05/20/script-injected-async-scripts-considered-harmful/

Answer 1

如果有一些有用的东西，你可以在没有角度的情况下展示（例如，使用无头浏览器预先生成的内容）除了你的脚本取决于它 ¹ 之外什么都没有，那么可以有解决方案：

• 使用angular.js
加载async
• 将代码封装在函数体中
• 添加一个循环，检查是否定义了angular
  • 如果没有
  则睡几毫秒
  • 否则，执行您的代码并打破循环

这种忙碌的等待很难看，但是在加载完成后我无法看到如何回叫。它可能工作与否，我还没有尝试过。

我很可能只做框架所做的原始版本。

如果您不需要它在all browsers中工作，那么就会有defer标记。对我来说，defer似乎正确async。

---

¹ 所以我想，angular-route.js或类似的用户都不走运。这只是一个猜测，因为我从来没有试图加载这两个不按顺序。

Answer 2

在使用async之前，您可能希望将所有相关的JS文件合并为一个。 使用Grunt，Gulp，Broccoli或其他任务跑步者。

  

如果脚本是模块化的，并且不依赖于任何脚本，则使用async。

来源：Frontend performance tips for web developers。

Answer 3

不要在Angular.js脚本标记中使用async属性。

似乎使用async属性是有害的。如果没有它，表达式将在DOMContentLoaded事件上进行评估，但是使用async属性，会对窗口加载事件进行评估，这要求更晚。在最新版本的Firefox，Chrome和IE11中测试了Angular.js 1.0和1.4。

Answer 4

根据this answer，您可能希望尝试使用defer而不是async，这会导致浏览器遵守加载顺序。 E.g：

<script src="scripts/vendor-including-angular.js" defer></script>    
<script src="scripts/your-app.js" defer></script>