Prerender sur toile 2D

Dans les tentatives d'optimisation de l'animation 2D créée dans le canevas, une option intéressante a été trouvée.

Visualisation préliminaire - pré-rendu.

"Et si vous enregistrez toutes les images à l'avance et les montrez après la fin de l'animation?" - Nous avons pensé avec un ami et c'est ce qui s'est passé le lendemain.

Démo en direct

amedomary.ru/prerender-canvas

Code v1.0

La page elle-même est sur Github .

La logique est très simple et est implémentée en 2 étapes:

Étape 1 - Enregistrez chaque image de notre animation dans un tableau d'images

  function renderLoop() {
    draw();

    // create prerender images
    canvasPrerender.toBlob(blob => {
      const reader = new FileReader();
      reader.readAsDataURL(blob);

      reader.onload = function() {
        const image = document.createElement("img");
        image.src = reader.result;
        prerenderArr.push(image);
      };
    });

    if (prerenderIsCompleted) {
      requestAnimationFrame(renderLoop);
    } else {
      requestAnimationFrame(drawPreImg);
    }
  }

2 — —

  function drawPreImg() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(prerenderArr[i], 0, 0);

    requestAnimationFrame(drawPreImg);
  }

Analytic

. macbook 13 2019 .

.

FPS

Fps "" .

Fps "" (prerender): 14-22
Fps "" ( ): 58-60

, live demo.

Prerender — 9
— 3
— 12 ( live demo)

CPU / Performance

Comme le montre la capture d'écran ci-dessous - notre processeur ne souffre qu'au stade de la prérender. Dessiner des images toutes faites n'est pas difficile.

Mémoire

Pour une petite animation comme la nôtre, tout cela prend:
~ 432/2 = 200 images
~ 25 mb

Conclusion

Si vous avez la possibilité d'attendre avant de montrer l'animation à l'utilisateur et qu'elle ne consommera pas de gigaoctets de mémoire, essayez de faire quelque chose comme ça.

PS

Si vous avez des idées pour améliorer les performances de cette approche - écrivez :)