search

ionic-team / stencil

A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.
https://stenciljs.com
Other
12.55k stars 784 forks source link

bug: Firefox performance when components in components #3569

Open kraftwer1 opened 2 years ago

kraftwer1 commented 2 years ago

Prerequisites

Stencil Version

2.15.1

Current Behavior

Firefox needs around 3s for this on my MacBook M1 Max:

index.html

<body>
  <my-component></my-component> <-- only renders a `<div></div>`
  ... repeat line above 5000 times
</body>

However, when <my-component> includes another component, like <my-component-two> (which is a copy of <my-component>), Firefox needs around 12s, which is 400% more.

It's probably a browser issue, but still: maybe Stencil can do something about it?

Expected Behavior

Faster performance.

Steps to Reproduce

Clone the stencil-component-starter repo, copy my-component to my-component-two and call <my-component> 5000 times in index.html.

Code Reproduction URL

https://github.com/ionic-team/stencil-component-starter

Additional Information

No response

rwaskiewicz commented 2 years ago

Thanks @kraftwer1! I see what you mean - I'm going to label this for the team to take a closer look