Bug 293538 – MediaQueryEvaluator::evaluate has repeated computation of RenderStyle

• Status: RESOLVED
• Resolution: FIXED
• Component: Layout and Rendering

[Yury Yarashevich]

Created attachment 475365 [details]
The flame graph of page having frequent updateRendering and many media queries.

When evaluating media queries, WebKit currently constructs and destroys a temporary RenderStyle object for each evaluation. In documents that contain many media queries and have conditions that trigger frequent calls to Page::updateRendering (e.g., 60 times per second), profiling shows that the repeated construction of RenderStyle objects becomes a waste of CPU cycles and battery.

The RenderStyle used for evaluation depends on the document's settingsValues, which remain constant, and on the inQuirksMode flag, which is typically stable (possibly changing only once?). Given this, it seems feasible to cache a RenderStyle at the document level specifically for media query evaluation. This cached instance could be reused across evaluations, avoiding the overhead of repeatedly constructing and destroying identical objects.

[Yury Yarashevich]

Created attachment 475366 [details]
Zoomed flame graph

[Yury Yarashevich]

Pull request: https://github.com/WebKit/WebKit/pull/45884

[Yury Yarashevich]

I've managed to create simple demo page which reproduces too high CPU usage due to many instances of MediaQueryList evaluated frequently: https://mstyura.github.io/webkit-issues/many-media-query-list/index.html

[Radar WebKit Bug Importer]

<rdar://problem/152366637>

[Darin Adler]

Pull request: https://github.com/WebKit/WebKit/pull/48584

[EWS]

Committed 297928@main (2304769b774b): <https://commits.webkit.org/297928@main>

Reviewed commits have been landed. Closing PR #48584 and removing active labels.