使用脚本async>用Angular.js标记

Using the <script async> tag with Angular.js

本文关键字：Angular js 标记 脚本 async      更新时间：2023-09-26

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

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

明显的问题是执行顺序。如预防:

Uncaught ReferenceError: angular is not defined
https://www.igvita.com/2014/05/20/script-injected-async-scripts-considered-harmful/

如果有一些有用的东西你可以在没有angular的情况下显示(例如，使用headless浏览器预生成的内容)，除了你的脚本之外没有任何东西依赖于它1，那么可以有一个解决方案:

  • 使用async加载angular.js
  • 将你的代码封装在函数体中
  • 增加一个循环检查，如果angular被定义
    • 和休眠几毫秒，如果不是
    • 否则，执行代码并跳出循环

这种忙碌的等待是丑陋的，但我不知道如何在加载完成时被回调。我还没试过呢。

很有可能我所做的只是框架所做的一个原始版本。

如果你不需要它在所有浏览器中工作，那么有defer标签。对我来说，defer看起来像async做得对。

1所以我猜angular-route.js或类似的用户运气不好。这只是一个猜测，因为我从来没有尝试过按顺序加载这两个

根据这个答案，您可能想尝试使用defer而不是async，这会导致浏览器尊重加载顺序。例如:

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

您可能希望在使用async之前将所有依赖的JS文件合并为一个。使用Grunt, Gulp, Broccoli或其他任务运行器。

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

来源:web开发人员的前端性能提示。

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

似乎使用异步属性是有害的。没有它，表达式在DOMContentLoaded事件上进行评估，但是使用async属性，在窗口加载事件上进行评估，这是稍后的事情。在最新版本的Firefox, Chrome和IE11中测试了Angular.js 1.0和1.4。

相关文章：