Highlight JSON content in highlight worker
What does this MR do and why?
Changes in this MR ensure that we highlight JSON content with the highlight worker instead of in chunks.
Current (on production):
Currently, we highlight source code in chunks as they become visible in the viewport while the user scrolls, this has a performance benefit because we don't have to spend browser resources on highlighting the entire file, but highlighting in chunks has some technical downsides.
New (this MR):
To address the technical downsides of highlighting in chunks we started working on a new approach which enables us to highlight all content upfront in a Web Worker and then splitting the highlighted content into chunks before rendering it in the DOM. This should result in a more stable implementation of highlight.js, which should become evident as we roll out to more languages. In this iteration, we're scoping highlighting with the highlight worker to JSON files. We'll expand to other languages in a follow-up.
Screenshots or screen recordings
Before | After | Note |
---|---|---|
LCP: 1.84 s / TBT: 815ms | LCP: 1.87 s / TBT: 729ms | |
Much less activity in the main thread, resulting in an improved TBT. | ||
No visual changes |
How to set up and validate locally
- Enable the
highlight_js_worker
feature flag. - Open a JSON file.
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 #391586 (closed)