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

标签 javascript angularjs

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

我目前拥有的是传统的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/

相关文章:

javascript - 无法在 View 中显示数据

javascript - 如何处理字符串中的一些 HTML 标签(不是全部)?

javascript - 使用 angularjs 表达式来检查复选框

javascript - Angular 面包屑 "10 $digest() iterations reached. Aborting! "

javascript - 如何从js获取zk元素id

JavaScript 重新加载整个页面

javascript - 流类型,属性前面的 `+`符号是什么意思?

javascript - 在特定条件后启用 HTML 按钮

javascript - ng-model 未捕获 ng-repeat 中的值

javascript - Aurelia 是否有 AngularJS $watch 替代方案?