Skip to content

Optimize source viewer rendering

Jacques Erasmus requested to merge 343649-more-source-viewer-tbt-improvements into master

What does this MR do and why?

This is a follow-up from !101625 (merged) to make further optimizations in the source viewer to bring down Total Blocking Time (TBT).

  1. Render below-the-fold content once the browser goes into idle.
  2. Make use of v-once for content that does not need to be reactive once rendered.
  3. Remove useless instantiation of copyCode for non-markdown content.

Screenshots or screen recordings

⚠ Performance metrics were collected locally with this file (50k lines of code)

before after
TBT: 1090ms TBT: 537ms
Screenshot_2022-10-25_at_13.15.42 Screenshot_2022-10-25_at_13.16.50

How to set up and validate locally

  1. Open a source file via the repository files list
  2. Run a performance audit
  3. 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.

Related to #343649 (closed)

Edited by Jacques Erasmus

Merge request reports