mirror of https://github.com/go-gitea/gitea
Move syntax highlighting to web worker (#11017)
This should eliminate page freezes when loading big files/diff. `highlightBlock` is needed to preserve existing nodes when highlighting and for that, highlight.js needs access to the DOM API so I added a DOM implementation to make it work, which adds around 300kB to the output file size of the lazy-loaded `highlight.js`. Co-authored-by: Lauris BH <lauris@nix.lv>pull/10994/head^2
parent
cc4da79fb6
commit
27e3cddfbe
@ -1,12 +1,19 @@ |
||||
export default async function initHighlight() { |
||||
if (!window.config || !window.config.HighlightJS) return; |
||||
export default async function highlight(elementOrNodeList) { |
||||
if (!window.config || !window.config.HighlightJS || !elementOrNodeList) return; |
||||
const nodes = 'length' in elementOrNodeList ? elementOrNodeList : [elementOrNodeList]; |
||||
if (!nodes.length) return; |
||||
|
||||
const hljs = await import(/* webpackChunkName: "highlight" */'highlight.js'); |
||||
const {default: Worker} = await import(/* webpackChunkName: "highlight" */'./highlight.worker.js'); |
||||
const worker = new Worker(); |
||||
|
||||
const nodes = [].slice.call(document.querySelectorAll('pre code') || []); |
||||
for (let i = 0; i < nodes.length; i++) { |
||||
hljs.highlightBlock(nodes[i]); |
||||
} |
||||
worker.addEventListener('message', ({data}) => { |
||||
const {index, html} = data; |
||||
nodes[index].outerHTML = html; |
||||
}); |
||||
|
||||
return hljs; |
||||
for (let index = 0; index < nodes.length; index++) { |
||||
const node = nodes[index]; |
||||
if (!node) continue; |
||||
worker.postMessage({index, html: node.outerHTML}); |
||||
} |
||||
} |
||||
|
@ -0,0 +1,12 @@ |
||||
import {highlightBlock} from 'highlight.js'; |
||||
import {createWindow} from 'domino'; |
||||
|
||||
self.onmessage = function ({data}) { |
||||
const window = createWindow(); |
||||
self.document = window.document; |
||||
|
||||
const {index, html} = data; |
||||
document.body.innerHTML = html; |
||||
highlightBlock(document.body.firstChild); |
||||
self.postMessage({index, html: document.body.innerHTML}); |
||||
}; |
Loading…
Reference in new issue