Geek Answers Handbook

Update DOM vs Rerender View in Angular

I follow https://docs.angularjs.org/guide/scope .

5. A change in the name property is detected in the $ watch list and is notified of interpolation , which in turn updates the DOM.

6.Angular completes the execution context, which in turn throws a keydown event and with it the JavaScript execution context.

7. The browser re-displays the view with the update text.

I have doubts about the difference between updating the DOM on line 5, and the browser re-displaying the view on line 7. Thanks in advance.

+6
source share
1 answer

The DOM is an HTML document loaded into a browser. JavaScript can manipulate the document through the DOM, but these manipulations do not take effect immediately, but only after the JavaScript context that makes changes to the DOM is completed.

Think of it this way:

  • JS: Hi HTML document, I will make some changes for you.
  • HTML: Ok, go ahead, contact your friend DOM and tell him what you want to change.
  • JS: Okay, I'm on it ...
  • JS: Ok, I made some changes, but please a few more things that I need to change.
  • HTML: Okay, go on, I'll wait until you are done.
  • JS: Alright, done with everyone
  • HTML: Ok, I'll ask the DOM what you changed and applied.

Consider the following test:

var a = document.body.children[0]; a.style.color = 'red'; for(var i = 0; i < 10000000000; i++) { }; a.style.color = 'blue';

Despite the fact that there is a significant amount of time between the instruction to change the color to red and changing it to blue, you will never see that the color changes to red, because all changes will be applied after the completion of JS.

In fact, the color changes to red, but only for such a short period of time before it changes to blue that the browser does not even have time to make changes. Or, if so, you will not notice.

In other words, DOM manipulations are queued by the browser. The queue will be executed after the completion of the JS context. If JavaScript spends time between two DOM changes in other tasks, this will delay the start of the queue, and then all changes in the queue will be successful.

In light of the above information, it should be clear that modifying the DOM is not the same as modifying an HTML document.

+8
source

More articles:


All Articles