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>
This commit is contained in:
parent
cc4da79fb6
commit
27e3cddfbe
7 changed files with 83 additions and 17 deletions
12
web_src/js/features/highlight.worker.js
Normal file
12
web_src/js/features/highlight.worker.js
Normal file
|
@ -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…
Add table
Add a link
Reference in a new issue