Hey guys.
My friend @PepijnSenders made some quick benchmarks with some css-in-js libraries like yours here: https://github.com/PepijnSenders/css-in-js-perf-tests/
JSS turned out to be the slowest and we would like to know why and if you have plans to improve performance.
tiagojsalmeida
All 18 comments
You are not using jss correctly. At the moment you have to create a separate jss instance on each run, otherwise the style sheets will pile up.
import { create } from 'jss';
import preset from 'jss-preset-default';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { App } from '../components/App';
import { styles } from '../styles';
export const jssCase = () => {
const jss = create(preset());
const { classes: { container, button } } = jss.createStyleSheet(styles).attach();
const renderedHtml = renderToString((
<App classNames={{
container,
button,
}} />
));
const css = jss.sheets.toString();
return `
<html>
<head>
<style type="text/css">${css}</style>
</head>
<body>${renderedHtml}</body>
</html>
`;
};
aphrodite x 5,364 ops/sec 卤1.07% (83 runs sampled)
jss x 7,413 ops/sec 卤1.22% (80 runs sampled)
jss-without-preset x 10,860 ops/sec 卤1.27% (84 runs sampled)
glamor x 11,333 ops/sec 卤1.23% (80 runs sampled)
The number will probably be even better, when we provide a way to reuse the jss instance for SSR (e.g. separate style sheet registry)
@tiagojsalmeida By the way you didn't include the cxs dependency in your project.
cvle
on 18 Nov 2016
glamor is caching the style sheet using a hash, so it only creates a style sheet on first run and uses the cache on subsequent runs. This is why it performs fast in this benchmark.
@kof Do you think a similar caching mechanism would benefit jss?
cvle
on 18 Nov 2016
Hey @cvle, thanks for clearing that up for us. I also removed the cache from glamor after every run, so the results should be even better:
5 tests completed.
aphrodite x 6,088 ops/sec 卤7.65% (62 runs sampled)
jss x 11,291 ops/sec 卤8.39% (75 runs sampled)
jss-without-preset x 11,622 ops/sec 卤17.20% (52 runs sampled)
glamor x 6,623 ops/sec 卤14.67% (67 runs sampled)
cxs x 12,121 ops/sec 卤3.80% (75 runs sampled)
Fastest is: cxs,jss
PepijnSenders
on 18 Nov 2016
This looks a lot better 馃憤
cvle
on 18 Nov 2016
Guys, you are awesome, thanks for making that bench, I wanted actually to do it in the main bench runner, was really curious. I am actually surprised that aphoridite and glamor are only +-50% slower.
- Aphrodite is using asap, aren't you measuring air there?
- Why are you using react for benchmarking, they all do work without. In fact you don't even need any html, you can just stick to measuring pure css string delivery.
kof
on 18 Nov 2016
glamor is caching the style sheet using a hash, so it only creates a style sheet on first run and uses the cache on subsequent runs. This is why it performs fast in this benchmark.
@kof Do you think a similar caching mechanism would benefit jss?
Yeah there is def. a room for some caching here. Lets create a separate issue.
kof
on 18 Nov 2016
Did any one take a look why is cxs fast?
kof
on 18 Nov 2016
@kof check out the updated tests.
PepijnSenders
on 18 Nov 2016
FYI, the repo location changed: https://github.com/hellofresh/css-in-js-perf-tests
PepijnSenders
on 19 Nov 2016
Haha just wanted to link it in the docs)) good timing
kof
on 19 Nov 2016
Hehe, that is very good timing indeed.
PepijnSenders
on 19 Nov 2016
If you want we can also put it into cssinjs repo.
kof
on 19 Nov 2016
I think it looks more independent if we keep it there right? 馃槈
PepijnSenders
on 19 Nov 2016
So it doesn't make an impression bench is optimized for jss?))) I think it doesn't matter because the code is open.
kof
on 19 Nov 2016
But I don't really care, I thought it would be better for discoverability and from namespace perspective. U would need to maintain it anyways)))
kof
on 19 Nov 2016
That's true 馃槃, there's also a blog post coming up that's in draft mode right now. But let's leave it the way it is for now.
On a different note, I saw you also reside in Berlin, we should grab a 鈽曪笍 some time #notarecruiter.
PepijnSenders
on 19 Nov 2016
Only if you are really #notarecruiter)))))
kof
on 19 Nov 2016
PepijnSenders
on 8 Dec 2016
Related issues
kof
路
4Comments
brianmhunt
路
5Comments
glowkeeper
路
5Comments
goleary
路
5Comments
oliviertassinari
路
4Comments
Most helpful comment
That's true 馃槃, there's also a blog post coming up that's in draft mode right now. But let's leave it the way it is for now.
On a different note, I saw you also reside in Berlin, we should grab a 鈽曪笍 some time #notarecruiter.