Вопрос по angularjs, html-rendering, dom, dom-manipulation – Обновите DOM против Rerender View в Angular

6

Я следуюhttps://docs.angularjs.org/guide/scope.

5. $ watch list обнаруживает изменение свойства name и уведомляет об интерполяции,который в свою очередь обновляет DOM.

6.Angular выходит из контекста исполнения, который, в свою очередь, выходит из события keydown, а вместе с ним и контекста исполнения JavaScript.

7.Theбраузер повторно отображает вид с обновлением текста.

Я сомневаюсь, в чем разница междуобновляет DOM на линии 5 ибраузер повторно отображает вид на линии 7. Заранее спасибо.

Ваш Ответ

1   ответ
9

DOM представляет документ HTML, загруженный в браузер. JavaScript может манипулировать документом через DOM, но эти манипуляции вступают в силу не сразу, а только после завершения контекста JavaScript, который вносит изменения в DOM.

Подумайте об этом таким образом:

ЯШ: Привет, HTML-документ, я собираюсь внести в тебя некоторые изменения.HTML: Хорошо, продолжайте, свяжитесь с вашим другом DOM и скажите ему, что вы хотите изменить.JS: ОК, я на этом ...ЯШ: Хорошо, я сделал некоторые изменения, но, эй, есть еще несколько вещей, которые мне нужно изменить.HTML: Хорошо, давай, я подожду, пока ты все не закончишь.JS: ОК, все сделаноHTML: Хорошо, я спрошу DOM, что вы изменили, и примените их.

Рассмотрим следующий тест:

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

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

Несмотря на то, что между инструкцией по изменению цвета на красный и инструкцией по замене на синий уходит значительное время, вы никогда не увидите изменения цвета на красный, потому что все изменения будут применены после завершения JS.

Фактически, цвет меняется на красный, но только на такой короткий промежуток времени, прежде чем он становится синим, что браузер даже не успевает отразить изменение. Или, если это так, вы не заметите.

Другими словами, манипуляции с DOM ставятся в очередь браузером. Очередь будет выполнена, как только закончится JS-контекст. Если JavaScript тратит время между 2 изменениями DOM на другие задачи, это задержит начало выполнения очереди, и тогда все изменения в очереди будут выполнены с большой последовательностью.

В свете вышеприведенной информации должно стать ясно, что изменение DOM - это не то же самое, что изменение HTML-документа.

Спасибо, marekful ... Shreyansh Bele

Похожие вопросы