performance des canevas superposés vs manual drawImage()

Question

J'ai écrit un petit moteur graphique pour mon jeu qui a plusieurs canevas dans un arbre (ils représentent essentiellement des calques.) Chaque fois que quelque chose dans un calque change, le moteur marque les calques affectés comme "sale" et dans le code de rendu, la couche affectée la plus basse est copiée à son parent via drawImage(), qui est ensuite copiée dans son parent et ainsi de suite jusqu'à la couche racine (le canevas à l'écran).() appelle par trame mais empêche également de rediriger n'importe quoi sous le calque affecté. Cependant, dans les cadres où rien ne change aucun rendu ou drawImage() n'a lieu, et dans les cadres où seuls les objets de premier plan se déplacent, les appels de rendu et drawImage() sont minimes.

Je voudrais comparer à l'aide de plusieurs toiles à l'écran sous forme de couches, comme décrit dans cet article:

http://www.ibm.com/developerworks/library/wa-canvashtml5layering/

Dans l'approche de la toile à l'écran, nous traitons le rendu sur une base par couche et laissez le navigateur gérer l'affichage des calques sur l'écran correctement. De la recherche que j'ai faite et de tout ce que j'ai lu, cela semble être généralement accepté comme étant plus efficace que de le manipuler manuellement avec drawImage(). Donc, ma question est, le navigateur peut-il déterminer ce qui doit être rendu plus efficacement que je peux, malgré ma connaissance d'initié de exactement ce qui a changé chaque image?

Je connais déjà la réponse à cette question est «Faites-le dans les deux sens et de référence." Mais pour obtenir des données précises, j'ai besoin d'une application dans le monde réel, et cela dans des mois. D'ici là, si j'ai une approche acceptable, j'aurai de plus gros poissons à frire. Donc j'espère que quelqu'un a été sur cette route et peut fournir un aperçu de ceci.

Answer 1

Le navigateur ne peut rien déterminer quand il s'agit de l'élément canvas et du rendu car il s'agit d'un élément passif - tout ce qu'il contient est rendu par l'utilisateur au moyen de JavaScript. La seule chose que le navigateur fait est de canaliser ce qui est sur le canevas à l'affichage (et de le désagréer de temps en temps lorsque son bitmap doit être réaffecté).

Il n'y a malheureusement pas de règle d'or/réponse à ce qui est la meilleure optimisation car cela varie d'un cas à l'autre - il existe de nombreuses techniques qui peuvent être mentionnées mais elles ne sont que vous pouvez utiliser mais vous aurez toujours pour savoir ce que serait l'outil droite ou la bonne combinaison d'outils pour votre cas spécifique. Peut-être que les couches sont bonnes dans un cas et peut-être que cela n'apporte rien à un autre cas.

L'optimisation en général est une analyse et une décomposition en profondeur de modèles spécifiques au scénario, qui sont ensuite isolés et optimisés. Le processus, si souvent expérimenter, benchmarker, réajuster, expérimenter, benchmarker, réajuster, expérimenter, benchmarker, réajuster ... bien sûr l'expérience réduit ce processus au minimum mais même avec l'expérience les spécificités se déclinent dans une variété de les combinaisons qui nécessitent encore quelques ajustements d'un cas à l'autre (étant donné qu'elles ne sont pas identiques).

Même si vous trouvez une bonne recette pour votre projet actuel, il n'est pas certain qu'il fonctionnera de manière optimale avec votre prochain projet. C'est une raison pour laquelle personne ne peut donner une réponse exacte à cette question. Cependant, quand il s'agit de toile, ce que vous voulez obtenir est un minimum d'opérations effacées et des zones minimales à redessiner (drawImage ou formes). Le point avec couches est de regrouper les éléments pour permettre cet objectif.