为什么我的所见即所得编辑器在 vuejs 中运行如此缓慢?

问题描述

我决定在我的页面上使用所见即所得的编辑器.我通过 v-model="text" 和简单的输出 <div v-html="text"></div> 使用简单的双向数据绑定代码>.我是 vuejs 的初学者，但我需要问这个问题:为什么这运行这么慢?如果是quill editor/medium-editor/vueditor都没关系.

I decided to use wysiwyg editor on my page. I'm using simple two-way data binding via v-model="text" and simpy output <div v-html="text"></div>. I'm beginner in vuejs, but I need to ask this question:Why this is running so slow? It doesn't matter if it is quill editor/medium-editor/vueditor.

每次输入新字母时，延迟非常明显，用户体验很差.我的控制台给出了一条消息:

Every time I type new letter, the delay is very noticable and user experience is poor. My console gives a messages:

[Violation] 'message' handler took 199ms

有时

[Violation] Added synchronous DOM mutation listener to a 'DOMNodeInserted'
event. Consider using MutationObserver to make the page more responsive.

如果我将它绑定到计算属性(延迟高达 250 毫秒)，情况会更糟——我很快就会需要这样做.在我的情况下，我还需要进行双向数据绑定.

It's even worse if I bind it into computed property (delays up to 250ms)- which I will need to do soon. And I also need to do two-way data binding in my case.

我做错了什么?我怎样才能加快打字过程并改善打字体验?我的组件有大约 1,5k 行.会是这样吗?

What am I doing wrong? How could I speed up typing process annd improve typing experience? My component has about 1,5k lines. Could that be the case?

我已将 1,500 行代码组件分解为单独的部分进行编辑，这已经将 Web 速度从大约 250 毫秒提高到 50-60 毫秒，但所见即所得编辑器和双向数据绑定仍然明显缓慢.

I've break my 1,5k lines code component into separate part for editing and this already improve web speed from about 250 ms to 50-60ms, but wysiwyg editor and two-way data binding remain still noticebly slow.

edit2:代码(使用 vuetify)

edit2: code (using vuetify)

示例 1(中速):

<v-text-field
  label="Write something"
  v-model="text"
  counter
  max="120"
  rows="3"
  full-width
  multi-line
  single-line
></v-text-field>
<div  v-html="textComputed"></div>

data () {
  return {
    text: ''
  }
},
computed: {
  textComputed() {
  //using computed to add <li> tags
    return '<li>' + this.text.replace(/\n/g, "<br /></li><li>") + '</li>'
  }
}

示例 2(慢):

<quill-editor 
      v-model="text"
      :options="editorOptionProTemplate"
      >
</quill-editor>
<div  v-html="textComputed"></div>

data () {
  return {
    text: ''
  }
},
computed: {
  //using computed for many variants for styling output in web (here just adding <b> tag)
  textComputed() {
    return '<b>' + this.text + '</b>'
  }
}

推荐答案

我认为你最好的朋友是 debounce.您可以对计算器进行 v-model，其 set 函数对值的设置进行去抖动:

I think your best friend here is debounce. You can v-model a computed whose set function debounces the setting of the value:

debounceText: {
  get() { return this.text; },
  set: _.debounce(function(newValue) {
    this.text = newValue;
  }, 100)
},

您会看到更新 HTML 输出时有一点延迟，但在您输入时编辑器中的延迟要小得多.我制作了 小提琴 来演示.复制一堆文本，看看它是如何为你处理的.

You will see a little lag in the updating of the HTML output, but much less lag in the editor as you type. I have made a fiddle to demonstrate. Copy a bunch of text in and see how it handles for you.

这篇关于为什么我的所见即所得编辑器在 vuejs 中运行如此缓慢?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！