Repository navigation
perf(core): cache CSS media query results until their inputs change - #11505
triniwiz wants to merge 2 commits into
Conversation
Sorry, something went wrong.
Every node matched against a stylesheet with @media blocks re-evaluated each query: it read the screen size natively and re-parsed the query string. Results are now cached per query string. The cache is cleared where its inputs change (orientation, system appearance, and the first window's traits), before CSS is re-applied, and a cache epoch lets callers that derive data from query results notice the change.
|
View your CI Pipeline Execution ↗ for commit ef2411b
💡 Verify your cache is correct by running tasks in a sandbox. Read docs ↗ ☁️ Nx Cloud last updated this comment at 2026-10-06 23:02:53 UTC |
Sorry, something went wrong.
npm i https://pkg.pr.new/@nativescript/core@11505 npm i https://pkg.pr.new/@nativescript/vite@11505 npm i https://pkg.pr.new/@nativescript/webpack@11505 commit: ef2411b |
Sorry, something went wrong.
… changes The screen size can change without an orientation or appearance change (a foldable's display, a window moved to another screen), which left views created afterwards matching against the old size. The cache now compares the screen size once per turn and invalidates when it differs.
|
@triniwiz I pushed ef2411b on top of this branch. Here's the review finding it addresses, confirmed on an iPhone Duo simulator. Gap: the cache was only invalidated on orientation and appearance changes. The screen size can change without either. Views created afterwards then matched @media width/height rules against the old size, while main evaluates them live. Device check (iPhone Duo simulator in Bitrig): a toolbox probe page created a fresh .mq label every 1.5s, with @media (max-width: 600) { .mq { background-color: green } }.
Fix: checkIfMediaQueryMatchesCached compares the screen size at most once per JS turn (two reads per turn instead of per query per view) and invalidates when it changed. This doesn't depend on any platform event, so it also covers external displays and secondary iPad windows. The spec gained a case that fails without it. Full suite passes, and the branch merges cleanly with current main. Note: #11506 is stacked on the earlier commit of this branch and will need a rebase. |
Sorry, something went wrong.
PR Checklist
What is the current behavior?
CSS matching evaluates every @media block for every view it matches. Each evaluation reads Screen.mainScreen width and height (on iOS, two native reads each), fetches the application orientation and appearance, and re-parses the query string. A stylesheet with media queries pays that once per view per query on every mount and restyle.
What is the new behavior?
Results are cached per query string. The inputs only change through the application, so the cache is cleared there, before CSS is re-applied:
Clearing from event listeners would be too late: the application re-applies CSS before it raises orientationChanged and systemAppearanceChanged.
matchMedia() and MediaQueryList change events still evaluate their query directly. A cache epoch (getMediaQueryEpoch) lets other caches derived from query results notice a change; #11506 uses it.
The benchmark stylesheets have no @media rules, so this has no effect on the numbers in #11506, #11507 and #11510. The new spec shows the screen is read once per query until the cache is invalidated.
Part of a series: #11505 (this), #11506 (stacked on this one), #11507, #11510.