In the second case, let's update the DOM inside the loop on every increment.
Here is the screenshot from jsperf where a small test case was written to compare. And the result looks as shown below,
- The number of times both the engines communicate reduces.
- There is no need for CSSOM to complete as the styles need not be applied in Virtual DOM.
- Though it is a good practice not to update the Virtual DOM also whenever it is not needed, there is quite a good margin on performance loss that can spoil our application performance.
- This means smooth user interaction, faster first paint time and hence a better SEO ranking as well.
- We are not even speaking about efficiently writing a Virtual DOM. Yet, it is beneficial if we just take care of very few scenarios too.
From all the cases, for now, Virtual DOM is a lot beneficial. This will continue to be the same unless the browsers come up with a strategy to address the DOM update delays.
A comment on the above reading would be a lot helpful for me to improve my writings further. Thanks for the time!