-1

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

and sometimes

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

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.

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?

edit:

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: code (using vuetify)

Example1 (mid-fast):

<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>'
  }
}

Example2 (slow):

<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>'
  }
}
gileneusz
  • 1,435
  • 8
  • 30
  • 51
  • 1
    *My component has about 1,5k lines. Could that be the case?* It could. Ultimately, though, we have to see some code to help you. – acdcjunior Feb 26 '18 at 21:47
  • @acdcjunior actually - it's SPA, so maybe (?) if I will make separate component only for my data-binding editing - it will run faster? I was curious if this kind of delay is something common – gileneusz Feb 26 '18 at 21:51
  • It's not. But if the text is so big, maybe you couldn't avoid it (formatting a large thing will take a large time, anyway). Caching could help, but this seems like something very specific to your app, so it's unclear how vue could help you achieve that more easily. – acdcjunior Feb 26 '18 at 21:53
  • my app isn't special in any kind - just normal SPA based on vuetify. But the component is so large, so if vue rerender the page - this cause so much delay – gileneusz Feb 26 '18 at 21:55
  • 1
    Do you need the data item to update on every keystroke? Maybe try `v-model.lazy` – Roy J Feb 26 '18 at 21:56
  • @RoyJ this might be a good idea, but the user experience on my site is better without lazy parametr... but I will try it – gileneusz Feb 26 '18 at 22:01
  • 1
    Maybe breaking the text in (data) parts, and re-rendering them only... – acdcjunior Feb 26 '18 at 22:39
  • 1
    [debounce](https://stackoverflow.com/questions/42199956/how-to-implement-debounce-in-vue2) could be helpful. – Roy J Feb 26 '18 at 23:14
  • @acdcjunior what do you mean by breaking the text? Making the separate component with every wysiwyg editor and text output? – gileneusz Feb 27 '18 at 09:02
  • @RoyJ Thanks, I didn't know what it is, should look at this. I edited my question - with new improvement – gileneusz Feb 27 '18 at 09:02
  • I added code to my question – gileneusz Feb 27 '18 at 09:32
  • 1
    Have you seen [this example](http://jsfiddle.net/92r4C/113/)? It's not Vue, but it has some interesting code in how it does updates. – Roy J Feb 27 '18 at 13:08
  • @RoyJ thanks, I'll look at this – gileneusz Feb 27 '18 at 13:13

1 Answers1

4

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)
},

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.

Roy J
  • 42,522
  • 10
  • 78
  • 102