Ce billet est un compte rendu de la conférence de Anthony Ricaud à Paris-Web 2011. Les slides sont déjà disponibles en ligne et en PDF.
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).
La requête HTTP
Lorsqu'on tape une requête, il se passe d'abord :
- une analyse: le navigateur récupère le protocole, le domaine
- il réalise une requête DNS pour retrouver l'IP
- il ouvre une connexion TCP/IP et réalise une requête HTTP
- il récupère alors la page voulue.
Mode du rendu
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.
Application des règles CSS
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.
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é.
Mais dans la vraie vie ça reste plus ou moins négligeable.
Le rendu
Puis on fait un arbre de rendu, ce qu'on appelle l'arbre DOM, qui correspond à l'arbre des balises dans le document HTML.
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.
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.
Le DOM
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.
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 !
