Geekeries et d'autres choses - Mot-clé - DOM2024-01-29T10:26:26+01:00urn:md5:51ff50324f4f72c0e78683659647f2c8DotclearComment marche un navigateur, par Anthony Ricaudurn:md5:48881abb727b5300b9bfe0a76af405962011-12-23T10:33:00+01:002011-12-26T11:20:29+01:00Julien WajsbergParis-Web 2011Anthony RicaudCSSDOMJavascriptnavigateurpariswebparisweb2011web <p><em>Ce billet est un compte rendu de la <a href="http://www.paris-web.fr/2011/conferences/un-navigateur-comment-ca-marche.php">conférence de Anthony Ricaud à Paris-Web 2011</a>. <a href="http://hanblog.info/blog/post/2011/10/Paris-Web-2011">Les slides sont déjà disponibles en ligne</a> et <a href="http://www.paris-web.fr/telechargements/2011/01-jeudi/JE-PA-06-ARicaud/un_navigateur_comment_ca_marche.pdf">en PDF</a>.</em></p>
<p>En gros, sur le web, on a 4 moteurs principaux: Presto (chez Opera), Gecko (chez Firefox), Trident (chez Microsoft), et WebKit (chez Chrome et Safari).</p>
<h3>La requête HTTP</h3>
<p>Lorsqu'on tape une requête, il se passe d'abord :</p>
<ul>
<li>une analyse: le navigateur récupère le protocole, le domaine</li>
<li>il réalise une requête DNS pour retrouver l'IP</li>
<li>il ouvre une connexion TCP/IP et réalise une requête HTTP</li>
<li>il récupère alors la page voulue.</li>
</ul>
<h3>Mode du rendu</h3>
<p>Bon, maintenant, il faut savoir que les navigateurs se fichent bien des standards. Tout
ce qui compte, c'est savoir dans quel mode on est: mode XML, mode quirks, ou mode standard.
Comme vous le savez sans doute, c'est défini par le doctype et/ou le content-type de la réponse.</p>
<h3>Application des règles CSS</h3>
<p>On classifie les règles CSS par type de règle pour pouvoir les rechercher
très rapidement ensuite (table de hachage). Un type, c'est: id, classe ou pseudo-classe, élément ou
pseudo-élément, autres (genre sélecteur d'attribut). Et quand le sélecteur a plusieurs
morceaux, on prend le morceau le plus à droite pour classer.</p>
<p>Tout ce qui est dans "autres" ralentit pas mal le traitement. De même, plus le sélecteur a de
morceaux, plus ça sera lent. Une bonne règle à se rappeler, en gros, c'est que si le sélecteur
doit échouer, il doit le faire vite (pour chaque élément
de la page), car c'est ce qui arrive le plus souvent sur une page. En passant, c'est pourquoi le sélecteur de descendance est un peu déconseillé.</p>
<p>Mais dans la vraie vie
ça reste plus ou moins négligeable.</p>
<h3>Le rendu</h3>
<p>Puis on fait un arbre de rendu, ce qu'on appelle l'arbre DOM, qui correspond
à l'arbre des balises dans le document HTML.</p>
<p>On calcule le layout (où sont les éléments, quelles sont leurs tailles). C'est un
des trucs les plus longs, ça se fait dans le sens descendant d'abord,
puis dans le sens montant. Et parfois il y a des allers-retours.</p>
<p>Puis on fait le painting, le dessin. Historiquement, c'était le processeur qui faisait tout,
mais à présent on délègue plus au processeur graphique quand c'est possible,
en utilisant des techniques
de compositing.</p>
<h3>Le DOM</h3>
<p>Lorsqu'on utilise Javascript, ce sont surtout les accès au DOM qui sont lents
(même si c'est moins vrai aujourd'hui). Notamment, il faut faire attention
aux reflows intempestifs déclenchés par des accès DOM.</p>
<p>Les nouveaux moteurs Javascript se sont beaucoup améliorés en vitesse,
notamment en utilisant des techniques de type JIT, mais
il ne faut pas oublier le DOM !</p>
<h3>Des liens:</h3>
<ul>
<li><a href="http://articles.nissone.com/2011/12/fonctionnement-navigateur-soiree-performance-web/">Delphine Malassingne a fait un compte rendu assez complet</a></li>
<li><a href="http://hanblog.info/blog/post/2011/10/Paris-Web-2011">Anthony Ricaud a publié sa présentation sur son blog</a></li>
<li><a href="http://blogmarks.net/user/rik/marks/tag/navigateur-marche">Il a aussi partagé un ensemble de liens</a></li>
</ul>