Ottieni un framerate alquanto stabile con requestAnimationFrame?

Question

Sto giocando con lo requestAnimationFrame ma ottengo animazioni molto a scatti in qualsiasi altro browser rispetto a Chrome.

creo un oggetto come questo:

var object = function() { 

    var lastrender = (new Date()).getTime(); 
    var delta = 0; 

    return { 

     update: function() { 
      //do updates using delta value in calculations. 
     }, 

     loop: function() { 
      var looptimestamp = (new Date()).getTime(); 
      delta = looptimestamp - lastrender; 
      lastrender = looptimestamp; 

      this.update(); 

      window.requestAnimationFrame(this.loop.bind(this)); 
     } 
    }; 
} 

In questo momento sto solo disegnando un singolo rettangolo su un elemento di tela e si muove intorno. È un'operazione molto leggera sul processore. Funziona senza intoppi in Chrome e quando registro la console il valore delta, è quasi costante intorno a ~ 17. Tuttavia, se faccio lo stesso in Firefox o Safari Ottengo i seguenti valori delta:

17-3-17-2-32-34-32-31-19-31-17-3-0-14-3-14-35-31-16-3-17-2 ... and so on 

Sembra come se il browser non è sincronizzato con il display molto bene, e in tutti gli altri casi di Chrome, si farebbe ottenere animazioni più fluide utilizzando il vecchio metodo setTimeout con 16 ms come timeout di destinazione.

Qualcuno sa, se è possibile ottenere animazioni più fluide utilizzando requestAnimationFrame in browser diversi da Chrome? Qualcuno è riuscito a ottenere valori delta più stabili rispetto a quelli pubblicati sopra in Firefox?

Answer 1

Si potrebbe ottenere un'animazione più fluida se si salta aggiornamenti quando delta < soglia, ad esempio:

if (delta > 5) this.update(); 

Answer 2

Il motivo per il corretto framerate dell'animazione diminuisce è a causa della memoria del tuo browser per quanto riguarda la tela. Non conosco i dettagli reali delle prestazioni nei browser, ma Firefox ha quasi subito una caduta framerate e in Chrome la goccia si verifica qualche tempo dopo.

Il vero problema della caduta framerate è dovuto alla memoria occupata dall'elemento canvas. Ogni volta che disegni qualcosa sulla tela, l'operazione viene salvata sul percorso della tela. Questo percorso occupa più memoria ogni volta che disegni qualcosa sulla tela. Se non svuoti il ​​percorso della tela avrai gocce framerate. Il percorso della tela non può essere svuotato cancellando la tela con context.clearRect(x, y, w, h);, invece devi reimpostare il percorso della tela iniziando un nuovo percorso con context.beginPath();. Ad esempio:

// function that draws you content or animation 
function draw(){ 
    // start a new path/empty canvas path 
    canvas.beginPath(); 

    // actual drawing of content or animation here 
}