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

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

5.$watch列表检测到name属性的变化并通知插值，进而更新 DOM。

6.Angular 退出执行上下文，进而退出 keydown 事件以及 JavaScript 执行上下文。

7.The 浏览器重新渲染视图与更新文本。

我很怀疑两者之间有什么区别更新 DOM5 号线和浏览器重新渲染视图7号线。 提前致谢。

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

这样想：

• JS：嘿 HTML 文档，我要对你做一些更改。
• HTML：好的，继续，联系你的 DOM 朋友并告诉他你想改变什么。
• JS：好的，我正在处理...
• 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 文档不同。