Question

我正在使用单页面应用程序并使用AngularJS。在我的应用程序中，所有DOM元素都使用ajax加载，因此我使用了ng-repeat和绑定表达式的数量，这就是我的页面需要很长时间才能加载页面的原因。请帮助解决我的问题。

应用

angular.module('tabApp', []);

服务

angular.module('tabApp')
.service('mrcService', ['$http', function($http) {
    this.categories = [];
    this.getCategories = function() {
        return $http({
            method: "GET",
            url: 'mrcdata.aspx'
        }).success(function(data) {
            categories = data;
            return categories;
        });
    };
}]);

控制器

angular.module('tabApp')
.controller('dynamicContentCtrl', ['$scope', 'mrcService', function($scope, mrcService) {
    $scope.categories = [];
    mrcService.getCategories().then(function(response) {
        $scope.categories = response.data.Categories;
    });
}]);

HTML代码

<div class="main-content container" ng-controller="dynamicContentCtrl">
    <div ng-controller="desktopTabCtrl" class="row desktop-content">
            <div class="col-md-3 col-sm-4 category-items">
              <nav class="nav categories-nav">
                <ul class="categories">
                  <li ng-repeat="category in categories" class="category" ng-class="{ active: isSet(category.CategoryRank) }">
                    <a href="javascript:void(0)" ng-click="setTab(category.CategoryRank)" class="text">
                        <span>{{category.CategoryTitle}}</span>
                    </a>
                    <span class="arrow-right"></span>
                  </li>
                  <li class="category static">
                    <C5:LocalLiteral runat="server" Text="mrc.home.learnmoretab"/>
                  </li>
                </ul>
              </nav>
            </div>
            <div class="col-md-9 col-sm-8 document-tiles">
              <div ng-repeat="category in categories" ng-show="isSet(category.CategoryRank)" class="tile-container">
                <div class="row">
                  <div ng-repeat="document in category.Documents" class="col-md-6 col-sm-6 tile">
                    <div class="tile-content row">
                      <div class="col-md-12 col-sm-12">
                          <div class="thumbNail-content col-md-6 col-sm-6">
                            <p class="title">{{document.DocumentTitle}}</p>
                            <p class="audience">{{document.Audience}}</p>
                          </div>
                          <div class="thumbNail-image col-md-6 col-sm-6">
                            <img alt="Thumb Nail" src="{{document.ThumbnailUrl}}">
                          </div>
                      </div>
                      <div class="col-md-12 col-sm-12">
                        <div class="download-section">
                            <select class="lang-dropdwn" 
                                ng-model="document.DefaultDialectId" 
                                ng-change="selectLang(document , document.LocalizedDocuments , document.DefaultDialectId )">
                                <option ng-repeat="localizedDocument in document.LocalizedDocuments"
                                    value="{{localizedDocument.DialectId}}">
                                    {{localizedDocument.LanguageName}}
                                </option>
                            </select>
                        </div>
                        <div class="button-conatiner" ng-init="document.DownloadLink = document.DocumentId +':'+document.DefaultLocalizedDocumentId">
                            <a class="button" href="documentdownloader.aspx?documentid={{document.DownloadLink}}"><C5:LocalLiteral runat="server" Text="basket.esddelivery"/></a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

Answer 1

以下是您可以尝试提高性能的几个选项。

<强> 1。您应该在ng-repeats

中设置track by

为了最大限度地减少DOM元素的创建，ngRepeat使用一个函数来“跟踪”集合中的所有项及其相应的DOM元素。例如，如果项目被添加到集合中，则ngRepeat将知道所有其他项目已经具有DOM元素，并且不会重新呈现它们。

默认跟踪功能（按标识跟踪项目）不允许数组中的重复项目。这是因为当存在重复项时，不可能在集合项和DOM元素之间保持一对一的映射。

如果您确实需要重复重复项目，则可以使用跟踪表达式替换默认跟踪行为。

例如，您可以使用特殊范围属性$ index为集合中每个项目的索引跟踪项目。

示例：

<div ng-repeat="item in items track by $index">{{item.name}}</div>

<强> 2。您可以使用单向数据绑定到您知道不会更改的项目。这将禁用这些项目的观察者并提高性能。例如：

而不是这个

{{item.name}}

使用此

{{::item.name}}

请记住，这是一种单向绑定，如果您的范围发生了变化，则无法更新这些值，但您需要手动更新。

第3。尽量限制ng-show和ng-hide属性，因为这会增加更多观察者并导致效果不佳。

使用AngularJS实现的单页应用程序需要很长时间才能加载页面

1 个答案: