Web Components rendering performance

Question

Is Web Components give better performance when compared to Native HTML elements. Since each elements getting mutated only when getting attached to DOM. So, expensive operations inside Element callbacks leads to poor performance.

I wrote one sample Web Component with some expensive implementation in connectedCallback handle, When I try render the component, each component took time in a consecutive order.

I don't see any reference related performance pin points on Web Components.

Update 1

I have a created small page with Native and Web Component implementation, Seems Web Components page took 4ms to finish but Native took only 1ms. Refer my Performance screens. In Web Components scripting is taking more time.

Native HTML Example:

Web Component Example:

@AndreiNemes : Is Web Components give better performance when compared to Native HTML elements ? — john, Sep 27 '17 at 06:34
Rendering "Hello world" is a pretty terrible test but one would expect native elements to obviously render faster for something simple like this. — StefanBob, Apr 16 '19 at 19:35

score 9 · Answer 1 · answered Sep 27 '17 at 11:40

Since Custom Elements are extending native HTML elements (through class extends HTMLDivElement), with extra features added, I would say: in the best case, they can only be as good as native HTML elements.

The gain in performance is when compared with 3rd party frameworks (that don't leverage this new technology): Web Components should be faster.

You can see it when comparing native vs polyfilled Custom Elements implementations.

score 5 · Answer 2 · answered Feb 13 '18 at 01:45

5

You can greatly improve the performances of your web component using StencilJS (github). It will do a lot of optimisation work pretty easily, as well as implementing a Virtual DOM to your web component for an optimal rendering.

You can check the performances here.

answered Feb 13 '18 at 01:45

glemiere

4,790
7
36
60

2

I just want to know what are all the reasons for Web Component perform slow when compared to native. – john Feb 14 '18 at 11:54
Mainly because the code is executed in a VM, so it’s a much higher level than native which is directly processed by the cpu. – glemiere Aug 26 '18 at 14:03

score 4 · Answer 3 · answered May 12 '18 at 03:42

I am thinking if you just plainly do a simple "Hello World", of course Native Elements will be the winner because it doesn't need JS to work while Custom Elements will need JS to define and startup the rendering of the text.

Now, a better comparison is when, let's say, using the same code base, you create a carousel using JS and Native elements only, and a custom element that is a carousel. Then I think rendering performance would be equal. The only advantage I can think of on using custom elements rather than manipulating a native element via JS is that you can reuse the custom tag anywhere and it will work as a carousel, rather than when you have to use new Carousel(document.querySelector('.carousel')) on every carousel div that you created using only native elements.

score 4 · Answer 4 · answered Apr 26 '19 at 13:37

Native HTML Elements will always be the winner, since Web Components are implementing them, which adds an extra layer of "complexity".

I personally don't think Web Components are introduced to outperform Native HTML Elements (you can say the same for Js Frameworks like Angular, React & Vue). I think they're made for convenience and to make the life of developers much easier. Since we're writing code for humans and in the second place computers, an important aspect of web development is readability, which improves enormously with Web Components.

IMHO a better comparison between Native HTML Elements and Web Components will be the extent to which it supports developers to write more readable code and be more productive.

Web Components rendering performance

4 Answers4