Au cœur du navigateur Web moderne (partie 1)

Mariko Kosaka

Processeur, GPU, mémoire et architecture multiprocessus

Dans cette série de quatre articles de blog, nous allons nous intéresser au navigateur Chrome, de l'architecture de haut niveau aux spécificités du pipeline de rendu. Si vous vous êtes déjà demandé comment le navigateur transforme votre code en un site Web fonctionnel, ou si vous ne savez pas pourquoi une technique spécifique est suggérée pour améliorer les performances, cette série est faite pour vous.

Dans la première partie de cette série, nous examinerons la terminologie de l'informatique de base et l'architecture multiprocessus de Chrome.

Au cœur de l'ordinateur se trouvent le CPU et le GPU

Pour comprendre l'environnement dans lequel s'exécute le navigateur, nous devons connaître quelques composants de l'ordinateur et ce qu'ils font.

Processeur

Processeur
Figure 1: Quatre cœurs de processeur utilisés par des employés de bureau assis à chaque bureau, traitant des tâches en temps réel

Le premier est le C C (ou C).C Le CPU peut être considéré comme le cerveau de votre ordinateur. Un cœur de processeur, illustré ici par un employé de bureau, peut gérer de nombreuses tâches différentes une par une, au fur et à mesure qu'elles arrivent. Il peut tout gérer, des mathématiques à l'art, tout en sachant comment répondre aux appels d'un client. Auparavant, la plupart des CPU n'étaient qu'une seule puce. Un cœur est comme un autre CPU vivant dans la même puce. Les appareils modernes disposent souvent de plusieurs cœurs, ce qui augmente la puissance de calcul de vos téléphones et ordinateurs portables.

GPU

GPU
Figure 2: De nombreux cœurs de GPU avec une clé à molette indiquant qu'ils gèrent une tâche limitée

Le graphics Processing Unit (ou GPU) fait également partie de l'ordinateur. Contrairement au processeur, le GPU est capable de gérer des tâches simples, mais sur plusieurs cœurs en même temps. Comme son nom l'indique, cette application a d'abord été développée pour gérer les éléments graphiques. C'est pourquoi, dans le contexte des graphismes, l'utilisation d'un GPU ou l'utilisation d'un GPU sont associées à un rendu rapide et à une interaction fluide. Ces dernières années, avec l'accélération par GPU, de plus en plus de calculs sont possibles uniquement sur les GPU.

Lorsque vous démarrez une application sur votre ordinateur ou votre téléphone, ce sont le processeur et le GPU qui alimentent l'application. En règle générale, les applications s'exécutent sur le processeur et le GPU à l'aide des mécanismes fournis par le système d'exploitation.

Matériel, système d'exploitation, application
Figure 3: Trois couches de l'architecture IT. Matériel de la machine en bas, système d'exploitation au milieu et application en haut.

Exécuter le programme sur Process et Thread

processus et threads
Figure 4: Traitement en tant que cadre de délimitation, et fils en tant que poisson abstrait nageant à l'intérieur d'un processus

Les processus et les threads sont un autre concept à maîtriser avant d'aborder l'architecture des navigateurs. Un processus peut être décrit comme le programme d'exécution d'une application. Un thread est un thread qui réside à l'intérieur du processus et exécute une partie du programme de son processus.

Lorsque vous démarrez une application, un processus est créé. Le programme peut créer des threads pour l'aider à fonctionner, mais cette étape est facultative. Le système d'exploitation fournit au processus une "dalle" de mémoire à utiliser, et tous les états de l'application sont conservés dans cet espace mémoire privé. Lorsque vous fermez l'application, le processus disparaît et le système d'exploitation libère de la mémoire.

processus et mémoire
Figure 5: Schéma d'un processus utilisant l'espace mémoire et le stockage des données d'application

Un processus peut demander au système d’exploitation de lancer un autre processus pour exécuter différentes tâches. Dans ce cas, différentes parties de la mémoire sont allouées au nouveau processus. Si deux processus doivent communiquer, ils peuvent le faire à l'aide de la Communication de prospection (IPC). De nombreuses applications sont conçues pour fonctionner de cette manière. Ainsi, si un processus de nœud de calcul ne répond plus, il peut être redémarré sans arrêter les autres processus qui exécutent différentes parties de l'application.

processus de nœud de calcul et IPC
Figure 6: Schéma de processus distincts communiquant via IPC

Architecture du navigateur

Comment un navigateur Web est-il conçu à l'aide de processus et de threads ? Il peut s'agir d'un processus avec plusieurs threads différents ou de nombreux processus différents avec quelques threads communiquant via IPC.

architecture du navigateur
Figure 7: Différentes architectures de navigateur dans un schéma de processus / threads

Il est important de noter que ces différentes architectures correspondent à des détails d'implémentation. Il n'existe aucune spécification standard concernant la création d'un navigateur Web. L'approche d'un navigateur peut être complètement différente d'un autre.

Pour les besoins de cette série d'articles, nous utilisons l'architecture récente de Chrome, décrite à la figure 8.

En haut se trouve le processus du navigateur coordonné avec d'autres processus qui prennent en charge différentes parties de l'application. Pour le processus de moteur de rendu, plusieurs processus sont créés et affectés à chaque onglet. Jusqu'à très récemment, Chrome donnait à chaque onglet un processus lorsqu'il le pouvait. Maintenant, il essaie d'attribuer à chaque site son propre processus, y compris les iFrames (voir Isolation de sites).

architecture du navigateur
Figure 8: Schéma de l'architecture multiprocessus de Chrome. Plusieurs calques sont affichés sous "Processus de moteur de rendu" pour représenter Chrome en train d'exécuter plusieurs processus de moteur de rendu pour chaque onglet.

Quel processus contrôle quoi ?

Le tableau suivant décrit chaque processus Chrome et ce qu'il contrôle:

Processus et éléments contrôlés
Navigateur Contrôle la partie "Chrome" de l'application, y compris la barre d'adresse, les favoris, ainsi que les boutons "Précédent" et "Suivant".
Gère également les parties privilégiées et invisibles d'un navigateur Web, telles que les requêtes réseau et l'accès aux fichiers.
Moteur de rendu Contrôle tout ce qui se trouve dans l'onglet où un site Web est affiché.
Plugin Contrôle les plug-ins utilisés par le site Web, par exemple Flash.
GPU Gère les tâches GPU indépendamment des autres processus. Elle est séparée en processus différent, car les GPU traitent les requêtes de plusieurs applications et les dessinent sur la même surface.
Processus Chrome
Figure 9: Différents processus pointant vers différentes parties de l'interface utilisateur du navigateur

Il existe encore plus de processus, comme le processus d'extension et les processus utilitaires. Si vous souhaitez voir le nombre de processus en cours d'exécution dans Chrome, cliquez sur l'icône du menu d'options dans l'angle supérieur droit, sélectionnez "Autres outils", puis "Gestionnaire de tâches". Une fenêtre s'ouvre avec la liste des processus en cours d'exécution et la quantité de CPU/de mémoire qu'ils utilisent.

Avantages de l'architecture multiprocessus dans Chrome

Comme nous l'avons vu précédemment, Chrome utilise plusieurs processus de moteur de rendu. Dans le cas le plus simple, vous pouvez imaginer que chaque onglet a son propre processus de moteur de rendu. Imaginons que vous ayez trois onglets ouverts et que chacun d'eux soit exécuté par un processus de moteur de rendu indépendant.

Si un onglet ne répond plus, vous pouvez le fermer et continuer tout en laissant les autres onglets actifs. Si tous les onglets s'exécutent dans un processus, lorsqu'un onglet ne répond plus, tous ne répondent plus. C'est dommage.

plusieurs moteurs de rendu pour les onglets
Figure 10: Schéma illustrant plusieurs processus exécutant chaque onglet

La séparation des tâches du navigateur en plusieurs processus présente un autre avantage : la sécurité et le système de bac à sable. Étant donné que les systèmes d'exploitation permettent de restreindre les droits des processus, le navigateur peut mettre en bac à sable certains processus associés à certaines fonctionnalités. Par exemple, le navigateur Chrome limite l'accès arbitraire aux fichiers pour les processus qui traitent des entrées utilisateur arbitraires, comme le processus du moteur de rendu.

Comme les processus disposent de leur propre espace de mémoire privé, ils contiennent souvent des copies de l'infrastructure commune (comme V8, le moteur JavaScript de Chrome). Cela signifie une plus grande utilisation de la mémoire, car elles ne peuvent pas être partagées comme si elles étaient des threads d'un même processus. Afin d'économiser de la mémoire, Chrome limite le nombre de processus qu'il peut lancer. La limite varie en fonction de la quantité de mémoire et de puissance de processeur de votre appareil, mais lorsque Chrome atteint la limite, il commence à exécuter plusieurs onglets du même site au cours d'un même processus.

Économie de mémoire supplémentaire : maintenance dans Chrome

La même approche est appliquée au processus du navigateur. L'architecture de Chrome est en cours de modification afin d'exécuter chaque partie du navigateur en tant que service, ce qui permet de le diviser en plusieurs processus ou de les agréger en un seul.

L'idée générale est que lorsque Chrome s'exécute sur du matériel puissant, il peut diviser chaque service en différents processus, ce qui offre plus de stabilité. Toutefois, s'il est installé sur un appareil disposant de ressources limitées, Chrome regroupe les services en un seul processus permettant de réduire l'encombrement de la mémoire. Une approche similaire, qui consiste à consolider les processus pour diminuer l'utilisation de la mémoire, a été adoptée sur des plates-formes comme Android avant ce changement.

Serification de Chrome
Figure 11: Schéma de la maintenance de Chrome en déplaçant différents services dans plusieurs processus et dans un seul processus de navigateur

Processus du moteur de rendu par image – Isolation de sites

L'isolation de sites est une fonctionnalité récemment introduite dans Chrome qui exécute un processus de moteur de rendu distinct pour chaque iFrame intersite. Nous avons parlé d'un processus de moteur de rendu par modèle d'onglet, qui permettrait à des cadres iFrame intersites de s'exécuter dans un seul processus de moteur de rendu avec partage de l'espace mémoire entre différents sites. Exécuter a.com et b.com dans le même processus de moteur de rendu peut sembler acceptable. Le règlement de même origine est le modèle de sécurité principal du Web. Il garantit qu'un site ne peut pas accéder aux données d'autres sites sans consentement. Le contournement de cette règle est l'un des objectifs principaux des attaques de sécurité. L'isolation de processus est le moyen le plus efficace de séparer les sites. Avec Meltdown et Spectre, il est devenu encore plus évident que nous devions séparer les sites à l'aide de processus. Avec l'isolation de sites activée par défaut sur les ordinateurs de bureau depuis Chrome 67, chaque iFrame intersite dans un onglet reçoit un processus de moteur de rendu distinct.

isolation de sites
Figure 12: Schéma de l'isolation de sites (plusieurs processus de moteur de rendu pointant vers des cadres iFrame sur un site)

L'activation de l'isolation de sites est le fruit d'un travail d'ingénierie pluriannuel. L'isolation de sites ne se résume pas à attribuer différents processus de moteur de rendu. Elle modifie fondamentalement la façon dont les iFrame communiquent entre eux. En ouvrant les outils de développement sur une page avec des iFrames s'exécutant sur différents processus, ils doivent implémenter un travail en arrière-plan pour que l'interface semble fluide. Même exécuter un simple Ctrl+F pour trouver un mot dans une page implique une recherche dans différents processus de moteur de rendu. Comme vous le voyez, les ingénieurs de navigateurs considèrent la sortie de l'isolation de sites comme une étape majeure !

Conclusion

Dans cet article, nous avons abordé une vue d'ensemble de l'architecture des navigateurs et abordé les avantages d'une architecture multiprocessus. Nous avons également abordé la maintenance et l'isolation de sites dans Chrome, qui sont étroitement liées à l'architecture multiprocessus. Dans le prochain article, nous commencerons à expliquer ce qui se passe entre ces processus et threads pour afficher un site Web.

Avez-vous apprécié ce post ? Si vous avez des questions ou des suggestions pour notre prochain article, n'hésitez pas à me contacter à l'adresse @kosamari sur Twitter.

Étape suivante: Que se passe-t-il pendant la navigation ?