Sign in to follow this  

Vue + Phaser 3 in iframe performance

Recommended Posts


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


- 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: '',
      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: [


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



Share this post

Link to post
Share on other sites

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



Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.