perf(css-processor): cache compiled inline CSS strings#39
Open
pataar wants to merge 4 commits into
Open
Conversation
Memoize `CSSProcessor.compileInlineCSS` results with a bounded LRU (256 entries). Inline `style="..."` strings repeat heavily in real-world HTML (design-system markup, syntax-highlighted code spans, table cells), and recompiling the same string for each occurrence is pure waste — the output `CSSProcessedProps` is immutable post-construction.
Collaborator
|
Hi, thanks for your contribution! |
Author
|
All good. Thanks and no hurries |
5ZYSZ3K
reviewed
May 11, 2026
| if (cache.size >= INLINE_CSS_CACHE_LIMIT) { | ||
| // Evict oldest (Map preserves insertion order). | ||
| const oldest = cache.keys().next().value; | ||
| if (oldest !== undefined) { |
Collaborator
There was a problem hiding this comment.
What does this check protect us from? undefined is fine as a map key
Author
There was a problem hiding this comment.
I could force it, but the check is cheap i guess
Collaborator
There was a problem hiding this comment.
Okay, let's keep it that way, I just checked the behaviour in a JS environment and it sticked out
jsamr
reviewed
May 11, 2026
jsamr
reviewed
May 11, 2026
Address PR review feedback: - Move LRU logic out of `CSSProcessor` into a generic `createLRUCache` closure factory in `lruCache.ts`. - Gate the cache behind `CSSProcessorConfig.enableExperimentalCssLRUCache` (default `false`) so it stays opt-in given the memory trade-off. - Add `CSSProcessorConfig.maxCssLruCacheSize` (default 256) for tuning. - Drop the redundant `oldest !== undefined` guard left over from the previous implementation; `Map.delete(undefined)` is harmless anyway. - Cover the new behavior with tests (default off, flag on, eviction, touch-keeps-alive).
`set` was evicting the oldest entry whenever `map.size >= maxSize`, even if the key being written already existed in the map. Replacing an entry updates in place — it doesn't free a slot — so the eviction was dropping unrelated data. Skip the eviction when `map.has(key)` is true and add a dedicated `lruCache.test.ts` covering the contract, including a regression case for the replace-doesn't-evict invariant.
Author
|
Good feedback. LRUCache can now be created through a factory. Added some tests for it as well. |
jsamr
reviewed
May 13, 2026
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #39 +/- ##
==========================================
+ Coverage 98.65% 98.67% +0.01%
==========================================
Files 140 141 +1
Lines 2085 2111 +26
Branches 639 644 +5
==========================================
+ Hits 2057 2083 +26
Misses 27 27
Partials 1 1
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
This file contains hidden or 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
3 participants
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.
Memoize
CSSProcessor.compileInlineCSSresults in a bounded LRU (256 entries). The samestyle="..."string returns the sameCSSProcessedProps— skipping parse + validate on every repeat.Safe: the compiled
CSSProcessedPropsis only mutated duringCSSInlineParseRun.exec(); nothing downstream writes to it (merge()always returns a fresh instance).Benchmarks
benchmark.jsagainstTRenderEngine.buildTTree()end-to-end (full hoist + whitespace-collapse). 3 runs per workload, mean reported, RME <1%.rnImageDoctranslate-onlyrnImageDocfull pipelinecssHeavy(200)full pipelineFixtures:
rnImageDoc— the existing 65 KB Docusaurus snippet inpackages/performance-testing/html-sources.js. Diverse inline styles.cssHeavy(200)— synthetic 200-element doc where<div>/<span>/<p>carry repeated design-system-shaped inline styles (mixedpx/em/%, colors, spacing). Models the repetition the cache targets.The diverse-content case is neutral; the win shows up wherever inline styles repeat — common in production.
Test plan
yarn test:css-processor— 1414 passyarn test:transient-render-engine— 191 + 66 snapshots passyarn test:render— 262 passyarn test:transient-render-engine:perfpasses thresholds