Performance issue IE11/Edge

[pomm0]

Hey,

i do have IE11 and Edge performance issue on everything especially after scrolling. Am i alone with this issue? I have no idea whats the problem first i thought the problem is because embers vendor.js is allways huge but after testing a bit it doesn't change nothing if i load the js-files externally.

CodeMirror it self handle IE and Edge great, on your demo-site it does work pretty well. But on my real-world app it does not work great on IE/Edge i have loaded following modes:

modes: ['xml', 'css', 'javascript', 'htmlmixed']

and following options:

codeMirrorOptions: { lineNumbers: true, matchTags: { bothTags: true }, mode: 'htmlmixed', tabSize: 4, theme: 't17-dark', foldGutter: true, gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'], autoCloseTags: true, autoCloseBrackets: true, autoClearEmptyLines: true, styleActiveLine: true, }

and inserted a html with > 1000 lines of code (thats what i need).

Any solutions?

[omghax]

I think this is more of a general CodeMirror issue than ivy-codemirror specifically. I played around with the demo app a bit, adding some of your options and pasting in a large (3000+ line) HTML file, and did notice it slowing down quite a lot even in Chrome (especially when scrolling horizontally).

I have a hunch that the gutters are what's slowing everything down. Removing the gutter seems to have a big impact on performance. Turning on line wrapping also seems to help a lot.

[omghax]

Out of curiosity, are you setting height: auto; on your CodeMirror instance like the demo app does? That seems to have bad performance for large documents. Setting CodeMirror to a fixed height seems to make it much more responsive, even with long lines and gutters.

[pomm0]

No i do have a fix height height: calc(100% - 58px);.

I'm playing a bit right now, and yeah lineWrapping: true does indeed a huge impact on performance.
I'll test a bit and will post my final options here, for future visitors.

Thank you for helping me, even if it is not related to your addon.
You can close it if you like.

[pomm0]

I figured out that the xml mode is what it slows down extremely. After a lot of tests and tries i didn't find a options combination for IE and EDGE that runs smooth and ended up that in ie end edge i just use the default mode.

something like that:

  _allCodeMirrorOptions: {
    theme: 't17-dark',
    tabSize: 4,
    lineNumbers: true,
    lineWrapping: true,
  },

  _codeMirrorOptionsSlowBrowsers: {
    mode: 'default',
  },
  _codeMirrorOptionsFastBrowsers: {
    mode: 'htmlmixed',
    matchTags: { bothTags: true },
    autoCloseTags: true,
    autoCloseBrackets: true,
    autoClearEmptyLines: true,
  },

  codeMirrorOptions: Ember.computed({
    get() {
      let options = this.get('_allCodeMirrorOptions');
      if (bowser.msie || bowser.msedge) {
        options = Ember.merge(options, this.get('_codeMirrorOptionsSlowBrowsers'));
      } else {
        options = Ember.merge(options, this.get('_codeMirrorOptionsFastBrowsers'));
      }
      return options;
    }
  }).readOnly(),

I'm not proud about this solution but it's the only "solution" that works for me.

If someone has a better solution please let me know!