Prestazioni di AngularJS: come aggiornare solo gli ambiti che conosco devono essere aggiornati?

Question

Ho un ambito angolare contenente due cose:

• un tavolo gigante con 10k righe che prende un secondo per rendere
• alcune piccolo informazioni extra su di esso in una barra dell'intestazione della mascherina fissa

A seconda di quanto si è spostato verso il basso della pagina/tabella, devo aggiornare uno dei piccoli bit di informazione nell'intestazione; puoi considerarlo come un% di sconto su quanto hai passato.

per ottenere la posizione di scorrimento corrente, ho scritto una direttiva (si può anche trovare here):

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

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

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

Il mio problema è che questo rende lo scorrimento intorno nella tabella u * nsuably lento * . Questo perché il veriable che scrivo con la mia direttiva si trova nelle informazioni extra nello scope, e il cambiamento sembra angolare a dirty-check l'intera tabella per le modifiche quando viene chiamato il mio $apply.

So che questo scorrimento non cambierà mai nulla nella mia tabella e vorrei limitare il mio effetto $apply all'intestazione del mio sito.

Come posso rendere angolare lo non controllare la tabella?

Answer 1

Angolare esegue il controllo sporco in un processo chiamato digest. Quando si effettua una chiamata a $scope.$digest() si propagherà a ogni ambito figlio di $scope. Per notificare le modifiche angolari, di solito fai un $scope.$apply(). Alla fine di $ apply() angular esegue un digest sull'ambito di base, che attiva un digest su ogni ambito dell'applicazione. Quindi, per evitare che il digest entri nel tuo ambito con l'ambito della tabella grande, devi assicurarti che non sia il figlio dell'ambito di informazioni extra, e invece di fare un $ scope. $ Apply() nella tua direttiva potresti fare un $ portata. $ digest(). Questo potrebbe essere un po 'confuso quindi ho fatto un plunker che cerca di mostrare la differenza.Aprire la console e vedere la differenza in caso di scorrimento e scatto del tasto:

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

Quando tutto questo è detto, è una cosa molto insolita da fare - e probabilmente non è una buona idea per un numero Per motivi (l'angolare non si adatta bene a migliaia di elementi, non è possibile utilizzare nessuna delle direttive di evento angolare (ngClick ecc.) perché sono tutti racchiusi in $ apply) - ma se non è possibile eseguire il rendering della tabella sul server lato puoi dare una prova.

Answer 2

Vorrei sapere se è possibile farlo anche, ma - a prescindere - si potrebbe voler considerare di non disegnare l'intera tabella tutto in una volta.

Limita invece (e la quantità di dati/controller associati in Angular-world) solo alle righe visibili in base alla posizione corrente di scorrimento + alcune righe memorizzate nella cache sopra e sotto. È comunque possibile conservare tutti i dati in un array sul client, ma solo esporre un piccolo sottoinsieme ad Angular in qualsiasi momento.

Un modo per farlo potrebbe essere avere un piccolo array in Angular-world che si esegue utilizzando ng-repeat e quindi aggiungere e rimuovere elementi in questo piccolo array angolare dal grande array non angolare basato sulla posizione di scorrimento.

In questo modo Angular conosce solo un piccolo sottoinsieme di dati e dovrebbe eseguire il rendering molto più rapidamente. Penso che questo dovrebbe funzionare abbastanza bene in generale, perché è anche molto meno lavoro per il browser che non ha bisogno di mantenere un albero DOM e il rendering per 10k righe.