我很快就会解释它,希望您能就这个问题提供解释。
我目前拥有的是传统的AngularJS应用程序,而我的body中的某个div包含ng-app属性,并且所有脚本都位于body的end 。
解决方案1:
<body>
<div ng-app="myApp">
<!--rest of the app's markup is here-->
</div>
<!--scripts at the end of the body-->
<script ...></script> <!--app.js/entrypoint-->
<script ...></script> <!--configs-->
<script ...></script> <!--services-->
<script ...></script> <!--controllers-->
</body>
请注意,由于脚本的顺序很重要,我手动设置它的顺序。
现在我的问题是关于加载页面时 Angular 行为方式。 我想知道下一种编写标记文件的方式是否存在性能问题,而我做了两处更改:
- 我删除了 ng-app 属性
- 我以现在无顺序的方式对脚本进行了洗牌。
解决方案2:
<body>
<div> <!--No ng-app attribute!!-->
<!--rest of the app's markup is here-->
</div>
<!--manual bootstrapping-->
<script>
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
</script>
<!--scripts at the end of the body without ordering-->
<script ...></script>
<script ...></script>
<script ...></script>
<script ...></script>
</body>
这里的主要思想是消除手动排序文件的需要,并稍后引导 Angular 应用程序(通过在文档加载时手动添加 ng-app)。
现在请考虑两个事实:
- 可能有很多脚本文件。
- 所有这些脚本也可以捆绑到一个文件中。
我想了解的是,任何解决方案中是否存在性能问题?有哪个更理想吗?
最佳答案
不,这对性能没有影响(至少 Angular 没有记录过)。第二种解决方案只是引导 Angular 应用程序的另一种方法(在我看来更好)。
<小时/>您为什么要这样做?
有时您需要在引导应用程序之前做一些工作,因此同步脚本将无法工作。例如,如果您使用 requireJS、webpack 等,您就会这样做。它还可以让您更好地控制应用程序实际启动的时间。
我建议将引导移动到文件末尾,这样您就不会依赖于 ready
函数是异步的这一事实,这使得它神奇地工作,即使您之前调用过它所有脚本
关于javascript - Angularjs:手动引导是否存在性能问题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35002531/