electron: Significant canvas performance degradation in v2.0.x

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

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 30 (26 by maintainers)

Most upvoted comments

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

MaxGraey on Jun 24, 2018

@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 on Jun 7, 2018

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 screen shot 2018-03-08 at 5 45 19 pm

v2 screen shot 2018-03-08 at 5 38 35 pm

npezza93 on Mar 8, 2018

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

bpasero on Jun 10, 2018

FYI I think electron should revert https://github.com/electron/libchromiumcontent/pull/489 as removing this version of macOS from the blacklist reintroduces the square artifacts https://github.com/Microsoft/vscode/issues/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.

Tyriar on May 15, 2018

@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 👍

MarshallOfSound on Mar 14, 2018

@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 👍

MarshallOfSound on Mar 12, 2018

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

ckerr on Mar 12, 2018