-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Suggestion] Maybe add the comparison and benchmark with other css frameworks ? #1
Comments
Did't find a resonable benchmark but make a little comparison with emotion.js: source code: import { css } from '@iandx/easy-css'
import { css as emotionCss } from "@emotion/css"
function simplePerformanceTest(tag: string, easyFunc: (i: number) => any, emotionFunc: (i: number) => any) {
console.log(`[----${tag}----]`)
for (const round of [10, 100, 1000, 10000]) {
console.log(`----${round}----`)
console.time(`easy-css`)
for (let i = 0; i < round; i++) {
easyFunc(i)
}
console.timeEnd(`easy-css`)
console.time(`emotion`)
for (let i = 0; i < round; i++) {
emotionFunc(i)
}
console.timeEnd(`emotion`)
}
console.log("")
}
// pre-rendered for easy-css
simplePerformanceTest(
"reuse",
() => {
css`
color: red;
font-weight: bold;
display: flex;
`
},
() => {
emotionCss`
color: red;
font-weight: bold;
display: flex;
`
}
)
simplePerformanceTest(
"new",
i => {
css`
color: red;
font-weight: bold;
display: flex;
font-size: ${i}px;
`
},
i => {
emotionCss`
color: red;
font-weight: bold;
display: flex;
font-size: ${i}px;
`
}
) So in the "reuse" part, because that the css string is static, so with easy-css's pre-parsing tech, it costs almost nothing whatever the number of the round is. And in the "new" part, for that everytime the index "i" is new, there's no way to statically analyze it in build time, however as you can see the "dynamic" runtime cost is way lower than emotion. (notice that emotion stucks when the round is 10,000) |
Maybe a quick demo? Like [this one](https://codesandbox.io/s/css-in-js-comparison-forked-tqlg1?file=/src/App.js |
Demo here |
No description provided.
The text was updated successfully, but these errors were encountered: