Question

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

5. $ watch列表检测到name属性的更改并通知插值，然后更新DOM。

6.Angular退出执行上下文，执行上下文反过来退出keydown事件，并随之退出JavaScript执行上下文。

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

我怀疑第5行的更新DOM 和第7行的浏览器重新呈现视图之间的差异是什么。在此先感谢。

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

更新DOM与重新渲染Angular视图

1 个答案: