AngularJS性能：如何更新只有我知道的范围需要更新？ [英] AngularJS performance: How to update only the scopes I know need to be updated?

问题描述

我有一个包含两件事情的角度范围：

I have an angular scope containing two things:

• 在巨表用10k行，需要一个第二渲染


• 部分的小的额外在一个固定的覆盖标题栏信息在它的上面

• a giant table with 10k rows that takes a second to render
• some small extra information on top of it in a fixed overlay header bar

根据您多远向下滚动页面/桌，我必须更新在头小信息比特之一;你可以把它看成是一个计数器％你多远滚动。

Depending on how far you have scrolled down the page/table, I have to update one of the small info bits in the header; you can think of it as a % counter how far you've scrolled.

要获得当前的滚动位置，我已经写了指令（你也可以找到它这里）：

To get the current scroll position, I have written a directive (you can also find it here):

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

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

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

我的问题是，这使得在表中各地滚动U *的 nsuably慢的*。这是因为，我写信给我的指令中veriable是在范围外的信息，这似乎引起角度来改变脏检查整个表的变化，当我的 $适用被调用。

My problem is that this makes scrolling around in the table u*nsuably slow*. This is because the veriable I write to with my directive is in the extra-info in the scope, and changing that seems to cause angular to dirty-check the whole table for changes when my $apply is called.

我知道，在我的表此滚动永远不会改变什么，想限制我的 $适用来影响我的网站的标题部分。

I know that this scrolling will never change anything in my table, and would like to restrict my $apply to affect the header part of my site.

我怎样才能把角的不可以脏检查表？

How can I make angular not dirty check the table?

推荐答案

角度做了所谓的消化进程下的脏检查。当你做对 $范围。$摘要（）的调用它会传播到 $范围每一个孩子的范围。要通知有关的角度改变你平时做 $范围。$适用（）。在的$年底申请（）角并在根范围内，这触发应用程序中每个范围diggest一个消化。因此，为了避免与大表范围的范围内消化，你应该确保它不是额外的信息范围的孩子，而不是做一个$范围。$适用（）在你的指令，你可以做一个$范围。$摘要（）。所以我做了尝试以示区别一个plunker这可能是一个有点混乱。打开控制台，看到滚动事件，并点击按钮的区别是：

Angular does the dirty checking under a process called digest. When you do a call to $scope.$digest() it will propagate to every child scope of $scope. To notify angular about changes you usually do a $scope.$apply(). At the end of the $apply() angular does a digest on the root scope, which triggers a diggest on every scope in your application. So to avoid the digest on in your scope with the big table scope, you should make sure that it is not the child of the extra information scope, and rather than doing an $scope.$apply() in your directive you could do a $scope.$digest(). This might be a bit confusing so I've made a plunker that tries to show the difference. Open your console and see the difference in the scroll event and button click:

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

// 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();
})

当这一切是说，这是一件非常不寻常的事情 - 也许不是一个好主意，有很多原因（角犯规规模以及与成千上万的元素，你不能使用任何的角事件指令（ ngClick等），因为他们都包裹在$适用） - 但如果你无法呈现在服务器端表可以试试这个

When all this is said, it's a very unusual thing to do - and probably not a good idea for a number of reasons (angular doesnt scale well with thousands of elements, you can't use any of the angular event directives (ngClick etc) because they're all wrapped in $apply) - but if you can't render the table on the server side you can give this a try.

这篇关于AngularJS性能：如何更新只有我知道的范围需要更新？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！