Skip to content

Showcase: React vs lit-element rendering performance

This article was written over 18 months ago and may contain information that is out of date. Some content may be relevant but please refer to the relevant official documentation or available resources for the latest information.

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    |    63585

The 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.

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.

Prefer email? hi@thisdot.co