AngularJS性能: How to update only the scopes I know need to be updated?

Question

我有一个包含两件事的 Angular 范围:

• 一个包含 10k 行的巨型表格，需要一秒钟才能渲染
• 一些小的额外信息位于固定的覆盖标题栏中

根据您向下滚动页面/表格的距离，我必须更新标题中的小信息位之一；您可以将其视为滚动距离的百分比计数器。

为了获取当前的滚动位置，我编写了一个指令(您也可以找到它 here ):

app.directive "setWindowScroll", ->
  restrict: "E"
  scope:
    setVariable: "="

  link: (scope) ->
    $(window).scroll ->

      scope.$apply ->
        scope.setVariable = $(window).scrollTop()

我的问题是，这使得在表格中滚动*明显变慢*。这是因为我用指令写入的可验证对象位于范围内的额外信息中，并且当调用我的 $apply 时，更改它似乎会导致 Angular 对整个表进行脏检查以了解更改.

我知道这种滚动永远不会改变我表格中的任何内容，并且希望限制我的 $apply 影响我网站的标题部分。

如何使有 Angular 的不脏检查 table ？

Answer 1

Angular 在称为摘要的进程下进行脏检查。当您调用 $scope.$digest() 时，它将传播到 $scope 的每个子作用域。要通知 Angular 有关更改，您通常会执行 $scope.$apply()。在 $apply() 的末尾， Angular 对根范围进行摘要，这会触发应用程序中每个范围的摘要。因此，为了避免在大表范围内进行摘要，您应该确保它不是额外信息范围的子级，而不是在指令中执行 $scope.$apply() ，您可以执行$范围.$digest()。这可能有点令人困惑，所以我做了一个尝试来展示差异的小工具。打开控制台并查看滚动事件和按钮单击的差异:

http://plnkr.co/edit/45gKhAIt0DrozS7f0Bz2?p=preview

// this will only cause a digest in the current scope and its children
angular.element($window).bind('scroll',function(){
  $scope.scrollY = $window.scrollY;
  $scope.$digest();
})

// this will cause a digest in every scope
angular.element($window).bind('scroll',function(){
  $scope.scrollY = $window.scrollY;
  $scope.$apply();
})

综上所述，这是一件非常不寻常的事情 - 并且由于多种原因可能不是一个好主意( Angular 不能很好地扩展数千个元素，你不能使用任何 Angular 事件指令( ngClick 等)，因为它们都包含在 $apply 中) - 但如果您无法在服务器端呈现表格，您可以尝试一下。