为啥我的所见即所得编辑器在 vuejs 中运行如此缓慢？

Posted 2023-02-22

【中文标题】为啥我的所见即所得编辑器在 vuejs 中运行如此缓慢？

【英文标题】：why my wysiwyg editor works so slow in vuejs?为什么我的所见即所得编辑器在 vuejs 中运行如此缓慢？

【发布时间】：2018-08-06 10:06:56

【问题描述】：

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

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

[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 毫秒），那就更糟了——我很快就需要这样做。而且我还需要进行双向数据绑定。

我做错了什么？如何加快打字过程并改善打字体验？我的组件有大约 1,5k 行。会这样吗？

编辑：

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

edit2：代码（使用 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>'
  

【问题讨论】：

我的组件有大约 1,5k 行。会是这样吗？ 可以。但最终，我们必须看到一些代码来帮助您。

您是否需要在每次击键时更新数据项？也许试试v-model.lazy

可能会破坏（数据）部分中的文本，然后仅重新渲染它们......

debounce 可能会有所帮助。

你见过this example吗？它不是 Vue，但它在更新方面有一些有趣的代码。

【参考方案1】：

我想你最好的朋友是debounce。您可以 v-model 一个计算其 set 函数去抖动值的设置：

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

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

【讨论】：

谢谢！迫不及待地想找时间检查一下:)