VSCode scroll up and down, high CPU usage is two times sublime

[wyntau]

• VSCode Version: 1.4.0
• OS Version: OS X 10.11.2

Steps to Reproduce:

1. js file(140 lines, see demo file in the last)
2. continue scroll up and down, up and down(again and again), see activity monitor code's CPU usage

the code's CPU usage can upto 90+%

the same file in sublime and same scroll, only ~50%

the demo files

var pkg = require('./package.json');

var staticsUrl = '//cai-statics.wecook.cn';

var DOMAIN = process.env.STATICS;
var MOD_CACHE = process.env.CACHE;
var DEBUG = process.env.DEBUG;

if(!DOMAIN){
  DOMAIN = staticsUrl;
}

DOMAIN = DOMAIN.replace(/^https?:/, '');

// MOD_CACHE, whether enable mod.js localStorage cache
if(MOD_CACHE == 'false'){
  MOD_CACHE = false;
}else{
  MOD_CACHE = true;
}

// DEBUG, whether enable console & vConsole
if(DEBUG == 'true'){
  DEBUG = true;
}else{
  DEBUG = false;
}

fis.set('project.files', ['statics/dishes/**']);

fis.get('project.ignore').push('**/*.md');

fis.set('project.md5Length', 8);

// 全局设置
fis.hook('commonjs', {
  baseUrl: 'statics/dishes'
});

// 发布地址 => development
fis.match('/statics/dishes/(**)', {
  release: '/statics/dishes_dev/$1'
});

fis.match('/statics/dishes/index.html', {
  useHash: false,
  release: '/Application/Lite/View/Index/index.html'
}, true);

fis.match('*.css', {
  postprocessor: fis.plugin('autoprefixer', {
    browsers: ['> 1%']
  })
});

// 设置 moduleId
fis.match('/statics/dishes/(**.js)', {
  id: '$1',
  isMod: true
});
fis.match('/statics/dishes/runtimes/**.js', {
  isMod: false
});
fis.match('/statics/dishes/plugins/**.js', {
  isMod: false
});

fis.match('::package', {
  postpackager: fis.plugin('loader', {
    resourceType: 'mod',
    useInlineMap: true // 资源映射表内嵌
  })
});

fis
.media('prod')

// ==> production
.match('/statics/dishes/(**)', {
  release: '/statics/dishes_dist/$1',
  url: '/dishes_dist/$1',
  domain: DOMAIN
})

// 使用hash
.match('::text', {
  useHash: true
})
.match('::image', {
  useHash: true
})
.match('*.{eot,otf,ttf,woff,svg}', {
  domain: '/statics'
}, true)

// optimize
.match('*.js', {
  optimizer: fis.plugin('uglify-js', {
    compress: {
      warnings: false,
      drop_console: !DEBUG,
      dead_code: true,
      global_defs: {
        __MOD_CACHE: MOD_CACHE,
        __DEBUG: DEBUG,
        __VERSION: pkg.version
      }
    },
    output: {
      ascii_only: true
    },
    comments: false,
    mangle: true
  })
})
.match('*.css', {
  optimizer: fis.plugin('clean-css')
})
.match('*.html', {
  optimizer: fis.plugin('html-minifier', {
    removeComments: true,
    collapseWhitespace: true
  })
})
.match('index.html', {
  optimizer: fis.plugin('html-minifier', {
    removeComments: false,
    collapseWhitespace: true
  })
})

// all in one pack
.match('::package', {
  postpackager: fis.plugin('loader', {
    resourceType: 'mod',
    resourcemapWhitespace: 0,
    useInlineMap: true // 资源映射表内嵌
  })
})

[alexdima]

@treri

Do you have any extensions installed or any settings (different than the default)?

It would be helpful to see the CPU profile on your machine:

• Help menu > Toggle developer tools
• go to Profiles tab
• check Collect JavaScript CPU Profile
• Target:Main and Start
• scroll as before
• Stop profiling
• save the profile as a txt file and attach it here.

[alexdima]

(When I do what you describe, on my Windows machine the CPU usage does not go above 9%)

[alexdima]

Also interesting that from your screenshot it looks like "Code Helper" is accounting for most of the CPU time. Does the same CPU usage occur when opening a new window (without opening a folder). I think it might be the file watcher...

[wyntau]

@alexandrudima
I just open a single file demo.js, Then I scroll up and down, the CPU usage is also high

I completely delete my vscode and all extensions. Then I fresh install vscode, use all default setting.

You see, I just opened a single file, Then I start to scroll up and down.

At the end of gif, the CPU usage upto 72%. If I continue scroll, the CPU usage will continue increase.

[wyntau]

The cpu profile file

CPU-20160808T223420.cpuprofile.zip

[alexdima]

I looked at the cpu profile and it looks normal.

When switching to a Chart view, you can examine the individual render calls and as far as I can tell, they are almost all below 10ms (with most of them probably around 5-6ms). So to render a frame we spend <10ms in our code, leaving a budget of 6ms to the browser to get those new dom nodes painted in order to get 60fps.

In those 10ms we compute which new lines must be visible, render them (as dom nodes, with each different token in a different span), and add them to the DOM while removing the no longer visible lines.

It is highly possible that the rendering code can be improved (e.g. remove class names on the dom nodes and compute immediately the colors needed for the text or other optimizations), but this issue in itself does not target such an improvement, therefore I am opting to close it.

[wyntau]

Thanks for your reply.

I think this problem may have some relationship with OS X. Because when I use VIM's relative line-number, the scroll performance is also poor. But on Linux it's fine.