Performance issue IE11/Edge #25

Activity

1. omghax commented on Dec 14, 2016

   

   omghax

   on Dec 14, 2016

   Contributor

   More actions

   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.
2. omghax commented on Dec 14, 2016

   

   omghax

   on Dec 14, 2016

   Contributor

   More actions

   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.
3. pomm0 commented on Dec 14, 2016

   

   pomm0

   on Dec 14, 2016

   Last edited by pomm0

   Author

   More actions

   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.
4. pomm0 commented on Dec 15, 2016

   

   pomm0

   on Dec 15, 2016

   Author

   More actions

   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!