feat: #1600 提高超大文档的性能

Author: sunsonliu

.changeset/little-cougars-wink.md

@@ -0,0 +1,5 @@
+---
+'cherry-markdown': patch
+---
+
+feat: #1600 提高超大文档的性能

examples/assets/scripts/index-demo.js

@@ -494,7 +494,7 @@ const basicConfig = {
   editor: {
     id: 'cherry-text',
     name: 'cherry-text',
-    autoSave2Textarea: true,
+    autoSave2Textarea: false,
     defaultModel: 'edit&preview',
     showFullWidthMark: true, // 是否高亮全角符号 ·|￥|、|：|“|”|【|】|（|）|《|》
     showSuggestList: true, // 是否显示联想框

packages/cherry-markdown/src/Editor.js

@@ -164,9 +164,19 @@ export default class Editor {
       const end = { line: targetLine, ch: targetChTo };
       return { bigString, begin, end, id };
     });
+
+    /**
+     * 如果编辑器行数超过10000，则不再处理
+     * 增加这个逻辑是为了避免性能问题，当超过1w行时，formatBigData2Mark耗费的性能会明显增加。后续在优化后可以去掉这个降级逻辑
+     * 允许降级的理由：超过1w行的md基本已经不关心base64等数据是否缩略展示了
+     */
+    if (this.editor.lineCount() > 10000) {
+      return;
+    }
     this.formatBigData2Mark(base64Reg, 'cm-url base64');
     this.formatBigData2Mark(imgDrawioXmlReg, 'cm-url drawio');
-    this.formatBigData2Mark(longTextReg, 'cm-url long-text');
+    // 长文本替换的正则性能太差，先注释掉
+    // this.formatBigData2Mark(longTextReg, 'cm-url long-text');
     if (this.$cherry.options.editor.maxUrlLength > 10) {
       const [protocolUrlPattern, wwwUrlPattern] = createUrlReg(this.$cherry.options.editor.maxUrlLength);
       this.formatBigData2Mark(protocolUrlPattern, 'cm-url url-truncated');
@@ -612,7 +622,14 @@ export default class Editor {
       this.onCursorActivity();
     });
     editor.on('beforeChange', (codemirror) => {
-      this.selectAll = this.editor.getValue() === codemirror.getSelection();
+      // 判断是否是全选
+      const { line: toLine, ch: toCh } = this.editor.getCursor('to');
+      const { line: fromLine, ch: fromCh } = this.editor.getCursor('from');
+      this.selectAll =
+        fromLine === 0 &&
+        fromCh === 0 &&
+        toLine === this.editor.lineCount() - 1 &&
+        toCh === this.editor.getLine(toLine).length;
     });
 
     addEvent(

packages/cherry-markdown/src/Engine.js

@@ -301,7 +301,13 @@ export default class Engine {
             canContinue = false;
           }
         }
-        return oneHook[action](newMd, actionArgs, this.markdownParams);
+        // const time = Date.now();
+        const ret = oneHook[action](newMd, actionArgs, this.markdownParams);
+        // const cost = Date.now() - time;
+        // if (cost > 50) {
+        //   console.log(`hook ${oneHook.getName()} ${action} cost ${Date.now() - time}ms`);
+        // }
+        return ret;
       }, $md);
     } catch (e) {
       throw new NestedError(e);
@@ -316,13 +322,17 @@ export default class Engine {
     return this.hash(str);
   }
 
+  sha256(str) {
+    return CryptoJS.SHA256(str).toString();
+  }
+
   /**
    * 计算哈希值
    * @param {String} str 被计算的字符串
    * @returns {String} 哈希值
    */
   hash(str) {
-    // 当缓存队列比较大时，随机抛弃500个缓存
+    // 当缓存队列比较大时，随机抛弃一些缓存
     if (this.hashStrMap.size > 2000) {
       const keys = Array.from(this.hashStrMap.keys()).slice(0, 200);
       keys.forEach((key) => this.hashStrMap.delete(key));
@@ -366,11 +376,18 @@ export default class Engine {
       this.cachedBigData[cacheKey] = m2;
       return `${m1}${cacheKey}}`;
     });
-    $md = $md.replace(longTextReg, (whole, m1, m2) => {
-      const cacheKey = `bigDataBegin${this.hash(m2)}bigDataEnd`;
-      this.cachedBigData[cacheKey] = m2;
-      return `${m1}${cacheKey}}`;
-    });
+
+    const tmpArr = $md.split(/\n/);
+    for (let i = 0; i < tmpArr.length; i++) {
+      if (tmpArr[i].length > 6000) {
+        tmpArr[i] = tmpArr[i].replace(longTextReg, (whole) => {
+          const cacheKey = `bigDataBegin${this.hash(whole)}bigDataEnd`;
+          this.cachedBigData[cacheKey] = whole;
+          return cacheKey;
+        });
+      }
+    }
+    $md = tmpArr.join('\n');
     $md = $md.replace(pasteWrapperReg, '');
     return $md;
   }

packages/cherry-markdown/src/core/hooks/HtmlBlock.js

@@ -45,6 +45,8 @@ export default class HtmlBlock extends ParagraphBase {
     super({ needCache: true });
     this.filterStyle = config.filterStyle || false;
     this.removeTrailingNewline = config.removeTrailingNewline || false;
+    this.cacheData = {};
+    this.cacheDataMap = [];
   }
 
   // ref: http://www.vfmd.org/vfmd-spec/specification/#procedure-for-detecting-automatic-links
@@ -218,6 +220,33 @@ export default class HtmlBlock extends ParagraphBase {
     }
     config.HTML_INTEGRATION_POINTS.foreignobject = true;
 
+    const $strArr = $str.split('\n');
+    // 如果内容很大，则分批处理，用空间换sanitizer.sanitize消耗的时间
+    const batch = 100;
+    // 最大缓存容量（冗余20%）
+    const maxCacheLength = Math.round((1.2 * $strArr.length) / batch);
+    if ($strArr.length > batch) {
+      const ret = [];
+      for (let i = 0; i < $strArr.length; i += batch) {
+        const batchStr = $strArr.slice(i, i + batch).join('\n');
+        if (!this.cacheData[batchStr]) {
+          /**
+           * 缓存太多时，清空最近插入的一些缓存
+           *  - 为什么是“最近的”，主要考虑流式输出场景
+           */
+          if (this.cacheDataMap.length > maxCacheLength) {
+            const removed = this.cacheDataMap.splice(0, 10);
+            removed.forEach((key) => {
+              delete this.cacheData[key];
+            });
+          }
+          this.cacheData[batchStr] = sanitizer.sanitize(batchStr, config);
+          this.cacheDataMap.push(batchStr);
+        }
+        ret.push(this.cacheData[batchStr]);
+      }
+      return ret.join('\n');
+    }
     return sanitizer.sanitize($str, config);
   }
 }

packages/cherry-markdown/src/utils/regexp.js

@@ -268,7 +268,7 @@ export const imgBase64Reg = /(\[[^\n]*?\]\(data:image\/[a-z]{1,10};base64,)([^)]
 export const base64Reg = /(data:image\/[a-z]{1,10};base64,)([0-9a-zA-Z+/=]+)/g;
 
 // 匹配内容非常多的单行文本，为了避免表格的场景，所以特意避免表格的识别
-export const longTextReg = /([^\n]{100})([^\n|`\s]{5900,})/g;
+export const longTextReg = /[^\n|`\s]{6000,}/g;
 
 /**
  * 创建匹配markdown中URL链接的正则表达式