Angular Js性能和加载时间

Question

我正在使用 Laravel 5.2 作为 API 开发 Angular Js web 应用程序，我在性能方面遇到了很大的问题，特别是在主页的加载时间方面。

我有一个从数据库中获取 5 个部分的请求，每个部分有一个或两个项目，每个项目有很多评论。我循环遍历部分，然后遍历项目，然后注释以通过嵌套的 ng-repeat 指令呈现它。

我还有一个过滤器列表，另一个朋友每个人都有自己的请求，ng-repeat 也可以呈现它。

这么庞大的数据使用 Angular JS，我该如何提高它的性能？

我在主模块的依赖中也有大约20个模块，有没有更好的方法只在我需要的时候加载这个模块？

备注：

Angularjs版本1.5.1
Angular Js 和 jQuery 通过 CDN 加载
所有其他 js 文件由 GULP.js 连接在一个文件中，大约 66000 行代码
主模块的依赖数组中有25个模块
加载时间约为25-35秒

这是导致问题的我的主页部分的代码：

        <div ng-class="{'col-sm-6':currentUser,'col-sm-9':!currenUser}" fc-loading="getCoupons" class="allCoupons lbm">
            <section class="fc-section text-center fc-direction" ng-init='current="all"'>
                <button type="button" class='btn  btnp btnm0 srm' ng-class='{"btnr":current=="all"}' ng-click='updateCoupons();current="all"' name="button">كل الكوبونات</button>
                <button type="button" class='btn btnp  btnm0' ng-class='{"btnr":current=="my"}' ng-click='updateCoupons("user");current="my"' name="button">الكوبونات المخصصة لك </button>
            </section>

                <div  ng-repeat='(key,section) in coupon_sections' class="{{key}} fc-programs">
                    <div class="header">
                        <div class="clearfix">
                            <h3 class="pull-left">{{::section.type}}</h3>
                            <ul ng-init="active = 'newset'" class="pull-right">
                                <li ng-click="sortCoupons(1,key); active='newset'" ng-class="{active:active == 'newset'}"><span>{{::'sort_by.newest'| translate}}</span></li>
                                <li ng-click="sortCoupons(2,key); active='oldset'" ng-class="{active:active == 'oldset'}"><span>{{::'sort_by.oldest'| translate}}</span></li>
                                <li ng-click="sortCoupons(3,key); active='popular'" ng-class="{active:active == 'popular'}"><span>{{::'sort_by.popular'| translate}} </span></li>
                            </ul>
                        </div>
                    </div>
                    <div class="fc-section">
                      <p>
                        {{::section.description}}
                      </p>

                    </div>
                    <div class="lucky_hour centerContainer" ng-if='key =="luckyHour"' ng-init='getTimeRemaining("December 31 2016 23:59:59 GMT+0200")'>
                      <div class="centerContent">
                        <ul>
                          <li class="hh" ng-repeat='hour in hours track by $index'>{{hour}}</li>
                          <li class="dots">:</li>
                          <li class="mm" ng-repeat="minute in minutes track by $index">{{minute}}</li>
                          <li class="dots">:</li>
                          <li class="ss" ng-repeat="second in seconds track by $index">{{second}}</li>
                        </ul>
                      </div>
                    </div>
                    <section class="fc-section text-center" ng-if="!section.coupons.length ">
                        <p class="title">{{::'no_coupons'| translate}}</p>
                    </section>
                    <div ng-repeat="coupon in section.coupons">
                        <fc-coupon ng-init='showCarousel();'></fc-coupon>
                    </div>
                    <div class="text-center" ng-if="section.coupons.length ">
                        <button  class="btnloadmore icon-plus-circled btni lbm" ng-click="loadMore(key)">{{::'load_more'| translate}}</button>
                    </div>


                </div>


        </div>

这是fc-coupon模板

<div class="fc-coupon lbm" id='{{coupon.coupon_data.slug}}'>

    <div class="header bb">
      <div class="rippon">
{{::coupon.coupon_data.type}}      </div>
        <img  style="background-image: url('{{::absolute_url+'images/brands/100x100/'+ coupon.brand_data.logo }}')" />

        <h3>{{::coupon.brand_data.name}}</h3>
        <fc-stars   rating="{{::coupon.coupon_data.rate}}" ></fc-stars>
        <div class="pull-right">
            <!-- <label>{{::'available_for'| translate}}</label> -->
            <div class="fc-badge sPadges" ng-repeat="customer in ::coupon.coupon_data.users_type">
                <img uib-tooltip="{{:: 'available_for' | translate}} {{::customer.name.name}}" ng-src="{{::absolute_url}}/images/customer-types/50x50/{{customer.image}}">
            </div>


        </div>

    </div>
    <div class="sp" ng-if='key !="challenges"'>
      <h4>{{::coupon.coupon_data.title}}</h4>
      <p hm-read-more
         hm-text="{{:: coupon.coupon_data.description }}"
         hm-limit="100"
         hm-more-text="{{::'read_more'|translate}}"
         hm-less-text="{{::'read_less'|translate}}"
         hm-dots-class="dots"
         hm-link-class="links" class="sbm mtp "></p>
    </div>
    <div class="sp mtp" ng-if='key =="challenges"'>
      <p>
        <i class="fc-red icon-award"></i> <span class="fc-purple srm">التحدي </span>
        {{::coupon.coupon_data.challenges.name}}
      </p>
      <p>
        <i class="fc-red icon-gift"></i> <span class="fc-purple srm">الجائزة </span>
          <span>{{::coupon.coupon_data.type}}</span>
      </p>

    </div>
    <div class="couponImage">
        <div class="fc-overlay centerContainer">
            <div class="centerContent">
                <i ng-if="coupon.coupon_data.in_wallet" class="icon-heart"></i>
                <i ng-if="!coupon.coupon_data.in_wallet" ng-click="addToMyCoupons(coupon.coupon_data)" class="icon-heart-empty"></i>

                <label>{{::coupon.coupon_data.no_of_users_in_wallet }}</label>

            </div>
            <div class="couponFooter">
                <a href="{{::absolute_url}}/{{lang}}/coupon/{{coupon.slug}}">{{::'details'| translate}}</a>
                <ul class="socials">
                    <li><span ng-click="shareCoupon(coupon.coupon_data.slug,'facebook')" spantarget="_blank" class="icon-facebook"></span> </li>
                    <li><span ng-click="shareCoupon(coupon.coupon_data.slug,'twitter')" class="icon-twitter"></span> </li>
                    <li><span ng-click="shareCoupon(coupon.coupon_data.slug,'gplus')" class="icon-gplus"></span> </li>
                </ul>
            </div>
        </div>
        <img ng-src="{{::absolute_url}}/images/coupons/747x390/{{coupon.coupon_data.image}}"/>
    </div>
    <div class="couponDetails sp">

        <div class="owl-carousel mbm">
            <div class="item " ng-repeat="friend in ::coupon.coupon_data.coupon_users">
                <div style="background-image: url('{{::absolute_url}}/images/users/75x75/{{friend.picture}}')" class="roundImages mProfilePics"></div>
            </div>


        </div>
        <div   ng-init="coupon.coupon_data.isMapCollapsed =true;coupon.coupon_data.isMapOpened=false">
        <div class="clearfix  bb mbp mtp bt sbm" >
            <div class="pull-left srm"   ng-click="openBranches(coupon.coupon_data)">
                <i class="icon-location"></i>
                <label>{{::'branches'| translate}} {{::coupon.coupon_data.no_of_branches}}</label>
            </div>

            <div class="pull-left">
                <i ng-class="{'icon-cancel':coupon.coupon_data.feed_w_estafeed_id ==null,'icon-ok':coupon.coupon_data.feed_w_estafeed_id != null}"></i>
                <label>{{::'benefit'| translate}}</label>
            </div>
            <div class="pull-right">
              <i class="icon-share"></i>

              <label for="">{{::'share'| translate}} :</label>
                <i class="icon-facebook" ng-click='shareCoupon(coupon.coupon_data.slug,"facebook")'></i>
                <i class="icon-twitter" ng-click='shareCoupon(coupon.coupon_data.slug,"twitter")'></i>
            </div>
        </div>
            <div class="fc-map " uib-collapse="coupon.coupon_data.isMapCollapsed" >

            </div>
        </div>
        <div class="clearfix">

          <div class="buttons add_to_my_coupones pull-right">
              <button ng-if="coupon.coupon_data.in_wallet  " type="button" class="btn btnr btnp btni" ng-click='couponConditions(coupon.coupon_data.slug)'>{{::'in_my_coupons'| translate}}</button>
              <a ng-if="!coupon.coupon_data.in_wallet && key=='challenges' " href='{{absolute_url}}/{{lang}}/coupons/{{coupon.coupon_data.slug}}/{{coupon.coupon_data.challenges.title}}'  class="btn btnr btnp btni" >ابدء التحدي</a>
              <button ng-if="!coupon.coupon_data.in_wallet && key!='challenges'" analytics-on="click" analytics-event="addToMyCoupons" analytics-properties="{coupon_id:{{coupon.coupon_data.coupon_id}}}" ng-click="addToMyCoupons(coupon.coupon_data)" class="btn btnr btnp btni icon-heart">{{::'add_to_my_coupones'| translate}}</button>
          </div>
          <div class="pull-left">
            <i class="icon-calendar"></i>
            <label class="srm">{{::'available_to' | translate}}</label>
            <!-- <fc-countdown date='coupon.coupon_data.available_to.date'></fc-countdown> -->

          </div>
        </div>

        <div class="fc-couponComments" >
            <!-- <span>{{coupon.comments.length}} {{::'comments'|translate}}</span> -->
            <button  ng-init="isCollapsed = true;" ng-click="isCollapsed = !isCollapsed;"><i class="icon-comment-1"></i> </button>
            <ul uib-collapse="isCollapsed" >
                <li>
                    <img src="{{ currentUser?absolute_url+'/images/users/50x50/'+currentUser.picture:absolute_url+'/images/user.png'}}"/>
                    <div class="userComment">
                        <textarea ng-model="addComment.newComment" ng-enter="sendComment(coupon)"></textarea>
                    </div>
                </li>
                <li ng-repeat="comment in coupon.coupon_data.comments track by $index">
                    <img ng-src="{{::absolute_url}}/images/users/50x50/{{::comment.user.picture}}"/>
                    <p>
                        <label>{{::comment.user.firstname}} {{::comment.user.lastname}}</label>
                        <span> {{::comment.comment}} </span>
                        <label>{{::comment.created_at}}</label>
                    </p>
                </li>

            </ul>
        </div>
    </div>

</div>

家庭控制器 js :

var url = user ? "user/home/coupons" : "home/coupons";

fcDB.query(url, "GET", data).success(function(res) {
    console.log('home', res);
    $scope.coupon_sections = res;
});

Answer 1

您的绑定似乎太多了。回到 Angular 1.2 时代，我记得页面上最多有 2000 个绑定是一个经验法则。现在已经上升了，但我怀疑它呈指数级增长。

你有 5 个部分，每个部分都有许多 ng-click 绑定，几个嵌套的 ng-repeats 乘以这个，然后每个优惠券的评论数量不确定。

您可以通过几种不同的方式处理所有这些问题。其中一些：

加入点击监听器，
延迟加载嵌套的评论、时间等，如果可能的话，
也呈现为 html 这些社交份额，
预翻译内容，
一次性绑定比现在更多，
减少依赖。

例如您可以有一个顶级 ng-click 而不是每个部分十几个（+ 在那些 fc-coupon 重复中可能更多）。因此，创建一个顶级 ng-click，并让该函数找出其预期目标并采取相应行动。我会说你可以节省一点时间，但那里并不重要。

延迟加载嵌套重复 - 即。不要立即渲染它们。当您最初渲染这些部分时，您会继续渲染那些 hours、minutes 和 seconds。不知道为什么，但看起来你确实做了很多这样的事情。在呈现主要内容之前甚至不显示这些内容。只有一种方法是使用 ng-if 开关隐藏整个块，当你知道你已经加载并渲染了最初的 5 个部分时，翻转一个（或所有）开关并等待它们也被渲染。您甚至可以隐藏那些 ("Loading comments...")，直到您知道它们是通过单个 css 翻转呈现的。此外，也许您可以一次一个地完成它们。首先完全解决顶部部分，然后是第二个，然后是第三个等等

请记住，很多性能都在感知性能。

我看到您有许多与功能绑定的社交分享。为什么不直接将它们呈现为简单的 HTML？根据这些优惠券，您可以再次删除很多绑定。

我看到您使用 ng-translate - 它引入了更多绑定。如果您事先知道用户的语言（即设置），也许您可以预先翻译每种语言的模板？例如。如果用户最初选择 english，他将加载名为 home-en.html 和 fc-coupon-en.html 的页面，而不是一个通用页面。虽然不知道这是否可行，但考虑到您有很多嵌套内容，它可能会很有用。而且您甚至不必手动完成，我敢打赌您可以编写一个一次性脚本，您可以在其中编写这样的源模板，并且额外的构建步骤会在构建时为所有这些生成每种语言的模板.

也尝试一次性绑定嵌套内容。例如。 ng-repeat="hour in ::hours" 可能有点帮助。根据需要绑定时、分、秒的次数，页面中可能要引入上千个绑定。

如果可以，减少依赖。例如。我看到你使用了 "read-more" 模块。也许你可以没有它。只需使用 css 省略号。并有第二个点击侦听器，可以根据需要找到目标部分和 extends/collapses。我敢打赌这就是原始模块所做的，但你的将是一次性顶级点击侦听器，而不是必须整理的每项 angular 绑定。

现在，这些都是猜测，因为您没有显示实际项目的数量以及它们的具体作用。因此，请选择其中一项建议，然后尝试一下，或者提出一个包含更多详细信息的新问题。

就个人而言，我认为延迟加载所有内容会给您带来最大的 "perceived" 性能。

Angular Js性能和加载时间

Angular Js performance and load time

javascript

performance

performance-testing

angularjs

angularjs-directive