Vue + Phaser 3 in iframe performance

[Fit_dev]

Hi,

I have problem with phaser performance. The phaser CPU usage is too high.
 

Configuration : 

- game is on phaser 3 with vue

- main page is on vue with game in iFrame 

 

this.gameInstance = new Phaser.Game({
      width: properties.width,
      height: properties.height,
      resolution: PIXEL_RATIO,
      "callbacks.postBoot": function() {
           document.getElementsByTagName("canvas")[0].style.width = properties.width + "px"
           document.getElementsByTagName("canvas")[0].style.height = properties.height + "px"
      },
      scaleMode:  0,
      type: Phaser.CANVAS,
      parent: document.getElementById('game'),
      title: '☕️ Brunch with Phaser and ES6', // 'My Phaser 3 Game'
      url: 'https://github.com/samme/brunch-phaser-es6',
      version: '0.0.1',
      banner: {
        background: ['#e54661', '#ffa644', '#998a2f', '#2c594f', '#002d40']
      },
      fps: {
        min: 10,
        target: 60,
        forceSetTimeout: true,
      },
      loader: {
        path: 'static/phaser/',
      },
      physics: {
        default: 'arcade',
        arcade: {
          debug: false,
          gravity: {
            y: 300
          },
        },
      },
      scene: [
        LoaderScene,
        BootScene,
        DefaultScene,
        GameOverScene,
      ],    
    });

 

CPU usage: 

- Phaser = 40%

- Phaser with vue = 80-90%

- main page without iframe = 5-10 %

- main page with iframe = 100%

 

js heap size: 

- Phaser = 50 - 70 MB

- Phaser with vue ~ 70 - 100MB

- main page without iFrame ~ 50 - 80 MB 

- main page with iFrame ~ 100 - 150 MB

 

The game is equipped with 20-30 icons, 10 atlases, 19  mp3 sounds and 5 background image, with total size of assets about 3MB. 

 

Thank you in advance

[samme]

https://developers.google.com/web/tools/chrome-devtools/rendering-tools/js-execution

You might also try without forceSetTimeout.

[Fit_dev]

It’s even worse (big lag) when the forceSetTimeout is turned off. I enclose the results of CPU profiler in attachments.

[samme]

Sort by Self Time and then expand the ▸ function trees.

[Fit_dev]

[samme]

What is get (vue.esm.js:985)? That's weird.

You can sort by Total Time as well.

[Fit_dev]

Samee, thanks for your time. I had a lot of work recently, that’s why I could’t answer.

vue.esm.js:985 was responsible for the communication with vue during the game, but I fixed it. I also got rid of the text animation (points) and merged 8 atlases into 1. Now the game with vue works properly, but the problem still exists in the main page – composite layers lag. I enclose screenshots of the performance of the game and of the main page of the game in iframe. Maybe you will have some idea how to fix it.

Thank you in advance

[Fit_dev]

Problem solved, it was a small .gif in the header of main page ... 

Thank you again Samme, you were very helpful