github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-06-20 23:01:42 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

PERF: Move highlightjs to a background worker, and add result cache (#10191)

Browse Source 
Syntax highlighting is a CPU-intensive process which we run a lot while rendering posts and while using the composer preview. Moving it to a background worker releases the main thread to the browser, which makes the UX much smoother.
This commit is contained in:
David Taylor
2020-07-15 12:48:07 +01:00
committed by GitHub
parent 052178efa7
commit d09f283e91
10 changed files with 277 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
test/javascripts/components/highlighted-code-test.js
View File

@ -1,4 +1,8 @@
import componentTest from "helpers/component-test";
import {
waitForHighlighting,
setupHighlightJs
} from "discourse/lib/highlight-syntax";
const LONG_CODE_BLOCK = "puts a\n".repeat(15000);
@ -8,12 +12,15 @@ componentTest("highlighting code", {
template: "{{highlighted-code lang='ruby' code=code}}",
beforeEach() {
Discourse.HighlightJSPath =
"assets/highlightjs/highlight-test-bundle.min.js";
this.set("code", "def test; end");
setupHighlightJs({
highlightJsUrl: "/assets/highlightjs/highlight-test-bundle.min.js",
highlightJsWorkerUrl: "/assets/highlightjs-worker.js"
});
},
async test(assert) {
this.set("code", "def test; end");
await waitForHighlighting();
assert.equal(
find("code.ruby.hljs .hljs-function .hljs-keyword")
.text()
@ -23,16 +30,19 @@ componentTest("highlighting code", {
}
});
componentTest("large code blocks are not highlighted", {
componentTest("highlighting code limit", {
template: "{{highlighted-code lang='ruby' code=code}}",
beforeEach() {
Discourse.HighlightJSPath =
"assets/highlightjs/highlight-test-bundle.min.js";
this.set("code", LONG_CODE_BLOCK);
setupHighlightJs({
highlightJsUrl: "/assets/highlightjs/highlight-test-bundle.min.js",
highlightJsWorkerUrl: "/assets/highlightjs-worker.js"
});
},
async test(assert) {
this.set("code", LONG_CODE_BLOCK);
await waitForHighlighting();
assert.equal(
find("code")
.text()