2011-06-01 4 views
0

Je construis une page Web qui utilise SVG, Canvas et, bien sûr, HTML. L'idée de cette page est d'animer le redessin de certains des chemins svg sur la toile. Les chemins que j'aime redessiner sont annotés avec un Attribut d'espace de noms, tous les autres chemins sont simplement affichés tels quels. Tout cela fonctionne très bien! La fuite de performance est apparue les deux dernières heures pendant que j'ajoutais du contenu à la page. Mais d'abord une petite illustration de la mise en page: decription of the page setupProblème de performance sur un site Web HTML5

Le SVG et Canvas sont les deux 4000 * 4000 px de large et se trouvent directement au-dessus de l'autre dans un conteneur div. Passer d'une "page" à une autre signifie interpoler le bord supérieur gauche de ce conteneur. Cela fonctionnait aussi bien puisque la discussion de l'insertion de texte tournait dans le sens de l'utilisation du conteneur div html, au lieu du svg lui-même. Donc, j'ai inséré un troisième conteneur div dans lequel tous les textes sont stockés et après svg est chargé, ils sont positionnés de manière absolue. Avec chaque div j'ai ajouté le "pan-tween" et même la performance de dessin a diminué à un point qui est juste trop bas. Je cherche un moyen de ramener la performance à un niveau acceptable pour l'utilisateur. Une de mes idées est de définir les divs de texte à afficher: none, ou visibility: hidden, tant qu'ils ne sont pas affichés réellement. Une autre option consiste à interpoler uniquement svg et canvas, une fois que le placement de text-div-container est terminé en une seule étape. Mais je ne suis pas sûr à l'heure actuelle quelle solution est la meilleure, ou s'il n'y a pas quelque chose de bien meilleur. Donc, si quelqu'un a une idée, s'il vous plaît faites le moi savoir.

Merci d'avoir lu! Salutations Philipp

+0

Veuillez spécifier le (s) navigateur (s) et la ou les version (s) que vous testez - les performances peuvent varier énormément selon les navigateurs. – Spudley

+0

j'ai développé dans firefox4, mais il fonctionne également dans IE9, dernier safari, chrome et très lent dans l'opéra – philipp

+0

alors, je viens d'implémenter la solution avec tous les éléments html à la visibilité: cachés quand ils ne sont pas affichés et dans tous la situation s'est un peu améliorée, ou, en d'autres termes: la situation ne s'est pas aggravée :) – philipp

Répondre

0

Essayez de faire un panoramique sur le "texte div" externe par intervalles (disons 10ms ou 50ms). Je cela avec beaucoup de rendu, en HTML j'utilise généralement des valeurs plus grandes comme 100ms ou 150ms (je l'utilise pour faire du canvas). Je n'ai pas compris si vous faites un panoramique sur la div externe ou sur tous les "divs de texte".

Questions connexes