JSS has a number of performance advantages.
- Incremental compilation and rendering (as soon as needed).
- Rendered styles are cached. Compilation and DOM Rules creation happens only once.
- Only styles which are currently in use on your screen are also in the DOM (react-jss).
- Simple class selectors ensure high selectors performance at scale.
These benchmarks are used to ensure performance after code changes.
However, one test compiles bootstrap library from JSS JSON to a CSS string. On my machine in Chrome ~130KB JSON compiles at 180 ops/sec.
yarn
yarn bench
Inline styles are also slower because of a simple fact that same styled items (for e.g. in a list) don't share the same rule.