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.
🔗Application
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.
The source code of the applications can be found on GitHub
🔗Tests & Results
The tests are performed on 9 different levels (depth of the tree). The number of rendered elements is then determined using the following sum:
sum 3^i, i=[0, n]Ref: WolframAlpha
And the approximated results from 10 test runs per technology on Chrome v79:
lvl (el. num) | React | lit-element
-------------------------------------------
02 (13) | 4.3 | 1.5
-------------------------------------------
04 (121) | 25.3 | 10.2
-------------------------------------------
06 (1k) | 134 | 82
-------------------------------------------
07 (3.2k) | 359 | 235
-------------------------------------------
08 (9.8k) | 1049 | 702
-------------------------------------------
09 (30k) | 3085 | 2147
-------------------------------------------
10 (89k) | 9493 | 6548
-------------------------------------------
11 (266k) | 28018 | 19756
-------------------------------------------
12 (797k) | 91835 | 63585The values are in miliseconds.
🔗Conclusion
As we can see the outcome is in a way expected. The differences between the lower-end levels is not dramatic but still there. However, the more elements we render, the greater time gap between the two technologies we have. We can notice that the time increase between the different levels is roughly times 3 for both technologies. Nevertheless, the apparent performer is lit-element which is approximately 30% faster compared to React in this specific test.