Question

我有一个非常大的JSON（5000个键，每个键具有5个值），我想知道是否有更好的方法来提高此JSON的性能。例如，我在Drupal 7中将AngularJS与后端一起使用。

我的观点

  <ul class="list-group border-0">
                 <form class="form-inline m-3">
                    <div class="col-sm p-0 float-left w-50">
                      <label class="col-form-label text-primary lead form-group" for="inputsm" for="name" for="inlineFormInput">Year: </label>
                    </div>
                    <div class="col-sm p-0 float-left w-50">
                      <input class="form-control" ng-model="searchYear"/> 
                    </div>
                 </form> //I have more filters than this one...
                  <li class="list-group-item border-0" ng-repeat="item in filterData = (informes | filter:{year: searchYear}) | limitTo:10:10*(currentPage-1)">
                     <div class="wrapper">
                        <div class="informes">
                          <a href="#!/node-informes" ng-value="{{item.nid}}">
                            <p class="text-left">
                               <p ng-click="nodeID(item)">{{item.title}}</p>
                            </p>
                          </a>
                        </div>
                    </div>
                </li>      
              </ul>

还有JS

    informes.factory('InformesFtry', ['$http', function ($http) {
  return {
      getAll: function () {
        return $http.get('https://myjsonurl/json');
      }
   };
}]); 

 informes.controller('InformesCtrl', ['drupal', '$rootScope', '$scope', '$http', 'InformesFtry', '$localStorage', function(drupal, $rootScope, $scope, $http, InformesFtry, $localStorage) {

    InformesFtry.getAll().success(function(rows) {
        $scope.informes = (rows, function(items) {
            return rows.nodes;
        })();
        $scope.output();
    });

    $scope.loading = true;
    $scope.loaded = false;
    $scope.totalItems = [];
    $scope.currentPage = 1;
    $scope.itemsPerPage = 10;

    $scope.output = function() {
        $scope.loading = false;
        $scope.loaded = true;
        $scope.totalItems = $scope.informes.length;
        $scope.viewby = 10;
        $scope.maxSize = 5;
        $scope.itemsPerPage = $scope.viewby;
        $scope.displayItems = $scope.informes.slice(0, 10);
        var currentPage = $scope.currentPage;

        $scope.setItemsPerPage = function(num) {
            $scope.itemsPerPage = num;
            $scope.currentPage = 1;
        }

        $scope.pageChanged = function() {
            var startPos = ($scope.currentPage - 1) * 10;
            $scope.displayItems = $scope.informes.slice(startPos, startPos + 10);
        };

    }

    $scope.nodeID = function(item) {
     $localStorage.nid = item.nid;
     console.log("nodeID");
    }
}]);

我尝试从后端分离这些文件并从控制器进行迭代，但是从视图进行查询后，以JSON进行搜索更好的性能，就像我正在做的事情相反。搜索无处不在，但我无法解决这个问题。

我考虑过从视图中查询后使用json。

我不知道该怎么实现。除非使用某种方法在调用JSON之前进行过滤，否则分离文件将得到相同的结果。预先感谢。

Answer 1

是的，绝对有办法提高性能。您可以通过将过滤器逻辑从ng-repeat移到控制器来提高性能。然后更新要在控制器中重复的项目列表。这是一篇很好的文章，正好讨论了这一点。

https://toddmotto.com/use-controller-filters-to-prevent-digest-performance-issues/

简要说明为何有帮助的原因是，即使您的ng-repeat的摘要值从未更改，也将继续对其摘要周期的更改进行处理，这意味着它将每次过滤5,000条记录。您可以将过滤逻辑移至控制器，然后在过滤器上使用ng-change来触发列表更新（如年份输入）。

因此，实现如下所示：

JavaScript：

$scope.updateData = function(){
    var filteredData = $filter('filter')($scope.informes, {'year': $scope.searchYear});
    filteredData = $filter('limitTo')(filteredData, 10, (10 * (currentPage - 1)));
    $scope.filteredData = filteredData;
}

HTML：

<!-- Your Inputs should have ng-change -->
<input class="form-control" ng-model="searchYear" ng-change="updateData()"/> 

<!-- Remove filters from html and loop over your filtered list -->
<li class="list-group-item border-0" ng-repeat="item in filteredData">

编辑：添加了其他说明和示例代码更改。

用户进行过滤后调用JSON

1 个答案: