Javascript 具有深度嵌套集合的角度性能和数据绑定

我正在使用Chrome.bookmarks API为angular中的Chrome制作一个书签管理器

对于我的概念证明，我的书签页面是所有书签的单一列表。我使用了两个指令—两个指令迭代整个书签集合，一个是

集合指令

，另一个是

成员指令

。我有性能问题，我正在寻找方向

tl；博士： 模型更改要花很长时间才能更新我的视图，我做错了什么，如何才能做得更好？

以下是相关代码：

app.controller('bookmarksController', ['$scope', 'ChromeBookmarks', function($scope, chromeBookmarks) {
  chromeBookmarks.getBookmarks().then(function(bookmarkTree) {
    $scope.bookmarks = bookmarkTree;
  });
});

index.html

<div ng-controller="bookmarkController"> 
  <collection collection="bookmarks"></collection>
</div>

collection.html

<ul>
  <member ng-repeat="member in collection" member="member"></member>
</ul>

bookmark.html

<div>
  {{ node.title }} <button ng-click="open()">Live Site</button>
</div>

folder.html

<div> {{ node.title }} </div>

{{node.title}

正如您在上面我的控制器中看到的，我只有一个模型连接到范围：

$scope.bookmarks

。我只想加载这个变量一次

加载页面后，我想将侦听器附加到chrome.bookmark，这样，如果书签更改，事件就会触发，我只需要更改受影响的书签

我目前的方法是使用一个函数，该函数接受已更改的书签并在

$scope.bookmarks

中递归移动，然后用我从chrome.bookmarks API获得的更新版本替换书签的父项。该函数的基本功能如下：

$scope.bookmarks[1]。children[2]=updatedBookmark

我曾尝试将侦听器添加到我的页面，但创建书签和随后更新视图需要3秒钟（糟糕），如果我将窗口中的每个选项卡都添加书签，页面就会冻结（更糟糕）。我确实有大约2k的书签，但我仍然希望它的性能超过这个水平

我的理解是，较差的角度性能与大量观察者有关，因为

$digest

周期变得过大您认为这是造成我的性能问题的原因吗？

如果我只想修改

$scope.bookmarks

模型以触发视图更新，我真正需要多少观察者？

我知道双向数据绑定是为了保持模型和视图的同步，但我忍不住想，在我的例子中，我只想更改一点点数据（更改基于书签API事件，不一定是用户输入），双向数据绑定似乎是错的，尤其是因为

$digest

循环似乎检查了这么多数据

但是，我需要视图来正确镜像模型数据如果我放弃双向数据绑定，并使用

ngOnce

进行一次性绑定，对模型的更改是否可以呈现？

---

我只是遇到了angular的自然限制，需要使用不同的框架吗？

angular无法处理超过2000个手表，有些浏览器可以处理更多的手表，但这是一个很好的上限。缓慢更新有两种可能：

1） 您正在调用的API是否具有角度生命周期？如果是这样，请确保执行作用域。$apply（）。

---

2） 你的手表太多了。有一些代码片段，你可以在控制台中运行，如果它们很高，就会吐回手表的数量，然后考虑缓冲你的视图，以便只看到你所看到的绑定，GITHUB.COM/EnZYNET/ValualLoop.

我已经告诉视图使用范围来更新。这就是触发摘要循环并减慢速度的原因。你注册了多少手表？请尝试下面的脚本：

<li>
  <bookmark ng-if="member.url" node="member"></bookmark>
  <folder ng-if="!member.url" node="member"></folder>
</li>

app.directive('bookmark', function() {
  return {
    restrict: 'E',
    scope: {
      node: '='          
    },
    templateUrl: 'bookmark.html'
  };
});

<div>
  {{ node.title }} <button ng-click="open()">Live Site</button>
</div>

app.directive('folder', function() {
  return {
    restrict: 'E',
    scope: {
      node: '='
    },
    templateUrl: 'folder.html'
  };
});

<div> {{ node.title }} </div>