Question

出于性能目的，我想从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 ......

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

真实的重复比这里的例子要复杂得多，我在页面上达到了约1500名观察者。如果我删除它的内容（如例子中），我会下降到约200名观察者。那么我该如何优化呢？为什么::似乎没有用？

谢谢你启发我......

Answer 1

很难弄清楚你的具体案例中的确切问题是什么，也许提供一个孤立的例子是有道理的，这样其他人就可以提供帮助。

结果可能取决于您如何统计观察者。我从获得了解决方案。

以下here按预期工作（在::中添加或删除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;
  });
};

希望这有帮助。

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

1 个答案: