HighlightJS: Improve performance when rendering files with many lines

As part of highlighting source code using HighlightJS I noticed slow performance when using Highlight.js to highlight source code with many lines.

  • example (:highlight_js FF enabled)

We need to come up with ways to improve the rendering performance.

Initial ideas

  • Slice big files into smaller chunks and only highlight them once they come into view (IntersectionObserver)
  • Make use of content-visibility: auto; to ensure the browser only renders what is visible to the user (limited browser support)
Edited by Jacques Erasmus