Retour

Comment Chrome affiche des pixels ?

Cet article est un work in progress

Résumé d'une video dispensée par la Chromium University intitulée Life of a Pixel.

Au premier chargement

Via le main thread du browser:

  1. DOM - Parsing de l’HTML (=analyse)

    1. Lecture et tokenisation des bytes

    2. Génération d’un object C++ c’est le DOM !

      3. Pour rappel, le DOM c’est à la fois la représentation interne qu’a le Browser de l’html, et aussi l’API exploitable par JS.
      Il peut y avoir plusieurs DOM dans un document. html peut supporter l’ajout de Widgets qui vont avoir leur DOM interne encapsulés dans un Shadow tree.
      Le document entier sera ensuite rassemblé dans un unique arbre FlatTreeTraversal.

  2. STYLE - Parsing du CSS

    1. Génération d’un object C++ pour toutes les règles CSS sous la forme “Propriété: value” (= BorderLeftColor: 0x0000FFFF;)

    2. Puis on parcours le DOM et pour chaque node, on calcule son style (= Style recalc) en s’aidant de l’objet généré précédemment.

      3. A quelques exceptions prêt, le résultat est ce qu’on voit dans le devtool !

  3. LAYOUT - Calcul du layout (= visual geometry) c’est-à-dire les coordonnées des “boites” qui composent la page (x, y, width et height)

    1. On parcours le DOM et pour chaque node, on calcule un LayoutObject. La somme de tout ces LayoutObjects donne le LayoutTree.

    2. Chaque LayoutObject est une implémentation d’un des LayoutAlgorithm (= LayoutBox, LayoutInline, LayoutTable…) et d’autres règles (= line breaks, scrollbar etc…)

      3. Pour faire du layout il faut mesurer la place que prend le texte dans la page grâce à une sous-discipline de la Computer Science appelé text shaping.
      HarfBuzz est la librairie utilisée et le travaille des ingés consistent à l’exploiter au mieux.

  4. Enregistrement d’instructions de peinture (= paint ops) dans un paint artefact pour être utilisé plus tard.

Via l’impl thread (ou compositor thread):

  1. Rasterization des instructions (= pixellisation) grâce c’est à dire transformées en un tableau de bits (= bitmap) et enregistrées en mémoire.
    Chaque cellule du tableau est une couleur. La rasterization est aussi utilisée dans le décodage des images.

    2. La rasterization est elle aussi une sous-discipline de la computer science

  2. Passe le résultat au GPU qui l’affiche à l’écran !

Quand il y a update (= par exemple un scroll, un zoom…) d’autres process rentrent en jeu comme le compositing.
L’idée ici est de décomposer la page en calques puis en tuiles dans le main thread et d’updater chacun de ces sous éléments individuellement avant
des les recombiner dans le compositor thread.