Osiągnięcie nieco stabilnej szybkości klatek z requestAnimationFrame?

Question

Gram z urządzeniem requestAnimationFrame, ale otrzymuję bardzo ostre animacje w dowolnej przeglądarce niż Chrome.

utworzyć obiekt tak:

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)); 
     } 
    }; 
} 

Teraz jestem po prostu rysunek jeden prostokąt na elemencie canvas i przesuwając go dookoła. Jest to bardzo lekka operacja na procesorze. Działa to całkiem sprawnie w Chrome, a kiedy konsola loguje wartość delta, prawie wynosi około ~ 17. Jednakże, jeśli zrobić to samo w Firefox lub Safari uzyskać następujące wartości 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 

Wygląda to tak, jakby przeglądarka nie synchronizuje z wyświetlaczem bardzo ładnie, a we wszystkich innych przypadkach niż Chrome, można by uzyskać płynniejsze animacje za pomocą starej metody setTimeout z 16 ms jako docelowym limitem czasu.

Czy ktoś wie, czy możliwe jest uzyskanie płynniejszych animacji za pomocą requestAnimationFrame w przeglądarkach innych niż Chrome? Czy ktoś osiągnął bardziej stabilne wartości delta niż te zamieszczone powyżej w Firefoksie?

Answer 1

Można uzyskać płynność animacji, jeśli pominąć aktualizacje, gdy delta < próg, na przykład:

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

Answer 2

Powodem sprawnego framerate z animacji zmniejsza się ze względu na pamięć przeglądarki w odniesieniu do brezentowy. Nie znam prawdziwych szczegółów wydajności w przeglądarkach, ale firefox prawie natychmiast ma spadek liczby klatek na sekundę, a w chrome spadek pojawia się jakiś czas później.

Prawdziwy problem spadku liczby klatek na sekundę wynika z pamięci zajmowanej przez element canvas. Za każdym razem, gdy narysujesz coś na płótnie, operacja zostanie zapisana na ścieżce płótna. Ta ścieżka zajmuje więcej pamięci za każdym razem, gdy narysujesz coś na płótnie. Jeśli nie opróżnisz ścieżki płótna, zmniejszy się liczba klatek na sekundę. Ścieżki canvas nie można opróżnić, czyszcząc płótno za pomocą context.clearRect(x, y, w, h);, zamiast tego trzeba zresetować ścieżkę canvas, rozpoczynając nową ścieżkę za pomocą context.beginPath();. Na przykład:

// 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 
}