更新 DOM 与重新渲染 Angular 中的视图

Question

我正在关注 https://docs.angularjs.org/guide/scope。

5.The $watch list 检测到名称属性的变化并通知插值， 进而更新 DOM.

6.Angular 退出执行上下文，后者又退出 keydown 事件并随之退出 JavaScript 执行上下文。

7.The 浏览器使用更新文本重新呈现视图。

我怀疑 更新第 5 行的 DOM 和 浏览器重新呈现视图之间有什么区别 第 7 行。提前致谢。

Answer 1

DOM 表示在浏览器中加载的 HTML 文档。 JavaScript 可以通过 DOM 操作文档，但这些操作不会立即生效，只有在对 DOM 进行更改的 JavaScript 上下文完成后才会生效。

这样想：

JS: Hey HTML document, I'm gonna make some changes to you.

HTML: Ok, go ahead, contact your friend the DOM and tell him what you want to change.

JS: OK, I'm on it...

JS: OK, I've made some changes, but hey, there's a few more things I need to change.

HTML: OK, go ahead, I'll wait until you finish everything.

JS: OK, done with everything

HTML: OK, I'll ask DOM what you've changed and apply those.

考虑以下测试：

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 文档不同。

更新 DOM 与重新渲染 Angular 中的视图

Update the DOM vs Rerender the View In Angular

javascript

angularjs

dom

dom-manipulation

html-rendering