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 son architecture de haut niveau à les spécificités du pipeline de rendu. Vous vous êtes déjà demandé comment le navigateur transforme votre code en un site Web fonctionnel, ou 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 le premier volet de cette série, nous allons étudier la terminologie informatique de base et les fonctionnalités architecture multiprocessus.

Le processeur et le GPU sont au cœur de l'ordinateur

Pour comprendre l'environnement dans lequel le navigateur s'exécute, nous devons connaître quelques-unes les pièces d’ordinateur et ce qu'elles font.

Processeur

Processeur
Figure 1: 4 cœurs de processeur représentant des employés de bureau assis à chaque bureau gérant des tâches au fur et à mesure de leur arrivée

Le premier est le Central Processing Unit ou CPU (Processeur). Le CPU peut être considéré comme le cerveau d'un ordinateur. Un cœur de processeur, représenté ici par un employé de bureau, peut gérer de nombreuses tâches différentes l'un après l'autre à mesure qu'elles arrivent. Il peut tout gérer, des mathématiques à l'art, et sait répondre à un appel client. Auparavant, la plupart des processeurs n'étaient qu'une seule puce. Un cœur est comme un autre CPU résidant dans la même puce. Dans les appareils modernes, on a souvent plusieurs cœurs, ce qui offre plus de puissance de calcul à vos téléphones et ordinateurs portables.

GPU

GPU
Figure 2: Nombre de cœurs de GPU avec une clé suggérant qu'ils gèrent une tâche limitée

Graphics Processing Unit, ou GPU, est une autre partie de l'ordinateur. Contrairement au CPU, Le GPU est efficace pour gérer des tâches simples, mais sur plusieurs cœurs en même temps. Comme le nom suggère, il a d’abord été développé pour gérer les graphismes. C'est pourquoi, dans le contexte des graphismes, "avec un GPU" ou "compatible avec le GPU" est associé à un rendu rapide et à une interaction fluide. Ces dernières années, avec l'informatique accélérée par GPU, de plus en plus de calculs deviennent possibles sur GPU uniquement.

Lorsque vous démarrez une application sur votre ordinateur ou votre téléphone, ce sont les processeurs et le GPU qui alimentent l'application. Habituellement, les applications s'exécutent sur le CPU et le GPU à l'aide de mécanismes fournis par le Système d'exploitation.

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

Exécuter le programme sur le processus et le thread

de processus et de threads
Figure 4: Traitement sous la forme d'un cadre de délimitation, les fils représentant un poisson abstrait nageant à l'intérieur d'un processus

Un autre concept à comprendre avant de plonger dans l'architecture des navigateurs est Process et Thread. Un processus peut être décrit comme le programme d'exécution d'une application. Un thread est celui qui se trouve à l’intérieur du processus et exécute n’importe quelle partie du programme de son processus.

Lorsque vous démarrez une application, un processus est créé. Le programme peut créer un ou plusieurs fils de discussion pour l'aider fonctionne, mais c'est facultatif. Le système d’exploitation donne au processus une « slab » de mémoire pour fonctionner et tous les états de l'application sont conservés dans cet espace mémoire privé. Lorsque vous fermez application, le processus disparaît également et le système d’exploitation libère la mémoire.

les processus et la 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. Lorsque cette différentes parties de la mémoire sont allouées pour le nouveau processus. Si deux processus doivent via l'Inter Process Communication (IPC). Nombreuses applications sont conçus 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 d'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 l'IPC

Architecture du navigateur

Alors, comment un navigateur Web est-il construit à l’aide de processus et de threads ? Eh bien, il pourrait s’agir d’un processus avec de nombreuses différents threads ou de nombreux processus différents avec quelques threads communiquant via IPC.

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

Il est important de noter que ces différentes architectures sont des détails de mise en œuvre. Il n'existe aucune spécification standard sur la manière de créer un navigateur Web. L'approche adoptée par un seul navigateur être complètement différents des autres.

Pour les besoins de cette série d'articles de blog, nous utilisons l'architecture récente de Chrome, décrites dans la Figure 8.

Dans la partie supérieure se trouve le processus du navigateur, qui se coordonne avec les autres processus de l'application. Pour le processus du moteur de rendu, plusieurs processus sont créés chaque onglet. Jusqu'à très récemment, Chrome donnait à chaque onglet un processus lorsqu'il le pouvait : il essaie maintenant de donner Chaque site a son propre processus, y compris les tags iFrame (voir la section Isolation de sites).

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

Quel processus contrôle quoi ?

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

Le processus et ce qu'il contrôle
Navigateur Contrôle "chrome" partie de l'application, y compris la barre d'adresse, les favoris, boutons Suivant.
Gère également les parties privilégiées invisibles d'un navigateur Web telles que les requêtes réseau et l'accès aux fichiers.
Moteur de rendu Contrôle tous les éléments de l'onglet où un site Web est affiché.
Plug-in Contrôle tous les plug-ins utilisés par le site Web (Flash, par exemple).
GPU Gère les tâches GPU indépendamment des autres processus. Il est divisé en plusieurs processus car les GPU traitent les requêtes de plusieurs applications et les dessinent sur une 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 tels que le processus d'extension et les processus utilitaires. Si vous voulez voir combien de processus sont en cours d'exécution dans votre navigateur Chrome, cliquez sur l'icône du menu d'options en haut à droite, sélectionnez "Plus d'outils", puis sélectionnez Gestionnaire de tâches. Cela ouvre une fenêtre avec une liste des processus en cours d'exécution et la quantité de CPU/mémoire qu'elles utilisent.

Avantages de l'architecture multiprocessus de Chrome

Comme indiqué précédemment, Chrome utilise plusieurs processus de moteur de rendu. Dans le cas le plus simple, vous pouvez imaginez 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 fermer l'onglet qui ne répond pas et continuer tout en gardant d’autres onglets en vie. Si tous les onglets s'exécutent dans un même processus, lorsqu'un onglet ne répond plus, les les onglets ne répondent pas. C'est triste.

plusieurs moteurs de rendu pour les onglets
Figure 10: Schéma illustrant l'exécution de plusieurs processus dans chaque onglet

Un autre avantage de diviser le travail du navigateur en plusieurs processus est la sécurité et en bac à sable. Étant donné que les systèmes d'exploitation fournissent un moyen de restreindre les processus des droits, le navigateur peuvent mettre en bac à sable certains processus à partir de certaines fonctionnalités. Par exemple, le navigateur Chrome restreint un accès arbitraire aux fichiers pour les processus qui traitent des entrées utilisateur arbitraires comme le processus de rendu.

Comme les processus ont leur propre espace mémoire privé, ils contiennent souvent des copies de (comme V8, le moteur JavaScript de Chrome). Cela signifie plus d'utilisation de la mémoire ils ne peuvent pas être partagés comme ils le seraient s’ils étaient des fils de discussion au sein du même processus. Pour é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 la puissance du processeur dont dispose votre appareil, mais lorsque Chrome s'exécute la limite, il commence à exécuter plusieurs onglets du même site en un seul 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 exécuter chaque partie du programme du navigateur en tant que service, ce qui permet de les diviser en différents processus ou de les regrouper 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 offrant plus de stabilité, mais s'il s'agit d'un appareil à contraintes de ressources, Chrome et regroupe les services en un seul processus, ce qui permet d'économiser l'espace mémoire utilisé. Approche similaire de la consolidation des processus visant à réduire l’utilisation de la mémoire ont été utilisés sur des plateformes comme Android avant ce changement.

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

Processus du moteur de rendu par image – Isolation de sites

L'isolation de sites est une fonctionnalité Lancement d'une fonctionnalité dans Chrome qui exécute un processus de moteur de rendu distinct pour chaque iFrame inter-sites. Nous avons vu qu'un seul processus de moteur de rendu par modèle d'onglet permettait s'exécutent dans un même processus de moteur de rendu et que l'espace mémoire est partagé entre différents sites. Exécuter a.com et b.com dans le même processus de moteur de rendu peut sembler correct. Règle d'origine identique est le modèle de sécurité central 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 intersites dans un onglet obtient un processus 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 au sein d'un site

L'activation de l'isolation de sites a nécessité plusieurs années d'ingénierie. L'isolation de sites n'est pas aussi simple l'attribution de différents processus de rendu ; cela modifie fondamentalement la façon dont les iFrame communiquent autre. Si vous ouvrez les outils de développement sur une page avec des iFrames exécutés sur différents processus, mettre en œuvre un travail en arrière-plan pour le rendre fluide. Même en utilisant un simple Ctrl+F pour trouver dans une page signifie effectuer une recherche dans différents processus de moteur de rendu. Vous pouvez voir la raison pour laquelle les ingénieurs du navigateur considèrent le lancement de l'isolation de sites comme une étape majeure.

Conclusion

Dans ce message, nous avons abordé une vue d'ensemble de l'architecture des navigateurs et abordé les avantages d'un architecture multiprocessus. Nous avons également abordé la maintenance et l'isolation de sites dans Chrome, étroitement liée à l'architecture multiprocessus. Dans le prochain post, nous commencerons à voir ce que se produit entre ces processus et les threads pour afficher un site web.

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

Étape suivante: Que se passe-t-il en mode navigation ?