Heavy cursor lag in HTML files with embedded JS

[oliversong]

For example, this segment.io script file:

segment.html:

    <script type="text/javascript">
      !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","group","track","ready","alias","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t){var e=document.createElement("script");e.type="text/javascript";e.async=!0;e.src=("https:"===document.location.protocol?"https://":"http://")+"cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)};analytics.SNIPPET_VERSION="3.0.1";
      analytics.load("{{seg_key}}");
      analytics.page()
      }}();
    </script>

I deactivated my plugins one by one to figure out what the source of lag was- ended up with yajs. Once I delete the javascript snippet from the html (if it were included in a larger file), the cursor is immediately performant again.

[oliversong]

Is there an option to just turn off the plugin for html files? That would be fantastic.

[othree]

I will try to fix this

[susu]

I've noticed heavy cursor lag (and 100% CPU usage) in ES6 files as well. As I disabled yajs, it was performant again.

CPU: Intel(R) Core(TM) i5-3230M CPU @ 2.60GHz

UPDATE: Maybe sounds strange, but I've started to notice lagging, when there was a lot of Object definitons with key values, e.g:

let myObject = {
  "FormID": {
    "email": "E-mail address",
    "fullname": "Full name",
  }
}

I will investigate further.

[othree]

@oliversong I can't fix this now. But I found two other plugin is not working well with yajs on html format.

ap/vim-css-color and kchmck/vim-coffee-script

You could try disable these two plugin to see is it perform better. You also can add :set lazyredraw to improve drawing performance.

[othree]

@susu Could you provide sample file.

[oliversong]

@othree I did have vim-coffee-script, but disabling it didn't help. :set lazyredraw didn't help either, sorry.

[othree]

@susu If you can provide more information. Please goto #37, Thanks ~

[othree]

I rewrite some rule to avoid use backward lookup. Maybe you can try latest version to see is anything change.

[oliversong]

Unfortunately seems like it didn't change much. Still significant lag on my segment.html example.

[sloria]

I am seeing this as well. I tried disabling vim-coffeescript, setting lazyredraw, and disabling cursorline (as suggested in #37), but none of those made a noticeable improvement.

[othree]

May I have your Vim version, hardware/OS info.

And one more thing you can try is neovim. I confirmed the performance is much better now.

2015-09-06 22:49 GMT+08:00 Steven Loria notifications@github.com:

I am seeing this as well. I tried disabling vim-coffeescript, setting lazyredraw, and disabling cursorline (as suggested in #37 https://github.com/othree/yajs.vim/issues/37), but none of those made a noticeable improvement.

— Reply to this email directly or view it on GitHub https://github.com/othree/yajs.vim/issues/46#issuecomment-138090956.

OOO

[sloria]

I am using Macvim on a Macbook Air (2013; 8 GB memory) with OSX Yosemite.

Here is the output of :version:

VIM - Vi IMproved 7.4 (2013 Aug 10, compiled Aug 17 2015 23:49:59)
MacOS X (unix) version
Included patches: 1-769
Compiled by Homebrew
Huge version with MacVim GUI.  Features included (+) or not (-):
+acl             +cmdline_compl   +diff            +find_in_path    +jumplist        +mksession       +mouse_urxvt     +postscript      +signs           +tcl             +visual          +xim
+arabic          +cmdline_hist    +digraphs        +float           +keymap          +modify_fname    +mouse_xterm     +printer         +smartindent     +terminfo        +visualextra     -xsmp
+autocmd         +cmdline_info    +dnd             +folding         +langmap         +mouse           +multi_byte      +profile         -sniff           +termresponse    +viminfo         -xterm_clipboard
+balloon_eval    +comments        -ebcdic          -footer          +libcall         +mouseshape      +multi_lang      +python          +startuptime     +textobjects     +vreplace        -xterm_save
+browse          +conceal         +emacs_tags      +fork()          +linebreak       +mouse_dec       -mzscheme        -python3         +statusline      +title           +wildignore      -xpm
++builtin_terms  +cryptv          +eval            +fullscreen      +lispindent      -mouse_gpm       +netbeans_intg   +quickfix        -sun_workshop    +toolbar         +wildmenu
+byte_offset     +cscope          +ex_extra        -gettext         +listcmds        -mouse_jsbterm   +odbeditor       +reltime         +syntax          +transparency    +windows
+cindent         +cursorbind      +extra_search    -hangul_input    +localmap        +mouse_netterm   +path_extra      +rightleft       +tag_binary      +user_commands   +writebackup
+clientserver    +cursorshape     +farsi           +iconv           -lua             +mouse_sgr       +perl            +ruby            +tag_old_static  +vertsplit       -X11
+clipboard       +dialog_con_gui  +file_in_path    +insert_expand   +menu            -mouse_sysmouse  +persistent_undo +scrollbind      -tag_any_white   +virtualedit     -xfontset

[sloria]

I see the problem both in GUI Macvim and terminal vim.

Performance is better on neovim. However, I use both GUI vim and termvim, so I'm not quite ready to make the complete switch. Also, I'd like my vimrc to work on systems that don't have neovim.

[othree]

@sloria If your case are also embed minimized js in html. You might want to try set synmaxcol to smaller value(default is 3000).

[sabarasaba]

Im having the same problem, has anyone else found a solution ?

[mixedCase]

One year later this problem is still relevant. In .vue files, where it is the norm for html, javascript and css to coexist the plugin makes development impossible.

@othree Any leads on this?

[benvh]

Also (still) experiencing this problem. Once the plugin is loaded for whatever reason vim becomes unusable

[woat]

@mixedCase @othree Is there any updates on this?

I too am starting to have problems with .vue files as well. Although, what is strange though is that in .html files with embedded js I have no problems. In fact, copy pasting the contents of .vue -> .html doesn't give me lag.

This leads me to believe it could possibly be a conflict with vue-vim because I've tried the other js syntax plugins and I do not get performance issues.

However, I like this plugin a lot compared to the rest. Until the performance gets really bad, I'll still use it. But a fix would be great.

[othree]

Any .vue sample file available?

And which vue-vim are you using?

https://github.com/darthmall/vim-vue or https://github.com/posva/vim-vue

[woat]

I am using posva/vim-vue.

Loading only vim-vue and yajs, try pasting this in both a .html and a .vue:

<template>
  <div class="test">
    <input placeholder="Nickname" type="text">
    <h1>{{title}}</h1>
    <p>{{user.firstName}}</p>
    <p>{{user.lastName}}</p>
    <ul>
      <li>{{item.title}}</li>
    </ul><button>Say Greeting</button> <input type="text">
  </div>
</template>
<script>
  export default {
    name: 'test',
    data() {
      return {
        title: "",
        user: {
          firstName: "Poo",
          lastName: "Loo"
        },
        showName: false,
        items: [{
          title: "Item One"
        }, {
          title: "Item Two"
        }, {
          title: "Item Three"
        }]
      }
    },
    methods: {
      greet: function(param) {
        alert(param);,
        pressKey: function(e) {
            console.log(e.target.value)
          },
          enterHit: function() {
            console.log("Enter was hit")
          }
      }
    } 
</script>
<style scoped="">
</style>

Move around and you'll notice that in a .html, there is 0 drop in performance, however in a .vue it is noticeable.

Also, for what it's worth, hail2u/vim-css3-syntax doesn't work well either.

[othree]

I use syntime to check the performance. With more scripts(not just vim-vue and yajs). And didn't get any notice difference.

Vue:

HMTL:

[woat]

@othree Very helpful information. I noticed my numbers were the same as well and I have figured out what my problem is. It seems that relative line numbers is the culprit. After set nornu the lag disappeared. Retested with all plugins loaded and it ran smoothly (I also have set lazyredraw and set ttyfast).

If I figure out how to fix the lag with relative line numbers on, then I will update this post for future reference.

For now, thanks for the help and great plugin, I really appreciate it.