URL: https://linuxfr.org/users/see/journaux/dans-lequel-on-revient-sur-les-performances-svg-des-firefox
Title: Dans lequel on revient sur les performances SVG des Firefox
Authors: 못 옷 홋 ♨
Date: 2013-05-31T14:16:56+02:00
License: CC By-SA
Tags: svg, firefox, benchmark, chromium et canvas
Score: 21
Chers lecteurs et chères lectrices,
Vous vous souvenez peut-être de mon précédent journal, Où il est question de D3, des communes de France et des performances SVG des moteurs de rendu abordant brièvement les piètres performances de rendu SVG de Firefox. Un commentaire fort pertinent m'y a suggéré l'utilisation de `canvas` pour pallier à ces problèmes de performances.
Voici donc le résultat, avec la possibilité de passer de canvas à SVG pour comparer : http://ssz.fr/places
Vous remarquerez rapidement que les performances restent sensiblement les mêmes sous Chromium, mais qu'il y a une importante différence avec Firefox.
Plus récemment, j'ai fait une autre carte du même genre, avec moins d'éléments, mais plus dynamiques, ce qui rend un canvas moins adapté. La voici : http://ssz.fr/ker - ce n'est pas forcément très utile, ça permet de visualiser les (~1300) toponymes des îles Kerguelen par date d'attribution et par auteur, des premiers en 1772 aux derniers en 1971. Kerguelen est assez pratique pour ça, puisqu'elle a été découverte relativement récemment, et que l'origine de tous les noms a très bien été documentée par la Commission de Toponymie des Terres Australes dans les années 60-70.
Bref, avec seulement un millier de points, je me pensais loin de dépasser les limites de l'acceptable pour Firefox, or en SVG c'est tout simplement inutilisable, même après avoir enlevé tous les effets de transparence, et même en réduisant la taille des éléments pour éviter tout chevauchement (j'ai pu remarquer que les chevauchements entre éléments SVG opaques sont bien moins performants qu'entre éléments totalement transparents mais avec une épaisse bordure). J'ai donc fait un test avec des éléments HTML positionnés de manière absolue, au cas où — des `span` en `display:block` avec des `border-radius`, et du `transform: scale()` pour ajuster les dimensions — et... c'est plus performant que du SVG sur Firefox. Mais moins sur Chromium.
Pour avoir les meilleures performances sous Firefox, je me retrouve donc à faire un fond de carte en `canvas`, un graphique en SVG, et des points en HTML. Sous Chromium, le fond de carte en `canvas` a de bien meilleures performances qu'en SVG, mais reste quand même utilisable en SVG.
En conclusion, il semblerait qu'il faille éviter à tout prix d'utiliser du SVG avec Firefox, `canvas` a des performances largement supérieures à la fois avec Firefox et Chromium. Pour essayer d'optimiser le rendu suivant le navigateur, j'ai fini par mettre un
```js
var svg = typeof InstallTrigger == 'undefined';
```
qui met la variable `svg` à `true` quand le navigateur est autre que Firefox, pour décider de quelle méthode utiliser ensuite pour le rendu.