javascript - Angular ng-repeat性能问题，不断更新

Question

我遇到了 ng-repeat 的一个非常奇怪的性能问题。我的重复似乎不断发生，即使使用 track by 也是如此。

从上面的gif中可以看到，我的li元素在开发工具中不断闪烁(使用Chrome开发工具和Firefox开发工具进行测试)，这意味着DOM元素在不断更新/重复。这极大地降低了我的浏览器的性能，并且通常会使 Firefox 崩溃。

最初，只有 10 个 li 元素，但如果用户向下滚动，我会加载另外 10 个元素，因此是无限滚动。大约 3-4 次加载(30-40 li 元素)后，浏览器变得无响应。

我注意到 gif 中的第一个 li 瞬间收到 id 属性 id="sizzle1458257524957"，然后消失。我以前从未见过这个，而且它绝对不是来 self 自己的代码。不太确定这是否是罪魁祸首。

我尝试将 $watch() 添加到 postData 范围变量中，供 ng-repeat 使用，然后记录以查看它何时更新，尽管它只更新两次，所以我仍然困惑为什么 li 元素总是被更新。

可能值得注意的是，我使用的是 jQuery (2.2.0)，但不适用于这些元素上的任何事件处理程序。我的 Angular 版本是 1.5.0。

Answer 1

感谢所有为解决此问题提供帮助的人。

经过大量的调试和测试，我设法修复了它。问题在于在我的 li 元素内的文本区域上使用 ng-disabled 内的作用域函数。

这是函数:

$scope.isCommentInputEmpty = function(commentPostId) {
    if($(".newsFeedPostItem[data-id='" + commentPostId + "']").find(".feedItemNewComment .taggableInput").val() === '') {
         return true;
    } else {
        return false;
    }
};

然后我有一个带有 ng-disabled="isCommentInputEmpty(post.id)"的按钮

所以我猜测 Angular 几乎不断地运行该函数来检查文本区域以查看是否应该禁用它。

为了解决这个问题，我只需向我的文本区域添加一个模型，例如 ng-model="post.textareaModel" 并使用 ng-disabled="post.textareaModel == ' '" 如果模型为空，则禁用该按钮。