加入渲染防抖

frontend/package.json

@@ -15,6 +15,7 @@
     "crypto-js": "^3.1.9-1",
     "github-markdown-css": "^2.10.0",
     "highlight.js": "^9.12.0",
+    "lodash": "^4.17.10",
     "markdown-it": "^8.4.0",
     "markdown-it-plantuml": "^1.0.0",
     "markdown-it-task-lists": "^2.1.0",

frontend/src/components/View.vue

@@ -5,6 +5,7 @@
 <script>
 import 'github-markdown-css/github-markdown.css'
 import 'highlight.js/styles/github-gist.css'
+import _ from 'lodash'
 import Markdown from 'markdown-it'
 import TaskLists from 'markdown-it-task-lists'
 import Plantuml from 'markdown-it-plantuml'
@@ -39,17 +40,16 @@ export default {
     }
   },
   mounted () {
-    this.render(this.value)
-  },
-  methods: {
-    render (val) {
-      this.$refs.view.innerHTML = this.markdown.render(val)
+    this.render = _.debounce(() => {
+      this.$refs.view.innerHTML = this.markdown.render(this.value)
       MermaidPlugin.update()
-    }
+    }, 500)
+
+    this.render()
   },
   watch: {
-    value (val) {
-      this.render(val)
+    value () {
+      this.render()
     }
   }
 }

frontend/yarn.lock

@@ -3685,6 +3685,10 @@ lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, l
   version "4.17.4"
   resolved "http://registry.npm.taobao.org/lodash/download/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
 
+lodash@^4.17.10:
+  version "4.17.10"
+  resolved "http://registry.npm.taobao.org/lodash/download/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"
+
 log-symbols@^1.0.2:
   version "1.0.2"
   resolved "http://registry.npm.taobao.org/log-symbols/download/log-symbols-1.0.2.tgz#376ff7b58ea3086a0f09facc74617eca501e1a18"