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

Question

我正在遵循https://docs.angularjs.org/guide/scope。

5. $watch列表检测到name属性的更改并通知插值表达式，进而更新DOM。 6. Angular退出执行上下文，从而退出keydown事件及其JavaScript执行上下文。

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

我有疑问，第5行的更新DOM和第7行的浏览器重新渲染视图之间有什么区别。

谢谢。

- Shreyansh Bele

---

https://dev59.com/yW855IYBdhLWcg3w3INg - Chrillewoodz

Answer 1

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文档不是同一回事。

- marekful