Zaktualizuj DOM a zrenderuj widok w kątowym

Question

Podążam za https://docs.angularjs.org/guide/scope.

5. Lista $ watch wykrywa zmianę właściwości nazwy i powiadamia o interpolacji, , która z kolei aktualizuje DOM.

6. Angular wychodzi z kontekstu wykonania, który z kolei opuszcza zdarzenie keydown, a wraz z nim kontekst wykonywania JavaScript.

7. Przeglądarka ponownie renderuje widok z tekstem aktualizacji.

mam wątpliwości, co jest differnce między aktualizuje DOM na linii 5 i przeglądarka ponownie renderuje widok na linii 7. z góry dzięki.

Answer 1

DOM reprezentuje dokument HTML załadowany w przeglądarce. JavaScript może manipulować dokumentem poprzez DOM, ale te manipulacje nie działają natychmiast, ale dopiero po zakończeniu kontekstu JavaScript, który powoduje, że zmiany w DOM są zakończone.

Pomyśl o tym w ten sposób:

• JS: Hej dokument HTML, mam zamiar wprowadzić kilka zmian do ciebie.
• HTML: Ok, idź dalej, skontaktuj się ze znajomym DOM i powiedz mu, co chcesz zmienić.
• JS: OK, jestem na tym ...
• JS: OK, wprowadziłem pewne zmiany, ale hej, jest jeszcze kilka rzeczy, które muszę zmienić.
• HTML: OK, proszę bardzo, poczekam, aż wszystko skończycie.
• JS: OK, zrobione ze wszystkim
• HTML: OK, zapytam DOM, co zmieniliście i zastosujcie.

Rozważmy następujący test:

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

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

Chociaż istnieje znaczny czas pomiędzy instrukcją, aby zmienić kolor na czerwony, a ten, aby zmienić go na niebieski, nigdy nie zobaczyć kolor zmienia się czerwony, ponieważ wszystkie zmiany zostaną zastosowane po zakończeniu JS.

W rzeczywistości, kolor zmienia się na czerwony, ale tylko na tak krótki czas, zanim zmieni się na niebieski, że przeglądarka nie ma nawet czasu na wyświetlenie zmiany. A jeśli tak, nie zauważysz.

Innymi słowy, manipulacje DOM są ustawiane w kolejce przez przeglądarkę. Kolejka zostanie wykonana po zakończeniu kontekstu JS. Jeśli JavaScript spędza czas pomiędzy 2 zmianami DOM w innych zadaniach, opóźni to rozpoczęcie wykonywania kolejki, a wszystkie kolejkowane zmiany będą wykonywane wielkimi krokami.

W świetle powyższych informacji, powinno stać się jasne, że zmiana DOM nie jest tym samym, co zmiana dokumentu HTML.