{"id":268,"date":"2025-07-01T13:35:07","date_gmt":"2025-07-01T11:35:07","guid":{"rendered":"https:\/\/buildmytech.fr\/?p=268"},"modified":"2025-07-03T10:20:26","modified_gmt":"2025-07-03T08:20:26","slug":"navigateur-internet-3-3","status":"publish","type":"post","link":"https:\/\/buildmytech.fr\/index.php\/2025\/07\/01\/navigateur-internet-3-3\/","title":{"rendered":"Navigateur Internet 3\/3"},"content":{"rendered":"

Navigateur Internet 3\/3<\/span><\/h1>\r\nDans la trilogie des articles \"Navigateur internet\" nous avons vu :\r\n
    \r\n \t
  1. Le premier article<\/a><\/strong><\/span> nous a montr\u00e9 comment les navigateurs trouvaient le site internet \u00e0 afficher et comment ils s\u2019y connectaient de mani\u00e8re s\u00e9curis\u00e9e ou non.<\/li>\r\n \t
  2. Le second article<\/a><\/span><\/strong> a racont\u00e9 l'histoire riche des navigateurs internet et de certaines caract\u00e9ristiques de nos navigateurs modernes.<\/li>\r\n<\/ol>\r\nDans ce dernier article, vous allez d\u00e9couvrir comment fonctionnent en interne les navigateurs et comment ils rendent les pages du site web t\u00e9l\u00e9charg\u00e9es \u00e0 partir des serveurs.\r\n

    Fonctionnement interne navigateur<\/h2>\r\n \r\n

    CPU\/GPU<\/h3>\r\nPour comprendre le fonctionnement d\u2019un navigateur, voyons comment il fonctionne et de quoi il a besoin pour tourner.\r\n\r\nToutes les t\u00e2ches du navigateur n\u00e9cessitant du calcul ont besoin de deux \u00e9l\u00e9ments de l\u2019ordinateur ou du mobile :\r\n
      \r\n \t
    1. CPU<\/li>\r\n \t
    2. GPU<\/li>\r\n<\/ol>\r\n \r\n\r\nLe navigateur utilise le CPU<\/span><\/strong> pour toutes les t\u00e2ches n\u00e9cessitant du calcul. Il peut g\u00e9rer n\u2019importe quelle t\u00e2che. Les vieux appareils, il n\u2019avait qu\u2019un seul exemplaire, tandis que les modernes en ont plusieurs. Dans le langage courant, on dit que l'appareil poss\u00e8de plusieurs c\u0153urs. Le CPU de mon Mac poss\u00e8de 8 c\u0153urs.\r\n\r\nEn navigant, pour afficher le contenu des pages web, beaucoup de calculs vont devoir \u00eatre faits rapidement. Pour gagner en efficacit\u00e9, le navigateur va utiliser le GPU<\/span><\/strong>. Cet \u00e9l\u00e9ment est optimis\u00e9 pour faire les calculs \u00e0 hautes performances. Pour se faire, il va d\u00e9composer le calcul demand\u00e9 en petits calculs. Ces derniers vont \u00eatre faits par chaque \u00e9l\u00e9ment du GPU en parall\u00e8le.\r\n

      Thread<\/h3>\r\nComment s'ex\u00e9cutent les programmes \u00e0 l'int\u00e9rieur des navigateurs ? Comment une t\u00e2che est-elle lanc\u00e9e par le navigateur ? Il va le faire en utilisant les processus et les threads.\r\nUn processus<\/strong><\/span> est cr\u00e9\u00e9 \u00e0 l'ex\u00e9cution d'un programme (ex : lancer une vid\u00e9o de Squeezie sur YouTube). Pour ex\u00e9cuter le programme de la fa\u00e7on la plus rapide et optimis\u00e9e possible, on va lancer ces ex\u00e9cutions dans un ou plusieurs threads<\/span><\/strong> en fonction des ressources utilis\u00e9es par le programme.\r\n\r\nUn processus peut demander \u00e0 l'ordinateur de cr\u00e9er un autre processus pour lancer un autre programme ou r\u00e9aliser d'autres t\u00e2ches. Pour communiquer, ces deux processus peuvent utiliser Inter Process Communication<\/span><\/strong> (IPC<\/strong><\/span>).\r\n

      Processus<\/h3>\r\nPlusieurs parties du navigateur avec des t\u00e2ches bien d\u00e9finies fonctionnent ensemble pour permettre \u00e0 l'utilisateur de pouvoir naviguer.\u00a0Dans le navigateur Chrome, vous en avez plusieurs qui vont interagir entre eux, comme le montre ce sch\u00e9ma :\r\n\r\n\"\"\r\n\r\nComme expliqu\u00e9 juste apr\u00e8s, chaque processus a un r\u00f4le bien particulier dans le fonctionnement d'un navigateur :\r\n
        \r\n \t
      1. Le processus Navigateur<\/strong><\/span> permet de g\u00e9rer les appels aux autres processus n\u00e9cessaires \u00e0 la r\u00e9alisation. On peut le comparer \u00e0 un chef d'orchestre.<\/li>\r\n \t
      2. R\u00e9seau <\/strong><\/span>va g\u00e9rer tous les appels \u00e0 des ressources pr\u00e9sentes sur Internet. Par exemple, c\u2019est lui qui va \u00eatre appel\u00e9 quand le navigateur doit contacter le serveur DNS pour la r\u00e9solution de nom, comme vu dans la partie 1.<\/li>\r\n \t
      3. Pour le stockage des cookies ou de donn\u00e9es hors ligne n\u00e9cessaires au fonctionnement d\u2019un site, le processus Stockage<\/strong><\/span> entre en action.<\/li>\r\n \t
      4. Pour g\u00e9rer les interactions de la souris ou du clavier avec le navigateur, le processus P\u00e9riph\u00e9rique<\/strong><\/span> est appel\u00e9.<\/li>\r\n \t
      5. Pour g\u00e9rer les \u00e9l\u00e9ments graphiques du navigateur comme les fen\u00eatres ou les checkbox, le processus UI<\/strong><\/span> entre en sc\u00e8ne.<\/li>\r\n \t
      6. Le processus Rendu<\/strong><\/span> g\u00e8re l\u2019affichage des sites internets \u00e0 partir du code HTML\/CSS\/JS t\u00e9l\u00e9charg\u00e9 par le navigateur.<\/li>\r\n \t
      7. Le processus GPU <\/strong><\/span>va \u00eatre utilis\u00e9 pour faire tous les calculs n\u00e9cessaires au \u00ab Rendu \u00bb mais aussi \u00e0 \u00ab l\u2019UI \u00bb ou \u00e0 certains \u00ab Plugins \u00bb.<\/li>\r\n \t
      8. Le processus Plugin<\/strong><\/span> va g\u00e9rer tous les plugins installables sur le navigateur comme \u00ab AdBlock \u00bb.<\/li>\r\n<\/ol>\r\n \r\n\r\n\u00c0 l\u2019heure actuelle, les internautes exigent que leur navigateur soit le plus rapide possible. La partie \u00ab\u00a0Rendu\u00a0\u00bb se trouve \u00eatre cruciale pour r\u00e9pondre \u00e0 cette exigence. Pour cela, elle va transformer le HTML, le CSS et le JavaScript t\u00e9l\u00e9charg\u00e9s, comme vu pr\u00e9c\u00e9demment, en page web pr\u00eate \u00e0 \u00eatre utilis\u00e9e par un utilisateur. Comme vu dans la partie 1, elle se passe en deux phases\u00a0:<\/em>\r\n
          \r\n \t
        1. Parsing<\/em><\/li>\r\n \t
        2. Restitution<\/em><\/li>\r\n<\/ol>\r\n \r\n

          Rendu<\/h2>\r\n \r\n

          Parsing<\/h3>\r\n \r\n

          Dom<\/h4>\r\nUn\u00a0 des principaux buts du parsing<\/span><\/strong>\u00a0 est de cr\u00e9er un DOM<\/span><\/strong> \u00e0 partir de la page html. Le DOM est une repr\u00e9sentation de la page web et expose des APIs pour permettre au d\u00e9veloppeur de changer la structure de la page web gr\u00e2ce au Javascript.\r\n\r\nUne page HTML est compos\u00e9e de balises entourant d\u2019autres balises et du texte. Prenons en exemple cette page en HTML :\r\n\r\n\"\"\r\n\r\nVoici le DOM obtenu :\r\n\r\n\"\"\r\n\r\nDans cet arbre<\/span><\/strong> toutes les informations pr\u00e9sentes dans le HTML s\u2019y trouvent. Nous avons le nom des balises avec leurs attributs et le texte entour\u00e9 par ses balises.\r\n\r\nPendant la phase de parsing, si du code JavaScript se trouve entre deux balises scripts ou dans un fichier annexe, tout s\u2019arr\u00eate. Le moteur JavaScript prend le relais pour ex\u00e9cuter le code JavaScript pouvant manipuler le DOM.\r\n\r\nLes balises \u00ab img \u00bb ou \u00ab link \u00bb sont reli\u00e9es \u00e0 des images ou \u00e0 des fichiers css. Ils doivent \u00eatre t\u00e9l\u00e9charg\u00e9s pour pouvoir afficher correctement la page. Pour \u00e9viter de bloquer le parsing, Chrome, par exemple, fait en parall\u00e8le un scanner de pr\u00e9chargement <\/span><\/strong>lanc\u00e9<\/span> en parall\u00e8le.\r\n

          CSSOM<\/h3>\r\nQuand vous allez sur un site, la page web visit\u00e9e poss\u00e8de une mise en forme pour \u00eatre agr\u00e9able \u00e0 regarder et permettre d\u2019avoir un parcours agr\u00e9able. Le CSS indique au navigateur comment afficher le contenu (couleur de la police, sa taille ou emplacement d\u2019un bloc\u2026).\r\n\r\nPour avoir un affichage correct, le parsing va cr\u00e9er un CSSOM<\/strong><\/span> (CSS Object model).\r\n\r\nDans l\u2019exemple ci-dessus, mon fichier HTML est li\u00e9 au fichier CSS main.css\u00a0:\r\n\r\n\"\"\r\n\r\nA partir de ce fichier css, on obtient l\u2019arborescence<\/span><\/strong> CSSOM suivante :\r\n\r\n\"\"\r\n\r\nL\u2019arbre ainsi obtenu contient bien toutes les informations<\/span><\/strong> li\u00e9es au CSS. Comme on peut le voir, le CSS d\u2019un n\u0153ud parent est h\u00e9rit\u00e9 par les enfants. Par exemple, la balise Body a une propri\u00e9t\u00e9 CSS qui sera aussi dans les balises enfants \u00ab\u00a0Div\u00a0\u00bb \u00ab\u00a0P\u00a0\u00bb\u2026\r\n\r\nVoil\u00e0 maintenant la page a \u00e9t\u00e9 pars\u00e9 il faut l\u2019afficher sur le navigateur et plusieurs \u00e9tapes se passent.\r\n

          Restitution<\/h2>\r\n \r\n

          Disposition\/Layout<\/h3>\r\nPendant la partie de parsing, on a obtenu le DOM et le CSSOM. Maintenant, un arbre de rendu<\/span><\/strong> va \u00eatre calcul\u00e9 \u00e0 partir de ces deux-l\u00e0. Il contiendra tout le contenu visible du DOM et les donn\u00e9es du style fourni par le CSSOM.\r\n\r\nDans cet arbre, seul les \u00e9l\u00e9ments visibles<\/span><\/strong> sont pr\u00e9sents. Par exemple les balises styles, meta n\u2019apparaissent pas.\r\n\r\nA partir du DOM et du CSSOM d\u00e9termin\u00e9 plut\u00f4t, voici le nouvel arbre obtenu.\r\n\r\n\"\"\r\n\r\nA partir cet arbre, le navigateur va calculer la taille et l\u2019emplacement de chaque \u00e9l\u00e9ment appel\u00e9e ici \u00ab\u00a0bo\u00eetes\u00a0\u00bb.\r\n

          Peinture<\/h3>\r\nLe navigateur doit d\u00e9terminer o\u00f9 chaque \u00e9l\u00e9ment doit se placer au sein du navigateur de l\u2019utilisateur. Il doit donc identifier le r\u00f4le de chaque pixel sur l\u2019\u00e9cran. On appelle cela la rast\u00e9risation<\/span><\/strong>.\r\n\r\nCertains \u00e9l\u00e9ments vont se chevaucher. Il faut donc d\u00e9terminer lequel se trouve devant et lequel se trouve derri\u00e8re. Cette phase r\u00e9alisera ces d\u00e9terminations.\r\n\r\nPar exemple, sur Chrome, le thread principal va cr\u00e9er les Paints Records <\/strong><\/span>pour sp\u00e9cifier les \u00e9tapes \u00e0 faire pour rendre correctement la page.\r\n\r\nSi des \u00e9l\u00e9ments de style sont chang\u00e9s \u00e0 la vol\u00e9e gr\u00e2ce \u00e0 une animation, la phase de Disposition et la phase de Peinture doivent \u00eatre \u00e0 chaque fois<\/span><\/strong> recalcul\u00e9es. L\u2019animation devient donc tr\u00e8s couteuse en ressources.\r\n

          Composition<\/h3>\r\nJ\u2019\u00e9cris cet article sur un MacBook Air M2. Ce dernier a plus de 4 millions de pixels. La rast\u00e9risation\u00a0se fait donc sur un nombre tr\u00e8s important de pixels et doit \u00eatre faite tr\u00e8s rapidement pour n\u2019avoir aucune latence pour l\u2019utilisateur.\r\n\r\nPour gagner en efficacit\u00e9, le dessin \u00e0 l\u2019\u00e9cran va \u00eatre divis\u00e9 en couche<\/strong><\/span>. Chaque couche va \u00eatre rasteris\u00e9e ind\u00e9pendamment<\/strong><\/span>. \u00c0 la place d\u2019utiliser le thread principal, le thread de la Composition<\/strong><\/span> entre en jeu. Il va appeler pour chaque couche un Raster Thread <\/span><\/strong>qui rast\u00e9risera sa couche. Elle sera stock\u00e9e dans la m\u00e9moire du GPU.\r\n\r\nPuis, au chargement des couches, le navigateur va composer la page en s\u2019appuyant sur les diff\u00e9rentes couches.\r\n\r\nPour des questions d\u2019optimisation, le navigateur rast\u00e9rise en priorit\u00e9 les couches contenant des \u00e9l\u00e9ments visibles imm\u00e9diatement par l\u2019internaute ou ceux proches de son champ de vision.\r\n\r\nSi l\u2019utilisateur scrolle sur son navigateur, les couches sont d\u00e9j\u00e0 rasteris\u00e9es. Ce dernier devra juste composer sa page \u00e0 partir des couches.\r\n

          Conclusion<\/h2>\r\nMaintenant que vous \u00eates arriv\u00e9s \u00e0 la fin de ce(s) article(s), vous en savez plus sur le fonctionnement de nos navigateurs et sur leurs fonctionnements.\r\n\r\nSi vous voulez aller plus loin, je vous partage ce lien pr\u00e9sentant le projet d'Andreas Kling pour cr\u00e9er un nouveau navigateur, LadyBird<\/span>.<\/a><\/strong><\/span>\r\n\r\nDe mon c\u00f4t\u00e9, je n\u2019en ai pas fini avec les navigateurs. En travaillant sur ce sujet, l\u2019ing\u00e9nierie de ces produits m'a captiv\u00e9 et j'ai d\u00e9cid\u00e9 de me plonger plus en profondeur. Dans un d\u00e9lai tr\u00e8s court, je vous exposerai mes travaux dessus. Vous en saurez plus rapidement :).","protected":false},"excerpt":{"rendered":"

          Navigateur Internet 3\/3 Dans la trilogie des articles “Navigateur internet” nous avons vu : Le premier article nous a montr\u00e9 comment les navigateurs trouvaient le site internet \u00e0 afficher et comment ils s\u2019y connectaient de mani\u00e8re s\u00e9curis\u00e9e ou non. Le second article a racont\u00e9 l’histoire riche des navigateurs internet et de certaines caract\u00e9ristiques de nos […]<\/p>\n","protected":false},"author":1,"featured_media":322,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4],"tags":[],"class_list":["post-268","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-back-to-basics","category-navigateur"],"_links":{"self":[{"href":"https:\/\/buildmytech.fr\/index.php\/wp-json\/wp\/v2\/posts\/268","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buildmytech.fr\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buildmytech.fr\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buildmytech.fr\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buildmytech.fr\/index.php\/wp-json\/wp\/v2\/comments?post=268"}],"version-history":[{"count":31,"href":"https:\/\/buildmytech.fr\/index.php\/wp-json\/wp\/v2\/posts\/268\/revisions"}],"predecessor-version":[{"id":324,"href":"https:\/\/buildmytech.fr\/index.php\/wp-json\/wp\/v2\/posts\/268\/revisions\/324"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buildmytech.fr\/index.php\/wp-json\/wp\/v2\/media\/322"}],"wp:attachment":[{"href":"https:\/\/buildmytech.fr\/index.php\/wp-json\/wp\/v2\/media?parent=268"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buildmytech.fr\/index.php\/wp-json\/wp\/v2\/categories?post=268"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buildmytech.fr\/index.php\/wp-json\/wp\/v2\/tags?post=268"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}