Après avoir trop joué avec Canvas, vous commencerez automatiquement à considérer les problèmes de performances. Comment optimiser l’animation du canevas ?
【Utiliser le cache】
Utiliser le cache signifie utiliser un canevas hors écran pour le pré-rendu. Le principe est très simple, c'est-à-dire qu'il faut d'abord dessiner dans un canevas hors écran, puis dessiner le canevas hors écran dans le canevas principal via drawImage. Beaucoup de gens peuvent mal comprendre cela. N'est-ce pas un mécanisme de double tampon très utilisé dans les jeux ?
En fait, le mécanisme de double tampon est utilisé dans la programmation de jeux pour empêcher le scintillement de l'écran. Par conséquent, un canevas sera affiché devant l'utilisateur et un canevas d'arrière-plan lors du dessin, le contenu de l'écran sera d'abord dessiné vers le. canevas d'arrière-plan, puis le canevas d'arrière-plan sera dessiné. Les données du canevas sont dessinées sur le canevas avant. Il s'agit d'une double mise en mémoire tampon, mais il n'y a pas de double mise en mémoire tampon dans Canvas, car les navigateurs modernes ont essentiellement un mécanisme de double mise en mémoire tampon intégré. Par conséquent, l’utilisation d’un canevas hors écran n’est pas une double mise en mémoire tampon, mais traite le canevas hors écran comme une zone de cache. Mettez en cache les données d'écran qui doivent être dessinées à plusieurs reprises pour réduire la consommation d'appel de l'API Canvas.
Comme nous le savons tous, l'appel de l'API Canvas consomme des performances. Par conséquent, lorsque nous voulons dessiner des données d'écran répétées, une utilisation appropriée du canevas hors écran peut considérablement améliorer les performances. >
1. 2.Le cache est utilisé mais la largeur et la hauteur du canevas hors écran ne sont pas définies
3.Le cache est utilisé mais la largeur et la hauteur du canevas hors écran ne sont pas définies
4.Utilisez la mise en cache et définissez la largeur et la hauteur du canevas hors écran
Vous pouvez voir que les performances de la DÉMO ci-dessus sont différentes. Analysons les raisons ci-dessous : Afin d'obtenir le style de chaque cercle, j'ai utilisé le dessin de boucles lors du dessin de cercles si la mise en cache n'est pas activée, lorsque le nombre de cercles. cercles sur la page Lorsqu'il atteint un certain point, un grand nombre d'appels d'API de canevas sont nécessaires pour chaque image de l'animation, et une grande quantité de calculs sont nécessaires, de sorte que quelle que soit la qualité du navigateur, il sera amené vers le bas.
Code XML/HTMLCopier le contenu dans le presse-papiers
所以,我的方法很简单,每个圈圈对象里面给他一个离屏canvas作缓存区。
除了创建离屏canvas作为缓存之外,下面的代码中有一点很关键,就是要设置离屏canvas的宽度和高度,toile 生成后的默认大小是300X150;对于我的代码中每个缓存Il s'agit d'un appareil photo de 80 pouces, d'un panneau 300X150, d'un panneau de commande et d'un panneau de commande.浪费,所以就要设置一下离屏canvas的宽度和高度,让它跟缓存起来的元素大小一致,这样也有利于提高动画性能。上面的四个demo很明显的显示出了性能差距,如果没有设置宽高,当400 pièces de monnaie 1000 个圈圈对象也不觉得卡。
Lorsque j'instancie l'objet cercle, j'appelle directement la méthode cache, je dessine le cercle complexe directement dans le canevas hors écran de l'objet cercle et je l'enregistre.
Code XML/HTML
Copier le contenu dans le presse-papiers
Il y a une autre remarque concernant le canevas hors écran. Si l'effet que vous faites est de créer et de détruire continuellement des objets, veuillez utiliser le canevas hors écran avec prudence. Au moins, ne liez pas les attributs de chaque objet comme je l'ai écrit ci-dessus. Définir une toile hors écran.
Parce que s'il est lié de cette manière, lorsque l'objet est détruit, le canevas hors écran sera également détruit, et un grand nombre de canevas hors écran sont constamment créés et détruits, ce qui entraînera une consommation de tampon du canevas. beaucoup de ressources GPU et provoquent facilement un crash du navigateur ou un gel important de l'image. La solution consiste à créer un tableau de canevas hors écran, à précharger un nombre suffisant de canevas hors écran, à mettre en cache uniquement les objets encore vivants et à les libérer du cache lorsque les objets sont détruits. Cela n’entraînera pas la destruction du canevas hors écran.
【Utiliser requestAnimationFrame】
Je n'expliquerai pas cela en détail. Je suppose que beaucoup de gens savent que c'est la meilleure boucle pour l'animation, pas setTimeout ou setInterval. Postez directement la méthode d'écriture de compatibilité :
【Évitez les opérations en virgule flottante】
Bien que JavaScript fournisse des méthodes d'arrondi très pratiques, telles que Math.floor, Math.ceil et parseInt, des amis étrangers ont effectué des tests et la méthode parseInt effectue un travail supplémentaire (comme détecter si les données sont une valeur valide, parseInt convertit même le paramètre en chaîne en premier !), donc utiliser directement parseInt est relativement plus gourmand en performances. Alors, comment arrondir, vous pouvez directement utiliser une méthode très intelligente écrite par des étrangers :
.1.arrondi = (0,5 somenum) 0;
2.arrondi = ~~ (0,5 somenum); 3.arrondi = (0,5 somenum) << Si vous ne comprenez pas les opérateurs, vous pouvez simplement cliquer ici :
http://www.w3school.com.cn/js/pro_js_operators_bitwise.asp【Réduisez autant que possible les appels à CanvasAPI】
Lorsque vous créez des effets de particules, essayez d'utiliser le moins de cercles possible et utilisez de préférence des carrés. Parce que les particules sont trop petites, les carrés ressemblent à des cercles. Quant à la raison, elle est facile à comprendre. Nous avons besoin de trois étapes pour dessiner un cercle : d'abord commencerPath, puis utiliser arc pour dessiner un arc, puis utiliser fill pour le remplir afin de produire un cercle. Mais pour dessiner un carré, vous n’avez besoin que d’un seul fillRect. Bien qu'il n'y ait qu'une différence de deux appels, lorsque le nombre d'objets particules atteint un certain niveau, l'écart de performances apparaîtra.
Il y a d’autres choses à noter, je ne les énumérerai pas toutes car il y en a pas mal sur Google. Cela peut être considéré comme un enregistrement pour moi-même, principalement pour enregistrer l'utilisation du cache. Si vous souhaitez améliorer les performances de Canvas, le plus important est de prêter attention à la structure du code, de réduire les appels d'API inutiles, de réduire les opérations complexes dans chaque image ou de modifier les opérations complexes d'une fois pour chaque image à une fois pour plusieurs. cadres. En même temps, pour l'utilisation du cache mentionnée ci-dessus, pour plus de commodité, j'ai utilisé un canevas hors écran pour chaque objet. En fait, le canevas hors écran ne peut pas être utilisé de manière trop intensive. Il y aura des problèmes de performances. Veuillez faire de votre mieux. Faites un usage raisonnable du canevas hors écran.
Adresse du code source :
https://github.com/whxaxes/canvas-test/tree/gh-pages/src/Other-demo/cache