更新DOM与重新渲染Angular视图

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