Initially, the purpose of JavaScript was to validate forms; later, JavaScript was also able to manipulate the DOM and add CSS styles.

Conflicts :

• JavaScript code is executed differently in every browser, the output is different.
• JavaScript behaves differently across browsers primarily because each browser has its own JavaScript engine, which interprets and executes JavaScript code. These engines are built differently and may implement certain features or optimizations in unique ways, leading to discrepancies in behaviour.
• To overcome this problem, JavaScript needed some standards at that time; the Ecma standards came into the picture.
• ECMAScript: It is a standard that contains a set of rules and features.
• It is a version of JavaScript.
• Dom: A document object model is an object created by the browser each time a web page is loaded. What the DOM does is that it can dynamically add or remove elements from a web page from the backend.

Types of compilation :

• Ahead of Compilation: Compiling the code before loading it into the browser.
• Just-in-time compilation: Compiling the code during execution in the browser.

If you want to update something, traverse the DOM tree and update and render it. The traversing thing is very costly if it is too deeply nested, and updating and rendering are more costly, so to solve this problem by using frameworks like React or Angular.

Basically React never updates the original DOM tree directly. React creates a virtual DOM object that looks exactly the same as the original DOM tree. Virtual DOM is nothing but an in-memory copy of your original DOM. First, React updates the virtual DOM directly. It never updates the original DOM directly. At some later point in time, based on certain algorithms, it will update the original DOM partially based on whatever is changing the virtual DOM.

Reconciliation: React keeps the in-memory virtual DOM representation of the actual DOM and keeps it in sync with a batch update. This process is called as reconciliation.

root: if the root itself was changed, this means it will tear down the previous virtual dom tree and the latest version of the virtual dom that particular section itself gets updated, so if this happens only happen if the root gets changed.

attribute: In this case, there is no tear-down happening; only the attribute section has been changed, and only that particular portion will be reflected or changed as part of a batch update to the original DOM

Dom: document object model.