Ilya Grigorik recommends the use of the <script async> tag where possible.
Ilya Grigorik建议尽可能使用
Is there a clean, preferred way to load an Angular.js app using the tag, without using tools like require.js or the $script.js tool recommended by the angular-seed?
是否有一种干净，首选的方法来加载使用标签的Angular.js应用程序，而不使用像require.js这样的工具或angular-seed推荐的$ script.js工具？
The obvious issue is execution order. e.g. preventing:
显而易见的问题是执行顺序。例如预防：
Uncaught ReferenceError: angular is not defined
https://www.igvita.com/2014/05/20/script-injected-async-scripts-considered-harmful/
https://www.igvita.com/2014/05/20/script-injected-async-scripts-considered-harmful/
4 个解决方案
#1
2
If there's something useful you can show without angular (e.g., a pre-generated content using a headless browser) AND nothing but your script depends on it1, then there can be a solution:
如果有一些有用的东西你可以在没有角度的情况下显示（例如，使用无头浏览器预先生成的内容）除了你的脚本取决于它1之外什么都没有，那么可以有一个解决方案：
- load
angular.jsusingasync - 使用异步加载angular.js
- encapsulate you code in a function body
- 将代码封装在函数体中
- add a loop checking if
angularis defined- and sleeping for a few milliseconds if not
- 如果没有，则睡几毫秒
- otherwise, executing your code and breaking out of the loop
- 否则，执行你的代码并打破循环
- 添加一个循环，检查是否定义了角度，如果不是，则暂停几毫秒，执行代码并打破循环
This sort of busy waiting is ugly, but I can't see how to get called back when the loading finishes. It may work or not, I haven't tried it yet.
这种忙碌的等待很难看，但是当加载完成时我看不到如何回叫。它可能工作与否，我还没有尝试过。
It's quite possible that I'm doing nothing but a primitive version of what the frameworks do.
我很可能只做框架所做的原始版本。
If you don't need it to work in all browsers, then there's the defer tag. To me, defer looks like async done right.
如果您不需要它在所有浏览器中工作，那么就是延迟标记。对我来说，推迟看起来像异步做对了。
1 So I guess, users of angular-route.js or alike are out of luck. This is just a guess as I've never tried to load the two out of order.
1所以我猜，angular-route.js或者类似的用户都运气不好。这只是一个猜测，因为我从来没有试过加载这两个乱序。
#2
0
You may want to merge all dependent JS files into one before using async. Use Grunt, Gulp, Broccoli or another task runner for this.
在使用异步之前，您可能希望将所有相关的JS文件合并为一个。使用Grunt，Gulp，Broccoli或其他任务运行器。
If the script is modular and does not rely on any scripts then use async.
如果脚本是模块化的，并且不依赖于任何脚本，则使用异步。
Source: Frontend performance tips for web developers.
来源：面向Web开发人员的前端性能提示。
#3
0
DON'T USE async attribute with Angular.js script tag.
不要在Angular.js脚本标记中使用async属性。
It seems that using async attribute is harmful. Without it, expressions are evaluated on DOMContentLoaded event, but with the async attribute, there are evaluated on window load event, that is much later. Tested for Angular.js 1.0 and 1.4 in latest version of Firefox, Chrome and IE11.
似乎使用async属性是有害的。如果没有它，表达式将在DOMContentLoaded事件上进行计算，但是使用async属性时，会对窗口加载事件进行评估，这要求更晚。在最新版本的Firefox，Chrome和IE11中测试了Angular.js 1.0和1.4。
#4
0
According to this answer you might want to try to use defer instead of async, which leads to the browser to respect the loading order. E.g.:
根据这个答案，您可能希望尝试使用defer而不是async，这会导致浏览器遵守加载顺序。例如。：
<script src="scripts/vendor-including-angular.js" defer></script>
<script src="scripts/your-app.js" defer></script>
#1
2
If there's something useful you can show without angular (e.g., a pre-generated content using a headless browser) AND nothing but your script depends on it1, then there can be a solution:
如果有一些有用的东西你可以在没有角度的情况下显示（例如，使用无头浏览器预先生成的内容）除了你的脚本取决于它1之外什么都没有，那么可以有一个解决方案：
- load
angular.jsusingasync - 使用异步加载angular.js
- encapsulate you code in a function body
- 将代码封装在函数体中
- add a loop checking if
angularis defined- and sleeping for a few milliseconds if not
- 如果没有，则睡几毫秒
- otherwise, executing your code and breaking out of the loop
- 否则，执行你的代码并打破循环
- 添加一个循环，检查是否定义了角度，如果不是，则暂停几毫秒，执行代码并打破循环
This sort of busy waiting is ugly, but I can't see how to get called back when the loading finishes. It may work or not, I haven't tried it yet.
这种忙碌的等待很难看，但是当加载完成时我看不到如何回叫。它可能工作与否，我还没有尝试过。
It's quite possible that I'm doing nothing but a primitive version of what the frameworks do.
我很可能只做框架所做的原始版本。
If you don't need it to work in all browsers, then there's the defer tag. To me, defer looks like async done right.
如果您不需要它在所有浏览器中工作，那么就是延迟标记。对我来说，推迟看起来像异步做对了。
1 So I guess, users of angular-route.js or alike are out of luck. This is just a guess as I've never tried to load the two out of order.
1所以我猜，angular-route.js或者类似的用户都运气不好。这只是一个猜测，因为我从来没有试过加载这两个乱序。
#2
0
You may want to merge all dependent JS files into one before using async. Use Grunt, Gulp, Broccoli or another task runner for this.
在使用异步之前，您可能希望将所有相关的JS文件合并为一个。使用Grunt，Gulp，Broccoli或其他任务运行器。
If the script is modular and does not rely on any scripts then use async.
如果脚本是模块化的，并且不依赖于任何脚本，则使用异步。
Source: Frontend performance tips for web developers.
来源：面向Web开发人员的前端性能提示。
#3
0
DON'T USE async attribute with Angular.js script tag.
不要在Angular.js脚本标记中使用async属性。
It seems that using async attribute is harmful. Without it, expressions are evaluated on DOMContentLoaded event, but with the async attribute, there are evaluated on window load event, that is much later. Tested for Angular.js 1.0 and 1.4 in latest version of Firefox, Chrome and IE11.
似乎使用async属性是有害的。如果没有它，表达式将在DOMContentLoaded事件上进行计算，但是使用async属性时，会对窗口加载事件进行评估，这要求更晚。在最新版本的Firefox，Chrome和IE11中测试了Angular.js 1.0和1.4。
#4
0
According to this answer you might want to try to use defer instead of async, which leads to the browser to respect the loading order. E.g.:
根据这个答案，您可能希望尝试使用defer而不是async，这会导致浏览器遵守加载顺序。例如。：
<script src="scripts/vendor-including-angular.js" defer></script>
<script src="scripts/your-app.js" defer></script>