Skip to content

Highlight JSON content in highlight worker

Jacques Erasmus requested to merge 391586-hljs-worker into master

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
Screenshot_2023-06-29_at_09.43.50 Screenshot_2023-06-29_at_09.46.19 Much less activity in the main thread, resulting in an improved TBT.
Screenshot_2023-06-29_at_09.51.33 Screenshot_2023-06-29_at_09.52.00 No visual changes

How to set up and validate locally

  1. Enable the highlight_js_worker feature flag.
  2. 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.

Related to #391586 (closed)

Edited by Jacques Erasmus

Merge request reports