Loading
Add frontend performance monitoring for commit list refactor
What does this MR do and why?
Adds frontend performance monitoring (User Timing API marks and measures) to the Vue CommitListApp component to instrument the full page lifecycle — from app mount through data fetch to final render.
Four performance marks are added:
commit-app-mounted— Vue component mounted to DOMfetching-commit-data— Apollo query starts fetchingrendering-commit-data— Apollo result received, Vue re-render beginscommit-data-rendered— DOM updated and painted ($nextTick + rAF)
Three derived measures:
Commit List: Time to mount— navigation start → app mountedCommit List: Data fetch— fetch start → data receivedCommit List: Render— data received → DOM painted
References
https://docs.gitlab.com/development/fe_guide/performance/#user-timing-api
Screenshots or screen recordings
How to set up and validate locally
- Enable
project_commits_refactorfeature flag in rails console: - Navigate to any project's commit list page, e.g.
gitlab-org/gitlab-test/-/commits/master?ref_type=head - Open DevTools → Performance tab → record a page load. The measures appear as named ranges in the "Timings" row of the waterfall.
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Resolves #547689 (closed)
Edited by Chaoyue Zhao
