The web page does not respond when deleting more than 400 lines of code using Ctrl+A

[yumao233]

Node: v14.15.1 OS: Windows 10

About 400 lines of Javascript code, select and delete all, and the whole page will be unresponsive for about 5 seconds.

Code:

import { CodeJar } from "codejar";
import { withLineNumbers } from "codejar/linenumbers";

import { highlight, languages } from "prismjs/components/prism-core";
import "prismjs/components/prism-clike";
import "prismjs/components/prism-javascript";
import "prismjs/themes/prism-tomorrow.css";

const editor = document.querySelector("#file-code-editor");
const highlightFunc = (editor) => {
    const code = editor.textContent;
    editor.innerHTML = highlight(code, languages.js);
 };
this.editor = CodeJar(editor, withLineNumbers(highlightFunc), {
    history: false,
    spellcheck: false,
    catchTab: false,
    preserveIdent: false,
    addClosing: false
});

Changing the highlightFunc function to this will solve this problem, but you will lose the text color.

  const highlightFunc = (editor) => {
      const code = editor.textContent;
      editor.innerHTML = code;
      // editor.innerHTML = highlight(code, languages.js);
    };

Is there any better way to solve this problem?

[antonmedv]

CodeJar not designed as performant code editor, rather than small and lightweight.

Also, try to profile codejar, that is bottleneck?

[yumao233]

Thank you for your reply.

I tried it under the official Demo and got the same result (https://medv.io/codejar/). I type 400 lines of Javascript in the code box of the web page and delete them all will also cause slow performance.

I don't know the exact reason, but it may be a performance problem caused by the removal of a large number of HTML elements at the same time.

[antonmedv]

Yes remove is expensive operation for DOM. I don’t know any ways to improve it.

[antonmedv]

Also it maybe issue with contenteditable.