Page MenuHomePhabricator

Performance optimization for popup rendering: reduce layout/style thrashing
Closed, ResolvedPublic

Description

Merged patch: https://gerrit.wikimedia.org/r/c/mediawiki/extensions/Popups/+/644054
Risks: The change should have make no visual difference.

Commit message in full

Reduce layout/style thrashing by measuring all required geometries at event handler, not waiting for delays/redux/style changes.

Use CSS bottom instead of top, to avoid having to measure the popup before positioning it, if it's placed above the link ("flippedY").

Disable some test cases that relied on implementation detail of using "top" CSS.

QA

Smoke test the feature on the beta cluster, looking at multiple page previews on a single page.

QA Results - Beta

ACStatusDetails
1T269295#6684184

QA Results - Prod

ACStatusDetails
1T269295#6704256

Event Timeline

Jdlrobson renamed this task from Performance optimization for popup rendering to reduce layout/style thrashing to Performance optimization for popup rendering: reduce layout/style thrashing .Dec 2 2020, 8:50 PM
Jdlrobson added a project: Performance-Team.
Jdlrobson updated the task description. (Show Details)

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

✅ AC1: Smoke test the feature on the beta cluster, looking at multiple page previews on a single page.

Screen Recording 2020-12-10 at 6.42.49 PM.mov.gif (900×922 px, 3 MB)

Edtadros added a subscriber: Edtadros.

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

✅ AC1: Smoke test the feature on the enwiki cluster, looking at multiple page previews on a single page.

Screen Recording 2020-12-19 at 12.37.58 PM.mov.gif (1×1 px, 1 MB)

QA looks good - resolving!