Perché ottengo prestazioni migliori in Chrome quando Dev Console è attivo?

Question

Attualmente sto lavorando a un piccolo gioco di tela scritto in javascript puro da zero.

Il gioco comporta un algoritmo illuminazione 2d similar to this one, ma con una sorgente di luce e 25 poligoni che rende per circa 30.000 calcoli per frame.

Il mio frame rate è grande in Safari, meh in Chrome e non riproducibile in Firefox. Tuttavia, se ho la console degli sviluppatori Chrome attiva durante il gioco, la frequenza fotogrammi è la stessa di Safari.

Quale potrebbe essere la ragione di questo?

---

dopo i commenti hanno suggerito la dimensione della finestra potrebbe essere interessando il frame rate, ho scoperto che la piccola è la finestra, la più agevole il gioco gira ma solo in cromo. La quantità che viene disegnata sullo schermo o i calcoli usati dal gioco non dipendono affatto dalle dimensioni dello schermo.

misuro la differenza frame rate puro occhio, e si può vedere l'effetto in queste gif:

Bad, grande finestra:

Buono, piccola finestra:

Il gioco è molto più fluido nel browser di quanto non sembri in questi gif, ma l'effetto è ancora evidente.

Posso ottenere lo stesso effetto con il primo esempio nel collegamento che ho postato. Sono solo io o qualcun altro ha lo stesso effetto?

---

Ancora più strano ... Ho ottenuto lo stesso effetto su molti altri siti Web, come Facebook quando faccio scorrere il feed di casa. Più grande è la finestra, più il choppier diventa lo scorrimento. È una cosa specifica di Chrome, qualcuno sta ottenendo risultati simili?

Answer 1

Ho visto questo anche nelle mie pagine/applicazioni. Il problema sembra applicarsi a qualsiasi cosa, ma è più pronunciato con canvas e CSS accelerato. Per quanto posso dire, questo problema è un bug di prestazioni relativo a Chrome composited layer rendering. Fondamentalmente, Chrome suddivide la pagina in livelli e utilizza la GPU per renderizzare questi livelli. Puoi visualizzarli attivando l'opzione "Mostra bordi di livello compositi" nella scheda "Rendering" sulla console di sviluppo. Le prestazioni FPS di Chrome diminuiscono all'aumentare del numero di livelli compositi, indipendentemente dal fatto che i livelli cambino o meno.

Ecco un esempio indipendente. Procedura per riprodurre:

1. Load questa pagina in Chrome, è relativamente semplice animazione CSS demo che è una dimensione fissa come il vostro gioco: http://www.subcide.com/experiments/fail-whale/
2. Portare la finestra di Chrome sviluppatore (pop fuori quindi è un indipendente finestra) e abilitare l'opzione "Mostra misuratore FPS".
3. Ridimensiona la finestra in modo che contenga solo la demo di fail whale. Nota il tuo FPS.
4. Ora ridimensiona la finestra ingrandita o a schermo intero. Nota il tuo FPS.

Con una piccola finestra ottengo 55 FPS. Schermo intero, ottengo 34 FPS. Mi aspetto che l'FPS sia quasi lo stesso, indipendentemente dalle dimensioni della pagina, in quanto l'area animata non cambia. L'FPS sembra essere proporzionale al numero di strati compositi sullo schermo visibile. Inoltre, il ridimensionamento della finestra comporta che l'animazione sia di dimensioni ridotte e tralasciando i fotogrammi. Se eseguo la stessa finestra ridimensionando in Safari, l'animazione rimane liscia. Safari sa che non c'è nulla di nuovo da mostrare, mentre Chrome sembra fare un sacco di lavoro senza motivo.

Quindi il motivo per cui si vedono prestazioni migliori quando la console dev è aperta è perché la console dev è incorporata/incorporata nella pagina, il che rende la pagina stessa più piccola quando è aperta. Ciò si traduce in una pagina con meno livelli compositi per Chrome da gestire, il che si traduce in un migliore FPS. Se si apre la console dello sviluppatore in modo che sia una finestra indipendente e non influenzi le dimensioni della pagina, il proprio FPS non sarà interessato dalla console di sviluppo in corso o meno.

Questo sembra essere il "perché" sta accadendo. Ora, se qualcuno capisce cosa si può fare con lo, sarei curioso di sapere.