perf: 优化代码块的渲染性能 (#1502)

src/ts/markdown/codeRender.ts

@@ -2,32 +2,33 @@ import {code160to32} from "../util/code160to32";
 import {Constants} from "../constants";
 
 export const codeRender = (element: HTMLElement) => {
-    element.querySelectorAll("pre > code").forEach((e: HTMLElement, index: number) => {
+    Array.from<HTMLElement>(element.querySelectorAll("pre > code")).filter((e, index) => {
         if (e.parentElement.classList.contains("vditor-wysiwyg__pre") ||
             e.parentElement.classList.contains("vditor-ir__marker--pre")) {
-            return;
+            return false;
         }
         if (e.classList.contains("language-mermaid") || e.classList.contains("language-flowchart") ||
             e.classList.contains("language-echarts") || e.classList.contains("language-mindmap") ||
             e.classList.contains("language-plantuml") || e.classList.contains("language-markmap") ||
             e.classList.contains("language-abc") || e.classList.contains("language-graphviz") ||
             e.classList.contains("language-math")) {
-            return;
+                return false;
         }
 
         if (e.style.maxHeight.indexOf("px") > -1) {
-            return;
+            return false;
         }
 
         // 避免预览区在渲染后由于代码块过多产生性能问题 https://github.com/b3log/vditor/issues/67
         if (element.classList.contains("vditor-preview") && index > 5) {
-            return;
+            return false;
         }
-
-        let codeText = e.innerText;
+        return true;
+    })
+    .map((e) => ({ e, codeText: e.innerText }))
+    .forEach(({ e, codeText }) => {
         if (e.classList.contains("highlight-chroma")) {
-            const codeElement = document.createElement("code");
-            codeElement.innerHTML = e.innerHTML;
+            const codeElement = e.cloneNode(true) as HTMLElement;
             codeElement.querySelectorAll(".highlight-ln").forEach((item: HTMLElement) => {
                 item.remove();
             });