Showcase: React vs lit-element rendering performance
In this very short article, we will perform a test where we are going to exhibit the time needed for rendering of an example application developed with both React and lit-element.
The purpose of this test is not to discredit any of these web UI technologies over the other but just to emphasize on and demonstrate a certain aspect of their nature. Both have their pros and cons, and respectively, suitable applications in various scenarios.
Since we want to observe the performance in the extremes, we will develop an application that renders elements recursively. The structure will represent a ternary component/element tree.
We will introduce the Block component which will render itself 3 times for the purposes of the test. Additionally, we will have a level property that is going to determine the depth of the tree; hence the number of elements that we want to render. The time measurement will be implemented using the Performance API.
And, since lit-html provides only rendering of templates, we will make use of lit-element's Web Components class wrapper in order to replicate the React application. That way, we will have 2 identical solutions of the same application.
