Que fait le navigateur pendant le rendu ? pourquoi est-ce si long ?
La question est complexe à répondre pour qui n’a pas touché au moteur d’un navigateur. Pour vous donner un premier aperçu, vous avez toutefois trois vidéo (faites par Satoshi Ueyamai pour une présentation au Japon). Elles vous montrent les différentes étapes de rendu du moteur Gecko pour les sites Mozilla.org, Wikipedia.org, et Google.jp. Plus exactement on visualise le reflow, c’est à dire l’événement interne qui indique qu’il faut recalculer les tailles et positionnement (si je ne m’abuse, c’est un domaine que je ne connais pas bien et toute précision est la bienvenue). je ne sais pas bien comment exploiter, mais au moins ça permet de constater.
Ces vidéos ont été obtenues en modifiant le code de Mozilla. Daniel Glazman nous avait dit aux dernières conférences Paris Web qu’il était désormais possible de réaliser cela via une extension depuis les dernières versions de Mozilla. Si quelqu’un souhaite se lancer…
En attendant Matthew Buchanan vous propose une extension pour voir le rendu progressif au fur et à mesure que la feuille de style est interprétée.
À mettre aussi en rapport avec l’intervention de David Baron dont je parlais en novembre.
Encore experimental:
https://addons.mozilla.org/fr/firefox/addon/9620
Sinon, ya des bookmarklets pas 100% fiables mais qui marchent pour ca aussi. Demande FF 3.1.
Oublié de dire, le mot clé magique pour trouver tout ca c’est MozAfterPaint.
J’ai du mal à dégager une analyse de ces vidéos. Que doit-on retenir ici ?
@Louis :
En fait, c’est pour visualiser le nombre de reflows et détecter un nombre anormalement élevé. Exemple :
document.body.appendChild(var ul=document.createElement(‘ul’));
for(var i=99; i>=0; i–)
li.appendChild(document.createElement(‘li’);
=> 100 reflows
var ul=document.createElement(‘ul’)
for(var i=99; i>=0; i–)
li.appendChild(document.createElement(‘li’);
document.body.appendChild(ul);
=> 1 reflow
Sachant que plus il y a de reflows, plus la page met du temps à s’afficher (normal…).
Merci pour l’explication Nicolas ! Avec l’exemple c’est très clair 🙂
No prob., même si je viens de me rendre compte d’une erreur, il faut remplacer « li » par « ul » car c’est à la liste qu’on ajoute les items.
++