Optimize source viewer rendering
What does this MR do and why?
Optimizes rendering in the source viewer in an attempt to bring down Total Blocking Time (TBT).
- Reduce the amount of HTML to render.
- Leverage Vue caching (move repetitive calculations to a method).
- Reduce browser resources spent on content that is not yet visible (
content-visibility: auto). - Follow-up: explore the idea of highlighting content in a webworker before Vue is bootstrapped.
Screenshots or screen recordings
| before | after |
|---|---|
| TBT: 2388ms | TBT: 1605ms |
| LCP: 2427ms | LCP: 2187ms |
 |
 |
How to set up and validate locally
- Open a source file via the repository files list
- Run a performance audit
- Take note of the TBT performance metric
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.
Related to #343649 (closed)
Edited by Jacques Erasmus