I am following https://docs.angularjs.org/guide/scope.
5.The $watch list detects a change on the name property and notifies the interpolation, which in turn updates the DOM.
6.Angular exits the execution context, which in turn exits the keydown event and with it the JavaScript execution context.
7.The browser re-renders the view with update text.
I am having doubt what is the differnce between updates the DOM on Line 5 and browser re-renders the view on line 7. Thanks In advance.
It basically takes the current value passed from the updateRenderer function and compares it to the value from the previous change detection. A View holds old values in the oldValues property. If the value changed Angular uses the updated value to compose a string and update the DOM using a renderer.
Angular Ivy is a new Angular renderer, which is radically different from anything we have seen in mainstream frameworks, because it uses incremental DOM.
Incremental DOM brings a more straightforward approach than Virtual DOM by using real DOM to locate code changes. So, there won't be any virtual representation of the real DOM in memory to calculate the difference, and real DOM is used to diff against new trees.
The DOM represents the HTML document loaded in the browser. JavaScript can manipulate the document through the DOM, but those manipulations do not take effect immediately but only after the JavaScript context that makes changes to the DOM is finished.
Think about it this way:
- JS: Hey HTML document, I'm gonna make some changes to you.
- HTML: Ok, go ahead, contact your friend the DOM and tell him what you want to change.
- JS: OK, I'm on it...
- JS: OK, I've made some changes, but hey, there's a few more things I need to change.
- HTML: OK, go ahead, I'll wait until you finish everything.
- JS: OK, done with everything
- HTML: OK, I'll ask DOM what you've changed and apply those.
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';
Although there's considerable time between the instruction to change the color to red and the one to change it to blue, you will never see the color changing to red because all changes will be applied once the JS finished.
In fact, the color does change to red but only for such a short time period before it's changing to blue that the browser doesn't even have time to paint the change. Or if it has, you won't notice.
In other words, DOM manipulations are queued by the browser. The queue will be executed once the JS context is finished. If JavaScript spends time between 2 DOM changes on other tasks, that will delay the start of the queue execution and then all queued changes will be executed in great succession.
In light of the above information, it should become clear that changing the DOM is not the same thing as changing the HTML document.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With