Friday, April 23, 2021

Find corresponding Node of a second tree, given the node of a tree

See the Pen Corresponding DOM Node in 2nd DOM Tree by Dhiviya Dhanasekar (@dhiviyadhanasekar) on CodePen.



Apple Phone Interview Question
Someone recently asked me what's the point of such questions where you get something from one tree and find something based on it in a second tree. Such kind of algorithms are useful for libraries like React. React is a UI development library that has optimized rendering for the browser. 

The browser renders HTML in the form of DOM (Document Object Model) tree. Any update to the DOM is cascaded down this tree (involves tree processing complexity) and then the browser re-paints the changes. And these operations on the DOM tree are all pretty expensive.

What React does is to create a copy of the HTML DOM - this copy DOM tree is called the Shadow DOM. Any update you make to the DOM is first made on the Shadow DOM and then all the updates are batched together and sent to the actual HTML DOM. As a result, the number of times the browser re-paints the DOM is highly reduced. Thus using React provides you with faster/optimized renderings. 

In order for React to do what it does with it's own shadow tree and the HTML DOM Tree, it needs to do things with one tree and transfer it to the other tree. 


No comments:

Post a Comment