styled-components / xstyled

A utility-first CSS-in-JS framework built for React. 💅👩‍🎤⚡️
https://xstyled.dev
MIT License
2.28k stars 105 forks source link

improvement: faster shouldForwardProp #237

Closed agriffis closed 3 years ago

agriffis commented 3 years ago

Summary

Checking propSet.has() takes about 1/20 the time as checking props.includes() for the 2500+ props in xstyled v2.

Even with a shorter list, say 100 props, it's still 1/2 the time, so this perf benefit carries over from v2 to v3.

Test plan

I didn't test the perf difference directly with xstyled, but simple node. All times in milliseconds.

2500 element test

> words = fs.readFileSync('/usr/share/dict/words', {encoding: 'utf8'}).trim().split(/\s+/).slice(0, 2500)
> words.length
2500

> performance.mark('A'); for (let i = 0; i < 1000; i++) {words.includes('z')}; performance.measure('', 'A')
2.639519

> wordSet = new Set(words)
> performance.mark('B'); for (let i = 0; i < 1000; i++) {wordSet.has('z')}; performance.measure('', 'B')
0.106556

100 element test

> words = words.slice(0, 100)
> words.length
100

> performance.mark('A'); for (let i = 0; i < 1000; i++) {words.includes('z')}; performance.measure('', 'A')
0.194431

> wordSet = new Set(words)
> performance.mark('B'); for (let i = 0; i < 1000; i++) {wordSet.has('z')}; performance.measure('', 'B')
0.088844
netlify[bot] commented 3 years ago

Deploy request for xstyled accepted.

Name Link
Latest commit 6df53328897321382a42111ceac8ae8f99f99d78
Latest deploy log https://app.netlify.com/sites/xstyled/deploys/607435088847890008e3f880
gregberge commented 3 years ago

@agriffis you can target next too for this one

agriffis commented 3 years ago

Ah, it looks like I could fast-forward merge with the "rebase and merge" option in GitHub (even though it was already rebased, so there was nothing to do)