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>mj
parent
cc4da79fb6
commit
27e3cddfbe
@ -1,12 +1,19 @@
|
|||||||
export default async function initHighlight() {
|
export default async function highlight(elementOrNodeList) {
|
||||||
if (!window.config || !window.config.HighlightJS) return;
|
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') || []);
|
worker.addEventListener('message', ({data}) => {
|
||||||
for (let i = 0; i < nodes.length; i++) {
|
const {index, html} = data;
|
||||||
hljs.highlightBlock(nodes[i]);
|
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