Browse Source

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>
for-closed-social
silverwind 4 years ago
committed by GitHub
parent
commit
27e3cddfbe
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 83 additions and 17 deletions
  1. +7
    -0
      .eslintrc
  2. +25
    -0
      package-lock.json
  3. +3
    -1
      package.json
  4. +15
    -8
      web_src/js/features/highlight.js
  5. +12
    -0
      web_src/js/features/highlight.worker.js
  6. +7
    -8
      web_src/js/index.js
  7. +14
    -0
      webpack.config.js

+ 7
- 0
.eslintrc View File

@ -24,6 +24,13 @@ globals:
SimpleMDE: false SimpleMDE: false
u2fApi: false u2fApi: false
overrides:
- files: ["web_src/**/*.worker.js"]
env:
worker: true
rules:
no-restricted-globals: [0]
rules: rules:
arrow-body-style: [0] arrow-body-style: [0]
arrow-parens: [2, always] arrow-parens: [2, always]

+ 25
- 0
package-lock.json View File

@ -3659,6 +3659,11 @@
"domelementtype": "1" "domelementtype": "1"
} }
}, },
"domino": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/domino/-/domino-2.1.4.tgz",
"integrity": "sha512-l70mlQ7IjPKC8kT7GljQXJZmt5OqFL+RE91ik5y5WWQtsd9wP8R7gpFnNu96fK5MqAAZRXfLLsnzKtkty5fWGQ=="
},
"dompurify": { "dompurify": {
"version": "2.0.8", "version": "2.0.8",
"resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.0.8.tgz", "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.0.8.tgz",
@ -15008,6 +15013,26 @@
"errno": "~0.1.7" "errno": "~0.1.7"
} }
}, },
"worker-loader": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/worker-loader/-/worker-loader-2.0.0.tgz",
"integrity": "sha512-tnvNp4K3KQOpfRnD20m8xltE3eWh89Ye+5oj7wXEEHKac1P4oZ6p9oTj8/8ExqoSBnk9nu5Pr4nKfQ1hn2APJw==",
"requires": {
"loader-utils": "^1.0.0",
"schema-utils": "^0.4.0"
},
"dependencies": {
"schema-utils": {
"version": "0.4.7",
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.7.tgz",
"integrity": "sha512-v/iwU6wvwGK8HbU9yi3/nhGzP0yGSuhQMzL6ySiec1FSrZZDkhm4noOSWzrNFo/jEc+SJY6jRTwuwbSXJPDUnQ==",
"requires": {
"ajv": "^6.1.0",
"ajv-keywords": "^3.1.0"
}
}
}
},
"wrap-ansi": { "wrap-ansi": {
"version": "2.1.0", "version": "2.1.0",
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz", "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",

+ 3
- 1
package.json View File

@ -17,6 +17,7 @@
"core-js": "3.6.4", "core-js": "3.6.4",
"css-loader": "3.4.2", "css-loader": "3.4.2",
"cssnano": "4.1.10", "cssnano": "4.1.10",
"domino": "2.1.4",
"dropzone": "5.7.0", "dropzone": "5.7.0",
"fast-glob": "3.2.2", "fast-glob": "3.2.2",
"fomantic-ui": "2.8.4", "fomantic-ui": "2.8.4",
@ -44,7 +45,8 @@
"vue-template-compiler": "2.6.11", "vue-template-compiler": "2.6.11",
"webpack": "4.42.0", "webpack": "4.42.0",
"webpack-cli": "3.3.11", "webpack-cli": "3.3.11",
"webpack-fix-style-only-entries": "0.4.0"
"webpack-fix-style-only-entries": "0.4.0",
"worker-loader": "2.0.0"
}, },
"devDependencies": { "devDependencies": {
"eslint": "6.8.0", "eslint": "6.8.0",

+ 15
- 8
web_src/js/features/highlight.js View File

@ -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});
}
} }

+ 12
- 0
web_src/js/features/highlight.worker.js View 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});
};

+ 7
- 8
web_src/js/index.js View File

@ -11,12 +11,12 @@ import './vendor/semanticdropdown.js';
import {svg} from './utils.js'; import {svg} from './utils.js';
import initContextPopups from './features/contextpopup.js'; import initContextPopups from './features/contextpopup.js';
import initHighlight from './features/highlight.js';
import initGitGraph from './features/gitgraph.js'; import initGitGraph from './features/gitgraph.js';
import initClipboard from './features/clipboard.js'; import initClipboard from './features/clipboard.js';
import initUserHeatmap from './features/userheatmap.js'; import initUserHeatmap from './features/userheatmap.js';
import initDateTimePicker from './features/datetimepicker.js'; import initDateTimePicker from './features/datetimepicker.js';
import createDropzone from './features/dropzone.js'; import createDropzone from './features/dropzone.js';
import highlight from './features/highlight.js';
import ActivityTopAuthors from './components/ActivityTopAuthors.vue'; import ActivityTopAuthors from './components/ActivityTopAuthors.vue';
const {AppSubUrl, StaticUrlPrefix, csrf} = window.config; const {AppSubUrl, StaticUrlPrefix, csrf} = window.config;
@ -29,7 +29,6 @@ let previewFileModes;
let simpleMDEditor; let simpleMDEditor;
const commentMDEditors = {}; const commentMDEditors = {};
let codeMirrorEditor; let codeMirrorEditor;
let hljs;
// Silence fomantic's error logging when tabs are used without a target content element // Silence fomantic's error logging when tabs are used without a target content element
$.fn.tab.settings.silent = true; $.fn.tab.settings.silent = true;
@ -49,7 +48,7 @@ function initCommentPreviewTab($form) {
$previewPanel.html(data); $previewPanel.html(data);
emojify.run($previewPanel[0]); emojify.run($previewPanel[0]);
$('pre code', $previewPanel[0]).each(function () { $('pre code', $previewPanel[0]).each(function () {
hljs.highlightBlock(this);
highlight(this);
}); });
}); });
}); });
@ -75,7 +74,7 @@ function initEditPreviewTab($form) {
$previewPanel.html(data); $previewPanel.html(data);
emojify.run($previewPanel[0]); emojify.run($previewPanel[0]);
$('pre code', $previewPanel[0]).each(function () { $('pre code', $previewPanel[0]).each(function () {
hljs.highlightBlock(this);
highlight(this);
}); });
}); });
}); });
@ -1011,7 +1010,7 @@ async function initRepository() {
$renderContent.html(data.content); $renderContent.html(data.content);
emojify.run($renderContent[0]); emojify.run($renderContent[0]);
$('pre code', $renderContent[0]).each(function () { $('pre code', $renderContent[0]).each(function () {
hljs.highlightBlock(this);
highlight(this);
}); });
} }
const $content = $segment.parent(); const $content = $segment.parent();
@ -1337,7 +1336,7 @@ function initWikiForm() {
preview.innerHTML = `<div class="markdown ui segment">${data}</div>`; preview.innerHTML = `<div class="markdown ui segment">${data}</div>`;
emojify.run($('.editor-preview')[0]); emojify.run($('.editor-preview')[0]);
$(preview).find('pre code').each((_, e) => { $(preview).find('pre code').each((_, e) => {
hljs.highlightBlock(e);
highlight(e);
}); });
}); });
}; };
@ -2633,8 +2632,8 @@ $(document).ready(async () => {
}); });
// parallel init of lazy-loaded features // parallel init of lazy-loaded features
[hljs] = await Promise.all([
initHighlight(),
await Promise.all([
highlight(document.querySelectorAll('pre code')),
initGitGraph(), initGitGraph(),
initClipboard(), initClipboard(),
initUserHeatmap(), initUserHeatmap(),

+ 14
- 0
webpack.config.js View File

@ -51,6 +51,7 @@ module.exports = {
sourceMap: true, sourceMap: true,
extractComments: false, extractComments: false,
terserOptions: { terserOptions: {
keep_fnames: /^(HTML|SVG)/, // https://github.com/fgnass/domino/issues/144
output: { output: {
comments: false, comments: false,
}, },
@ -89,6 +90,19 @@ module.exports = {
test: require.resolve('jquery-datetimepicker'), test: require.resolve('jquery-datetimepicker'),
use: 'imports-loader?define=>false,exports=>false', use: 'imports-loader?define=>false,exports=>false',
}, },
{
test: /\.worker\.js$/,
use: [
{
loader: 'worker-loader',
options: {
name: '[name].js',
inline: true,
fallback: false,
},
},
],
},
{ {
test: /\.js$/, test: /\.js$/,
exclude: /node_modules/, exclude: /node_modules/,

Loading…
Cancel
Save