Open s0kil opened 5 years ago
Another suggestion for runtime performance: cache all styles for re-use and inject CSS using .insertRule()
Hi @s0kil, thank you very much for the request!
Yeah, I think it's really important to extract styles also with svelte
, and I don't see any problems with it at all (the same trick as with webpack
should work out of the box)
So I think I'll have a chance to make it today/tomorrow
And thank you for the link to the nano-css
, looks really interesting!
I also thought about insertRule
and made some experiments with such implementation, but found the whole <style>
insertion a bit more effective (as a separate tag, without previous changing, just because of the specific reshadow
implementation we don't insert any rules during the runtime, only for the first time on initializing if styles were not extracted), and reshadow runtime also has quite effective caching by generated hash.
But I think about runtime mixins too and how they could be extracted and optimized, and mixins implementation probably should be with CSSOM
@s0kil, I've made some benchmarks comparing with nano-css
with styled
-interface: https://xggtc.sse.codesandbox.io/public#nano-css-styled (production build)
and the difference on 100 boxes is quite big (ms):
reshadow | reshadow-runtime | reshadow-styled | nano-css-styled |
---|---|---|---|
69 | 77 | 115 | 573 |
50 | 58 | 81 | 1457 |
22 | 38 | 56 | 2348 |
22 | 29 | 64 | 3418 |
21 | 36 | 58 | 4320 |
I think that there are some things that could be optimized in the example for nano-css
, but the idea was to try the interface and solution as is
@lttb Looks great, but we still got to get them static styles out of the JavaScript bundle. Not everyone can afford supercomputers to parse JavaScript bundles (:
When reshadow processes styles, they no longer are extracted to a css file, instead are evaluated by JavaScript at runtime.
Ex runtime styles:
It would be ideal to return static styles in a
style
tag so Svelte could export them into a CSS file, and Reshadow will process dynamic styles at runtime.Ex static styles: