typicode / mistcss

Create React visual components without JavaScript or TypeScript. Leverage native HTML and CSS. It's an alternative to CSS-in-JS and CSS modules.
MIT License
859 stars 25 forks source link

fix: small performance improvement. #18

Closed sergupe closed 6 months ago

sergupe commented 7 months ago
typicode commented 7 months ago

Hey @sergupe,

Thank you for the PR! :)

Using Set instead of array, so we move from an O(n) complexity to O(1)

AFAIK, simple structures like array tend to perform better. The same goes for basic for loop vs forEeach, map, etc...

I did this for quick testing:

console.time()
const s = new Set()
for (let i = 0; i < 1000; i++) {
    s.add('foo')
}
console.timeEnd()

console.time()
const a = []
for (let i = 0; i < 1000; i++) {
    !a.includes('foo') && a.push('foo')
}
console.timeEnd()
node index.js 
default: 0.121ms
default: 0.03ms

That said, it doesn't make a difference in a real context. I mean, it's not humanly noticeable.

Extracting render related functions to a file, so index doesn't keep growing till ♾️

:+1:

Thanks for the refactor.

typicode commented 6 months ago

Thanks for the Set suggestion. I've rewritten the parser and it's actually better.