angularjs – 无法减少ng-repeat中的观察者数量

发布时间：2020-12-17 17:16:43 所属栏目：安全来源：网络整理

导读：出于性能目的,我想从我的ng-repeat中删除双重数据绑定(因此,关联的观察者). 它加载30个项目,这些数据一旦加载就是静态的,因此不需要双重数据绑定. 问题是观察者的数量在该页面上保持不变,无论我怎么做. 让我们说： div ng-repeat='stuff in stuffs' // nothi

出于性能目的,我想从我的ng-repeat中删除双重数据绑定(因此,关联的观察者).

它加载30个项目,这些数据一旦加载就是静态的,因此不需要双重数据绑定.

问题是观察者的数量在该页面上保持不变,无论我怎么做.

让我们说：

<div ng-repeat='stuff in stuffs'>
   // nothing in here
</div>

观察者数量为211(该页面上还有其他绑定,不仅仅是ng-repeat)

<div ng-repeat='stuff in ::stuffs'>
   // nothing in here
</div>

观察者数量仍然是211(如果我理解它应该是210),但是等待：

<div ng-repeat='stuff in ::stuffs'>
    {{stuff.id}}
</div>

观察者数量现在是241(好的,211个观察者30个东西* 1个观察者= 241个观察者)

<div ng-repeat='stuff in ::stuffs'>
    {{::stuff.id}}
</div>

看守人数仍然是241！是::不应该删除相关的观察者？

<div ng-repeat='stuff in ::stuffs'>
    {{stuff.id}}  {{stuff.name}}  {{stuff.desc}}
</div>

还是241 ……

这些例子确实是在我的应用程序中做出的,所以这些数字也是真实的.

实际的ng-repeat比这里的例子复杂得多,我在页面上达到了约1500名观察者.如果我删除它的内容(如例子中),我会下降到约200名观察者.那么我该如何优化呢？为什么::似乎不起作用？

谢谢你赐教……

解决方法

在你的特定情况下很难弄清楚确切的问题是什么,也许提供一个孤立的例子是有意义的,这样其他人就可以提供帮助.

结果可能取决于您如何计算观察者.我从here开始采取解决方案.

这是a Plunker example按预期工作(添加或删除::在ng-repeat中)：

HTML

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <script data-require="angular.js@1.5.6" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body ng-controller="mainCtrl">
    <div>{{name}}</div>

    <ul>
      <li ng-repeat="item in ::items">{{::item.id}} - {{::item.name}}</li>
    </ul>

    <button id="watchersCountBtn">Show watchers count</button>
    <div id="watchersCountLog"></div>
  </body>
</html>

JavaScript的

angular
  .module('app',[])
  .controller('mainCtrl',function($scope) {
    $scope.name = 'Hello World';

    $scope.items = [
      { id: 1,name: 'product 1' },{ id: 2,name: 'product 2' },{ id: 3,name: 'product 3' },{ id: 4,name: 'product 4' },{ id: 5,name: 'product 5' },{ id: 6,name: 'product 6' },{ id: 7,name: 'product 7' },{ id: 8,name: 'product 8' },{ id: 9,name: 'product 9' },{ id: 10,name: 'product 10' }
    ];
  });

function getWatchers(root) {
  root = angular.element(root || document.documentElement);
  var watcherCount = 0;

  function getElemWatchers(element) {
    var isolateWatchers = getWatchersFromScope(element.data().$isolateScope);
    var scopeWatchers = getWatchersFromScope(element.data().$scope);
    var watchers = scopeWatchers.concat(isolateWatchers);
    angular.forEach(element.children(),function (childElement) {
      watchers = watchers.concat(getElemWatchers(angular.element(childElement)));
    });
    return watchers;
  }

  function getWatchersFromScope(scope) {
    if (scope) {
      return scope.$$watchers || [];
    } else {
      return [];
    }
  }

  return getElemWatchers(root);
}

window.onload = function() {
  var btn = document.getElementById('watchersCountBtn');
  var log = document.getElementById('watchersCountLog');

  window.addEventListener('click',function() {
    log.innerText = getWatchers().length;
  });
};

希望这可以帮助.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!