2015-07-05 11 views
6

Ich folge https://docs.angularjs.org/guide/scope.Aktualisieren Sie das DOM vs rerender die Ansicht in Angular

5.Die $ Watch List erkennt eine Änderung der name -Eigenschaft und benachrichtigt die Interpolation , die wiederum das DOM aktualisiert.

6.Angular beendet den Ausführungskontext, der wiederum das Keydown-Ereignis und damit den JavaScript-Ausführungskontext beendet.

7. Der Browser gibt die Ansicht mit Aktualisierungstext erneut wieder.

ich Zweifel habe, was die differnce zwischen aktualisiert die DOM auf der Linie 5 und Browser neu macht die Ansicht auf Linie 7. Vielen Dank im Voraus.

+0

http://stackoverflow.com/questions/4110081/difference-between-html-and-dom – Chrillewoodz

Antwort

8

Das DOM stellt das HTML-Dokument dar, das im Browser geladen wird. JavaScript kann das Dokument über das DOM manipulieren, aber diese Manipulationen werden nicht sofort wirksam, sondern erst nachdem der JavaScript-Kontext, der Änderungen am DOM vornimmt, abgeschlossen ist.

Denk darüber auf diese Weise:

  • JS: Hey HTML-Dokument, ich werde einige Änderungen an Sie.
  • HTML: Ok, gehen Sie voran, kontaktieren Sie Ihren Freund das DOM und sagen Sie ihm, was Sie ändern möchten.
  • JS: OK, ich bin dran ...
  • JS: OK, ich habe ein paar Änderungen vorgenommen, aber hey, es gibt noch ein paar Dinge, die ich ändern muss.
  • HTML: OK, mach weiter, ich warte bis du alles fertig hast.
  • JS: OK, fertig mit allem
  • HTML: OK, ich frage DOM, was Sie geändert haben und wenden Sie diese an.

Betrachten Sie die folgende Prüfung:

var a = document.body.children[0]; 

a.style.color = 'red'; 
for(var i = 0; i < 10000000000; i++) { }; 
a.style.color = 'blue'; 

Obwohl zwischen der Anweisung geraume Zeit gibt es die Farbe rot und das eine ändern, um Blau zu ändern, werden Sie nie die Farbe sehen auf sich ändernde rot, da alle Änderungen nach dem Beenden des JS angewendet werden.

In der Tat ändert sich die Farbe in rot, aber nur für eine so kurze Zeit, bevor es zu blau wechselt, dass der Browser nicht einmal Zeit hat, die Änderung zu rendern. Oder wenn es ist, werden Sie es nicht bemerken.

Mit anderen Worten, DOM-Manipulationen werden vom Browser in die Warteschlange gestellt. Die Warteschlange wird ausgeführt, sobald der JS-Kontext beendet ist. Wenn JavaScript zwischen zwei DOM-Änderungen für andere Aufgaben Zeit verbringt, wird der Start der Warteschlangenausführung verzögert und alle Änderungen in der Warteschlange werden in großer Folge ausgeführt.

Angesichts der obigen Informationen sollte klar werden, dass das Ändern des DOM nicht dasselbe ist wie das Ändern des HTML-Dokuments.

+0

Danke marekful ... –