Significant canvas performance degradation in v2.0.x #12042

MaxGraey · 2018-02-25T17:15:09Z

Electron version: v2.0.0-beta.1
Operating system: Mac OSX: 10.13.3

Expected behavior

Performance similar to previous versions (especially v1.6.17)

Actual behavior

Slowdown approximately in 5-8x times

How to reproduce

Install electron v2.0.0-beta.1
Launch any canvas app like this for example:

<!DOCTYPE html>
<html>

  <head>
    <script src="https://cdn.rawgit.com/konvajs/konva/1.7.6/konva.min.js"></script>
    <meta charset="utf-8">
    <title>Konva Optimizing Strokes Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #F0F0F0;
      }
    </style>
  </head>

  <body>
    <div id="container"></div>
    <script>
      var width = window.innerWidth;
      var height = window.innerHeight;

      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height
      });
      var layer = new Konva.Layer();
      stage.add(layer);

      var n = 100, shape;
      for (var i = 0; i < n; i++) {
        shape = new Konva.Circle({
          x: stage.width() * Math.random(),
          y: stage.height() * Math.random(),
          radius: 10 + 10 * Math.random(),
          fill: Konva.Util.getRandomColor(),
          stroke: 'black',
          shadowEnabled: false,
          draggable: true,
        });
        shape.strokeHitEnabled(false);
        shape.shadowForStrokeEnabled(false);

        layer.add(shape);
      }

      layer.draw();
    </script>

  </body>

</html>

drag some circle

MaxGraey · 2018-02-26T04:40:09Z

It seems problem with new color correction stuffs which improve color banding in gradients.
Solution for Chrome v61: https://stackoverflow.com/a/46167982
For Chrome >= 62: https://stackoverflow.com/a/47165506

bpasero · 2018-02-26T11:15:01Z

@Tyriar isn't this #11051 ?

MarshallOfSound · 2018-02-26T11:18:56Z

@Tyriar If it is can you check those workarounds 😄 Might be worth documenting or something 🤔

Tyriar · 2018-02-26T15:40:54Z

Well #11051 was specifically on Linux, OP is on mac. Also I thought I verified this issue on v2 but I only checked on mac 😄

alexeykuzmin · 2018-02-27T13:35:56Z

@MaxGraey

Expected behavior
Performance similar to previous versions (especially v1.6.17)

Is there any difference between 2.0.0-beta1 and the latest stable Electron 1.8.2?

MaxGraey · 2018-02-27T15:29:46Z

Is there any difference between 2.0.0-beta1 and the latest stable Electron 1.8.2?

Yes, as well. But difference between 2.0.0-beta1 and 1.6.x/1.7.x is much wider. I just mentioned that canvas perf for 1.6.17 the best on OSX in my opinion.

By the way. Is it make sense include degradation tests into electron test set for clarify how migration influence from version to version on different platforms? Because it seems this degradation has a long story

MaxGraey · 2018-02-27T15:45:38Z

For 1.6.x/1.7.x:

getGPUFeatureStatus {
  '2d_canvas': 'enabled',
  flash_3d: 'enabled',
  flash_stage3d: 'enabled',
  flash_stage3d_baseline: 'enabled',
  gpu_compositing: 'enabled',
  multiple_raster_threads: 'enabled_on',
  native_gpu_memory_buffers: 'enabled',
  rasterization: 'enabled',
  video_decode: 'enabled',
  video_encode: 'enabled',
  vpx_decode: 'enabled',
  webgl: 'enabled',
  webgl2: 'enabled'
}

for >= 1.8.x

getGPUFeatureStatus {
  '2d_canvas': 'unavailable_software', // <-- turned to software mode
  flash_3d: 'enabled',
  flash_stage3d: 'enabled',
  flash_stage3d_baseline: 'enabled',
  gpu_compositing: 'enabled',
  multiple_raster_threads: 'enabled_on',
  native_gpu_memory_buffers: 'enabled', // <-- this disable on 2.0.0-beta1 as well
  rasterization: 'unavailable_software',  // <-- turned to software mode
  video_decode: 'enabled',
  video_encode: 'enabled',
  webgl: 'enabled',
  webgl2: 'enabled'
}

So we need
turn on ignore-gpu-blacklist or enable enable-accelerated-2d-canvas, enable-gpu-rasterization and enable-native-gpu-memory-buffers

But with this hints performance lower than 1.6.x/1.7.x anyway.

alexeykuzmin · 2018-02-27T16:28:28Z

JFYI gpu_rasterization has been disabled on Mac >= 10.13 as a workaround for "Rendering glitches in High Sierra (macOS 10.13)".

MaxGraey · 2018-02-27T16:44:34Z

I haven't this issue in Electron 1.7.9 with and without this hints, but I reset NVRAM more recently. Anyway in my current browser (Chrome 63) all acceleration is enabled by factory default and works perfectly.

npezza93 · 2018-03-08T01:44:07Z

I was able to reproduce this on macOS. It is considerably slower than 1.8.3 on 2.0.0-beta.2

Tyriar · 2018-03-08T05:37:21Z

@npezza93 oh? I guess I'll have to try again, the main thing I checked for was 60ish fps in the terminal. Can you give some approximations of the numbers you were seeing?

npezza93 · 2018-03-08T12:37:55Z

On 1.8.x

On 2.0 beta

Both of the big blocks I ran the same command in xterm (I cat'd a yarn.lock file). In 1.8 it took about 2.5 seconds in 2.0 it took over double that.

npezza93 · 2018-03-08T22:52:04Z

Hey @Tyriar, some more numbers and some steps to repro:

Using the example electron app inside node-pty(https://github.com/Tyriar/node-pty/tree/master/examples/electron), I ran cat node_modules/xterm/package-lock.json from inside the example app. I used electron versions 1.7.11 and 2.0.0-beta.2 and saw the following results.

v1.7.11

v2

ckerr · 2018-03-12T02:19:41Z

This can't be fixed until c63. There are switches that apps can use to speed things up; however some may have side-effects and so they can't be done unilaterally in every case.

@MarshallOfSound has been volunteered 🍺 to write up documentation for these options for the 2.0.0 release

MarshallOfSound · 2018-03-12T03:16:29Z

@npezza93 Can you try your repro running electron with --ignore-gpu-blacklist

npezza93 · 2018-03-12T21:13:15Z

Without flag:

With flag:

Worked like a champ! Thanks, @MarshallOfSound!

MarshallOfSound · 2018-03-12T22:23:54Z

@npezza93 Good to hear we identified the issue, but our main point still stands. This won't be properly fixed for a while. By using this flag you are telling Chromium to ignore the GPU blacklist it uses to determine feature stability on certain OS's / GPU's. The thing that will affect you the most is graphical artifacts appears / graphical glitches on macOS high sierra and nvidia GPU's. If it's 100% required use the flag, but if you can avoid it and take the performance hit until Apple fix the nvidia drivers on high sierra I'd recommend doing that 👍

ckerr · 2018-03-13T02:40:52Z

Marking this as blocked-on-upstream for now, as there's not a lot that can be done in Electron until this is fixed upstream.

bpasero · 2018-03-13T05:26:14Z

@MarshallOfSound @ckerr is this the same consequence as applying #10898 for 1.7.x? VS Code was already running with that patch for a while now and I would like to understand if the performance regression originates from there or if this is something new.

Tyriar · 2018-03-13T18:27:30Z

@bpasero I do not see a particular change in performance between our 1.7 and 2.0 VS Code builds, that may be because we've tweaked flags already though?

MarshallOfSound · 2018-03-14T05:11:11Z

@bpasero Afaik the performance regression stems from that patch (or it's counterpart in chromium)

@Tyriar It is also hardware specific, depends on the GPU in your mac 👍

Tyriar · 2018-03-14T18:25:11Z

@MarshallOfSound this sounds a lot like #10923, did that patch get reverting while upleveling Chromium?

bpasero · 2018-03-15T05:32:15Z

It looks like this patch still exists in Electron 2.0.x (proof: https://github.com/electron/libchromiumcontent/blob/electron-2-0-x/patches/043-fix_rendering_glitches_on_high_sierra.patch) because the related Chrome issue was fixed after Chrome 61 (possibly Chrome 62?).

VSCode always had this patch, we backported it early on to 1.7.x.

Tyriar · 2018-03-21T14:20:27Z

I actually am seeing this on Linux. Here's the output of getGPUFeatureStatus:

{ '2d_canvas': 'unavailable_software',
  checker_imaging: 'disabled_off',
  flash_3d: 'unavailable_software',
  flash_stage3d: 'unavailable_software',
  flash_stage3d_baseline: 'unavailable_software',
  gpu_compositing: 'unavailable_software',
  multiple_raster_threads: 'enabled_on',
  native_gpu_memory_buffers: 'disabled_software',
  rasterization: 'unavailable_software',
  video_decode: 'unavailable_software',
  video_encode: 'unavailable_software',
  webgl: 'enabled_readback',
  webgl2: 'unavailable_off' }

Running with command line flags fixes the issue:

./scripts/code-cli.sh --enable-accelerated-2d-canvas --enable-gpu-rasterization --ignore-gpu-blacklist --enable-native-gpu-memory-buffers

v1.7 has all the correct flags set.

ckerr · 2018-03-26T17:37:48Z

Now that electron/libchromiumcontent#489 has landed, this may be ameliorated in 2.0.0-beta.6 which will be out in a day or two

Tyriar · 2018-05-15T16:39:21Z

FYI I think electron should revert electron/libchromiumcontent#489 as removing this version of macOS from the blacklist reintroduces the square artifacts microsoft/vscode#48043

VS Code is solving the problem by adding a DOM fallback to the canvas implementations. There will always be environments that have been blacklisted by Chromium for various reasons (like my work Linux desktop), so we needed a general solution.

bpasero · 2018-05-15T17:25:26Z

I think we cannot ship with a 2.0 that brings back the ugly square artefacts. So I am +1 for reverting the GPU blacklist change if that causes it.

bpasero · 2018-06-07T05:33:36Z

@Tyriar @deepak1556 it looks like Chrome is stating that the rendering issues have been fixed in macOS 10.13.4 and so their latest patch is actually going even further by blacklisting only if macOS < 10.13.4 (via commit).

bpasero · 2018-06-10T15:22:37Z

Unfortunately at least one user confirmed that the background artefacts are still happening even with latest macOS 10.13.5 for him.

MaxGraey · 2018-06-24T22:19:20Z

I should mentioned this problem resolved in v3.0.0-beta.1 with Chromium 66 for MacOS.

sofianguy added platform/macOS bug 🪲 2-0-x labels Feb 28, 2018

npezza93 mentioned this issue Mar 8, 2018

Update Electron to 2.0 npezza93/archipelago#35

Merged

MaxGraey changed the title ~~Significant canvas performance degradation in v2.0.0-beta.1~~ Significant canvas performance degradation in v2.0.x Mar 9, 2018

ckerr assigned MarshallOfSound Mar 12, 2018

ckerr unassigned MarshallOfSound Mar 13, 2018

ckerr added the blocked/upstream ❌ Blocked on upstream; e.g. Chromium or Node label Mar 13, 2018

deepak1556 mentioned this issue Mar 23, 2018

[2-0-x]: Re-enable accelerated 2D Canvas on NVidia High Sierra electron/libchromiumcontent#489

Merged

Tyriar mentioned this issue Mar 23, 2018

v3.2.0 - Performance regression xtermjs/xterm.js#1347

Closed

This was referenced Apr 16, 2018

Severe performance issues on Linux vercel/hyper#2833

Closed

Input Very Laggy After Update to 2.0 vercel/hyper#2838

Closed

This was referenced Apr 19, 2018

Explore to update to Electron 2.0.x microsoft/vscode#45542

Closed

[mitigated] Electron 2.0.x: integrated terminal gets slower after some usage microsoft/vscode#48193

Closed

Stanzilla mentioned this issue May 14, 2018

Unusable Hyper v2 in Linux vercel/hyper#3018

Closed

Tyriar mentioned this issue May 15, 2018

[mitigated] macOS: background artifacts in editor microsoft/vscode#48043

Closed

sofianguy added the app-feedback-program label Jul 12, 2018

grigorig mentioned this issue Aug 16, 2018

Terminal is unusably slow due to GPU blacklisting microsoft/vscode#56517

Closed

mhoyer mentioned this issue Aug 20, 2018

Integrated terminal poor performance and freezing microsoft/vscode#53782

Closed

MaxGraey closed this as completed Sep 27, 2018

sedwards2009 mentioned this issue Dec 6, 2018

Extremely slow in fedora sedwards2009/extraterm#134

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Significant canvas performance degradation in v2.0.x #12042

Significant canvas performance degradation in v2.0.x #12042

MaxGraey commented Feb 25, 2018 •

edited

Loading

MaxGraey commented Feb 26, 2018

bpasero commented Feb 26, 2018

MarshallOfSound commented Feb 26, 2018

Tyriar commented Feb 26, 2018

alexeykuzmin commented Feb 27, 2018

MaxGraey commented Feb 27, 2018 •

edited

Loading

MaxGraey commented Feb 27, 2018 •

edited

Loading

alexeykuzmin commented Feb 27, 2018

MaxGraey commented Feb 27, 2018 •

edited

Loading

npezza93 commented Mar 8, 2018

Tyriar commented Mar 8, 2018

npezza93 commented Mar 8, 2018 •

edited

Loading

npezza93 commented Mar 8, 2018

ckerr commented Mar 12, 2018

MarshallOfSound commented Mar 12, 2018

npezza93 commented Mar 12, 2018

MarshallOfSound commented Mar 12, 2018

ckerr commented Mar 13, 2018

bpasero commented Mar 13, 2018

Tyriar commented Mar 13, 2018

MarshallOfSound commented Mar 14, 2018

Tyriar commented Mar 14, 2018

bpasero commented Mar 15, 2018 •

edited

Loading

Tyriar commented Mar 21, 2018 •

edited

Loading

ckerr commented Mar 26, 2018

Tyriar commented May 15, 2018

bpasero commented May 15, 2018

bpasero commented Jun 7, 2018

bpasero commented Jun 10, 2018

MaxGraey commented Jun 24, 2018

Significant canvas performance degradation in v2.0.x #12042

Significant canvas performance degradation in v2.0.x #12042

Comments

MaxGraey commented Feb 25, 2018 • edited Loading

Expected behavior

Actual behavior

How to reproduce

MaxGraey commented Feb 26, 2018

bpasero commented Feb 26, 2018

MarshallOfSound commented Feb 26, 2018

Tyriar commented Feb 26, 2018

alexeykuzmin commented Feb 27, 2018

MaxGraey commented Feb 27, 2018 • edited Loading

MaxGraey commented Feb 27, 2018 • edited Loading

alexeykuzmin commented Feb 27, 2018

MaxGraey commented Feb 27, 2018 • edited Loading

npezza93 commented Mar 8, 2018

Tyriar commented Mar 8, 2018

npezza93 commented Mar 8, 2018 • edited Loading

npezza93 commented Mar 8, 2018

ckerr commented Mar 12, 2018

MarshallOfSound commented Mar 12, 2018

npezza93 commented Mar 12, 2018

MarshallOfSound commented Mar 12, 2018

ckerr commented Mar 13, 2018

bpasero commented Mar 13, 2018

Tyriar commented Mar 13, 2018

MarshallOfSound commented Mar 14, 2018

Tyriar commented Mar 14, 2018

bpasero commented Mar 15, 2018 • edited Loading

Tyriar commented Mar 21, 2018 • edited Loading

ckerr commented Mar 26, 2018

Tyriar commented May 15, 2018

bpasero commented May 15, 2018

bpasero commented Jun 7, 2018

bpasero commented Jun 10, 2018

MaxGraey commented Jun 24, 2018

MaxGraey commented Feb 25, 2018 •

edited

Loading

MaxGraey commented Feb 27, 2018 •

edited

Loading

MaxGraey commented Feb 27, 2018 •

edited

Loading

MaxGraey commented Feb 27, 2018 •

edited

Loading

npezza93 commented Mar 8, 2018 •

edited

Loading

bpasero commented Mar 15, 2018 •

edited

Loading

Tyriar commented Mar 21, 2018 •

edited

Loading