gpt4 book ai didi

javascript - Angularjs:手动引导是否存在性能问题?

转载 作者:行者123 更新时间:2023-12-03 07:50:43 25 4
gpt4 key购买 nike

我很快就会解释它,希望您能就这个问题提供解释。

我目前拥有的是传统的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 行为方式。我想知道下一种编写标记文件的方式是否存在性能问题,而我做了两处更改:

  1. 删除了 ng-app 属性
  2. 我以现在无顺序的方式对脚本进行了洗牌。

解决方案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)。

现在请考虑两个事实:

  1. 可能有很多脚本文件。
  2. 所有这些脚本也可以捆绑到一个文件中。

我想了解的是,任何解决方案中是否存在性能问题?有哪个更理想吗?

最佳答案

不,这对性能没有影响(至少 Angular 没有记录过)。第二种解决方案只是引导 Angular 应用程序的另一种方法(在我看来更好)。

<小时/>

您为什么要这样做?

有时您需要在引导应用程序之前做一些工作,因此同步脚本将无法工作。例如,如果您使用 requireJS、webpack 等,您就会这样做。它还可以让您更好地控制应用程序实际启动的时间。

我建议将引导移动到文件末尾,这样您就不会依赖于 ready 函数是异步的这一事实,这使得它神奇地工作,即使您之前调用过它所有脚本

关于javascript - Angularjs:手动引导是否存在性能问题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35002531/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com