On a parlé des questions de rendu en novembre et plus récemment j’ai ressorti un vieux lien vers trois vidéos montrant les phases de rendu de Gecko. Il y a quelques jours j’ai aussi abordé la lenteur du DOM dans les navigateurs.
Tous les problèmes de performance ne sont pas dus au réseau. Le navigateur lui même prend du temps pour réaliser le rendu de la page web, et optimiser cette partie n’est pas inutile. Eric Lawrence et Christian Stockwell avaient fait une présentation aux conférence Velocity 2008 à propos d’Internet Explorer 8 en publiant deux graphiques sur la performance interne au navigateur. Le premier concerne une moyenne du TOP 100 du web. On y voit deux étapes « layout » et « rendering » qui prennent plus de deux tiers du temps, alors que finalement jscript et dom ne représentent pas grand chose. Pouvoir accélérer le rendu ne semble pas inutile. Même dans le cas d’une application très orientée « web 2.0 » donc principalement constituée de javascript, css, layout, rendering et html cumulés représentent un quart du temps passé.
On reprend donc tout ça avec d’un côté Nicole Sullivan qui fait un billet « reflow & repaint« . Elle y répertorie quelques causes de reflow et quelques recommandations simples pour les éviter. On retrouve l’idée des tableaux à taille fixe, l’absence d’expressions CSS pour IE, positionner en absolu les éléments qui bougent, etc. Pour ma part je rajouterai la question des boucles javascript dont j’avais parlé en février dans les questions de rendu (regrouper toutes les lectures de type offsetHeight d’un côté, et toutes les écritures de style / classe de l’autre).
Ensuite il y a la suite des trois vidéos. Le dernier moteur Gecko offre une interface pour intercepter l’événement MozAfterPaint et faire des choses sympa. On voit un bookmarklet pour tester le nombre reflow, un autre qui visualise les « paint », une extension de Firebug pour la même chose, et un profiler XUL qui permet de voir certaines choses de ce type. Pour ne rien gâcher on a même la procédure pour produire soi même les vidéos de reflow.
Enfin, pour ceux que ça intéresse, Mozilla publie une documentation sur les reflow HTML. Opera en parle aussi dans une documentation sur le Javascript efficace.