css-in-js lib comparison #1
Open
+103,889
−100
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR evaluate three CSS-in-JS libraries: Styled Components, Emotion, and Antd. The performance of each library is measured in two ways: the percentage of components that are successfully rendered and the total blocking time.
CSS-in-Js performance testing
The data presents a comparison of the performance of three CSS-in-JS libraries: Styled Components, Emotion, and Antd (cssInJS). The performance is measured in two ways: the percentage of components that are successfully rendered and the total blocking time.
In terms of the percentage of components that are successfully rendered, the results are similar for the three libraries. As the number of components increases, the performance decreases for all three libraries. However, Styled Components and Emotion have a relatively higher performance compared to Antd cssInJS, especially at lower component numbers. For example, when the number of components is 10, Styled Components and Emotion have a performance of 97% and 96% respectively, while Antd cssInJS has a performance of only 90%.
In terms of total blocking time, the results show a clear difference between the three libraries. As the number of components increases, the total blocking time of Styled Components and Emotion increases at a slower pace compared to Antd cssInJS. For example, when the number of components is 200, the total blocking time of Styled Components is 350, Emotion is 450, while Antd cssInJS is 2450. This suggests that Styled Components and Emotion might be more suitable options for projects that require low total blocking time.
The total blocking time of Styled Components and Emotion also increases with increasing component numbers, but not as dramatically as Antd cssInJS. At the highest number of components (5000), the total blocking time of Styled Components is 4540, Emotion is 5500, while Antd cssInJS's total blocking time is not possible to calculate.
The data suggests that for projects with a relatively low number of components, Styled Components and Emotion could be more suitable options for performance-critical applications, while Antd cssInJS might not be the best choice, especially if low total blocking time is a requirement.
React version : "^18.2.0"
AntD version : "^5.1.6"
Emotion : "^11.10.5"
Styled-component version : ^5.3.6"
Tested PC
Processor 11th Gen Intel(R) Core(TM) i5-11300H @ 3.10GHz 2.61 GHz
Installed RAM 16.0 GB
System type 64-bit operating system, x64-based processor