1374321 - Poor performance in Construct 3 PWA

Status: UNCONFIRMED

(Core :: Layout, defect, P3)

Description

[ashley]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:56.0) Gecko/20100101 Firefox/56.0
Build ID: 20170618030207

Steps to reproduce:

We have developed a game development IDE in the browser as a PWA. Currently we only support Chrome. We'd love to support Firefox but the main reason we won't enable it by default is due to poor performance in Firefox. Try these steps:

1. Visit this URL: https://editor.construct.net/?skip-support-check#open=ghost-shooter-tut
2. When it loads, click the "Layout 1" tab at the top.
3. While recording a performance profile, grab any object in the main view and drag it around. E.g. click and drag the "game over" text and move the mouse in circles a few times.



Actual results:

On a high-end development machine, we see some very slow operations in the profile:

- the requestAnimationFrame callback takes ~10ms in Firefox; in Chrome, often just 1ms (the main view is rendered with WebGL)
- updating the mouse and object positions in the UI causes layout that takes ~12ms, in Chrome, just 0.3ms


Expected results:

Firefox is 10x slower at rendering the main view and layout is around 40x slower!

In Chrome we use CSS containment heavily specifically to avoid this problem, where a minor update causes an expensive layout. Firefox does not support this, so it may simply be that Firefox is doing a full-document layout where Chrome is only doing layout in a small scope due to CSS containment. If this isn't a motivating example for CSS containment, I don't know what is!

As I said we'd love to ship Construct 3 for Firefox but these issues make the whole PWA feel slugghish and laggy even on a high-end machine, and embarrassingly slow on low-end ones. We would prefer to say we only support Chrome than leave users with a poor impression of our product.