Bug 293538

Summary:

MediaQueryEvaluator::evaluate has repeated computation of RenderStyle

Product:

WebKit

Reporter:

Yury Yarashevich <yura.yaroshevich>

Component:

Layout and Rendering

Assignee:

Darin Adler <darin>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

bfulgham, darin, koivisto, m_dubet, rniwa, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

InRadar

Version:

Safari 18

Hardware:

All

OS:

All

Attachments:

Description	Flags
The flame graph of page having frequent updateRendering and many media queries.	none
Zoomed flame graph	none

Yury Yarashevich

Reported 2025-05-24 08:07:36 PDT

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.

Attachments
The flame graph of page having frequent updateRendering and many media queries. (1.22 MB, image/png) 2025-05-24 08:07 PDT, Yury Yarashevich	no flags	Details
Zoomed flame graph (554.11 KB, image/png) 2025-05-24 08:09 PDT, Yury Yarashevich	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Yury Yarashevich

Comment 1 2025-05-24 08:09:49 PDT

Created attachment 475366 [details] Zoomed flame graph

Yury Yarashevich

Comment 2 2025-05-24 15:17:47 PDT

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

Yury Yarashevich

Comment 3 2025-05-28 09:08:24 PDT

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

Comment 4 2025-05-31 08:08:15 PDT

<rdar://problem/152366637>

Darin Adler

Comment 5 2025-07-27 18:08:23 PDT

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

EWS

Comment 6 2025-07-28 08:17:41 PDT

Committed 297928@main (2304769b774b): <https://commits.webkit.org/297928@main> Reviewed commits have been landed. Closing PR #48584 and removing active labels.

Note You need to log in before you can comment on or make changes to this bug.