0

在我们的应用程序中，我们有几层嵌套指令。为了加快摘要周期，我们删除了一些对静态数据具有数据绑定的顶级指令。相反，我们只是从静态数据中生成了 html，并对其进行了编译。但是，在这样做之后，我们开始在 Firefox 中收到无响应的脚本警告。这个生成的 html 的编译时间太长了。

我希望能够更好地了解这两种不同场景中的编译过程，以便我们将来能够正确优化。这是一个非常简化的小提琴，它显示了问题。这是它的重要部分：

var repeaterHtml = '<div repeater="allData"></div>';
var staticHtml = '';
angular.forEach($scope.allData, function(currData, currIndex) {
    staticHtml += '<div dir1="allData[' + currIndex + ']"></div>';
});
$element.append(staticHtml);

与仅使用指令staticHtml相比，使用 编译所需的时间要长得多。repeater为什么是这样？纯粹是因为有更多的html要通过吗？当角度编译repeater指令时，它不必像我手动进行的那样进行编译吗？当最终的 DOM 完全一样时，是什么repeater指令使它编译得如此之快？

我很感激对此的任何见解。谢谢。

4

1 回答 1

0

编辑- 你的repeater指令没有什么特别的 - 它只是ng-repeat. 要了解为什么repeater比DOM从控制器操作更快，您需要了解ng-repeat工作原理、内容compilation和linking阶段。AFAIR Miško Hevery - 在这里谈论这个http://www.youtube.com/watch?v=WqmeI5fZcho

您在示例中所做的几件事导致它比角度慢ng-repeat

  1. 操纵-不要那样DOM做！这种做法非常糟糕！在这种情况下更快的原因是因为它编译一次并且只为数组中的每个元素生成重复元素的副本。在您的情况下，您是在渲染后从字符串创建元素，然后通过将元素附加到 来修改结构，之后，您正在针对范围编译刚刚创建的元素，这再次修改了! 您只需要编译一次元素，并将其附加到父级（但在指令中执行 - 而不是在控制器中）。controllerng-repeatDOMDOMDOMdocumentdocument's DOM

  2. 如果你想更快地实现ng-repeat（但功能更少——比如自动更新），那么编写一个指令，它可以做几乎相同的事情，但使用单个template元素并document's DOM只修改一次。

如果您想更好地了解这是如何工作的，我建议您阅读ngRepeatDirective https://github.com/angular/angular.js/blob/master/src/ng/directive/ngRepeat.js

于 2013-07-09T01:15:48.897 回答