{"id":326,"date":"2025-09-21T11:21:37","date_gmt":"2025-09-21T09:21:37","guid":{"rendered":"https:\/\/buildmytech.fr\/?p=326"},"modified":"2025-09-21T16:02:27","modified_gmt":"2025-09-21T14:02:27","slug":"falcon-parsing","status":"publish","type":"post","link":"https:\/\/buildmytech.fr\/index.php\/2025\/09\/21\/falcon-parsing\/","title":{"rendered":"Falcon : parsing"},"content":{"rendered":"<span style=\"color: #000000;\">Cet \u00e9t\u00e9, j\u2019ai \u00e9crit et publi\u00e9 trois articles parlant des navigateurs internet :<\/span>\r\n<ol>\r\n \t<li><span style=\"color: #cc99ff;\"><a style=\"color: #cc99ff;\" href=\"https:\/\/buildmytech.fr\/index.php\/2025\/06\/18\/navigateur-1-3\/\">Une pr\u00e9sentation g\u00e9n\u00e9rale<\/a><\/span><\/li>\r\n \t<li><span style=\"color: #cc99ff;\"><a style=\"color: #cc99ff;\" href=\"https:\/\/buildmytech.fr\/index.php\/2025\/06\/23\/navigateur-internet-2-3\/\">Un historique allant des pr\u00e9mices \u00e0 la standardisation du web<\/a><\/span><\/li>\r\n \t<li><span style=\"color: #cc99ff;\"><a style=\"color: #cc99ff;\" href=\"https:\/\/buildmytech.fr\/index.php\/2025\/07\/01\/navigateur-internet-3-3\/\">L\u2019ing\u00e9nierie expliquant leur fonctionnement interne<\/a><\/span><\/li>\r\n<\/ol>\r\n&nbsp;\r\n\r\n<span style=\"color: #000000;\">Au d\u00e9part, je pensais que mes recherches et la r\u00e9daction allaient juste m\u2019amener \u00e0 faire de la vulgarisation. Mais plus je travaillais dessus plus je devenais <span style=\"color: #e6af2a;\"><strong>hypp\u00e9<\/strong> <\/span>par cette technologie.<\/span>\r\n\r\n<span style=\"color: #000000;\">J\u2019ai d\u00e9cid\u00e9 de m\u2019y plonger en cr\u00e9ant la premi\u00e8re pi\u00e8ce de mon moteur HTML baptis\u00e9 <span style=\"color: #e6af2a;\"><strong>Falcon<\/strong><\/span>.<\/span>\r\n\r\n<span style=\"color: #000000;\">Apr\u00e8s avoir pris cette d\u00e9cision, il a fallu choisir un premier \u00e9l\u00e9ment \u00e0 d\u00e9velopper.\u00a0<\/span>\r\n\r\n<span style=\"color: #000000;\">Vous avez s\u00fbrement oubli\u00e9 leur fonctionnement, sauf si vous venez de lire mes articles ou si vous \u00eates devenus un fanboy des navigateurs gr\u00e2ce \u00e0 moi. Voici un sch\u00e9ma r\u00e9sumant leur fonctionnement interne pour vous rafra\u00eechir la m\u00e9moire :<\/span>\r\n\r\n&nbsp;\r\n\r\n<div id=\"attachment_327\" style=\"width: 1330px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-327\" class=\"size-full wp-image-327\" src=\"http:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/09\/0-Introduction.png\" alt=\"R\u00e9sum\u00e9 fonctionnement navigateur internet\" width=\"1320\" height=\"561\" srcset=\"https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/09\/0-Introduction.png 1320w, https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/09\/0-Introduction-300x128.png 300w, https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/09\/0-Introduction-1024x435.png 1024w, https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/09\/0-Introduction-768x326.png 768w, https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/09\/0-Introduction-81x34.png 81w\" sizes=\"auto, (max-width: 1320px) 100vw, 1320px\" \/><p id=\"caption-attachment-327\" class=\"wp-caption-text\">R\u00e9sum\u00e9 du fonctionnement navigateur internet<\/p><\/div>\r\n\r\n&nbsp;\r\n\r\nPour rappel :\r\n<ol>\r\n \t<li>Le <span style=\"color: #e6af2a;\"><strong>Parsing<\/strong> <\/span>permet d\u2019analyser le html de la page et d\u2019obtenir un arbre de donn\u00e9es regroupant toutes les informations du html.<\/li>\r\n \t<li>Le <strong><span style=\"color: #e6af2a;\">CSSOM<\/span> <\/strong>analyse le code css pour fabriquer un arbre le reliant au html.<\/li>\r\n \t<li>La <strong><span style=\"color: #e6af2a;\">Disposition<\/span> <\/strong>fusionne les deux arbres obtenu pour cr\u00e9er un nouvel arbre avec toutes les informations.<\/li>\r\n \t<li>La <strong><span style=\"color: #e6af2a;\">Peinture<\/span> <\/strong>d\u00e9termine le placement de chaque \u00e9l\u00e9ment en identifiant le r\u00f4le des pixels de l\u2019\u00e9cran concern\u00e9.<\/li>\r\n \t<li>La <strong><span style=\"color: #e6af2a;\">Composition<\/span> <\/strong>va se charger de diviser le contenu \u00e0 afficher en calques pour optimiser leur futur affichage.<\/li>\r\n<\/ol>\r\n&nbsp;\r\n\r\nJ'ai d\u00e9cid\u00e9 d'aller au plus simple en d\u00e9veloppant le parsing de mon moteur.\r\n\r\n&nbsp;\r\n\r\nComme le parsing identifie chaque \u00e9l\u00e9ment composant une page html, l\u2019<strong><span style=\"color: #e6af2a;\">identification<\/span> <\/strong>de chaque tag a \u00e9t\u00e9 la premi\u00e8re feature d\u00e9velopp\u00e9e.\r\n\r\n&nbsp;\r\n<h1>Identification de la balise<\/h1>\r\n&nbsp;\r\n<h2>Composition d'un tag<\/h2>\r\nVoici un exemple de tag pr\u00e9sent dans une page html\u00a0:\r\n\r\n<img loading=\"lazy\" decoding=\"async\" class=\"wp-image-329 aligncenter\" src=\"http:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/09\/1-Tag.png\" alt=\"\" width=\"550\" height=\"186\" srcset=\"https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/09\/1-Tag.png 710w, https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/09\/1-Tag-300x101.png 300w, https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/09\/1-Tag-81x27.png 81w\" sizes=\"auto, (max-width: 550px) 100vw, 550px\" \/>\r\n\r\nCe tag peut \u00eatre subdivis\u00e9 en 4 parties\u00a0:\r\n<ul>\r\n \t<li>&lt;h1 class= \u2018title\u2019 style= \u2018color :blue ;\u2019&gt; est la balise ouvrante.<\/li>\r\n \t<li>class=\u2019title\u2019 style=\u2019color :blue ;\u2019 sont les attributs de la balise.<\/li>\r\n \t<li>&lt;\/h1&gt; est la balise fermante.<\/li>\r\n \t<li>Hello World est le contenu du tag.<\/li>\r\n<\/ul>\r\nPour cette partie d\u2019identification, mon parseur ex\u00e9cute <strong><span style=\"color: #e6af2a;\">6<\/span> <\/strong>\u00e9tapes :\r\n<ol>\r\n \t<li>Nettoyage du tag.<\/li>\r\n \t<li>Identification des limites du tag.<\/li>\r\n \t<li>Recherche des attributs du tag.<\/li>\r\n \t<li>Trouver le nom du tag.<\/li>\r\n \t<li>Indiquer le type du tag.<\/li>\r\n \t<li>Retourner le contenu du tag.<\/li>\r\n<\/ol>\r\n&nbsp;\r\n<h2>Nettoyage du tag<\/h2>\r\nAvant de commencer l\u2019identification, mon parseur doit <strong><span style=\"color: #e6af2a;\">nettoyer<\/span> <\/strong>le texte contenant un ou plusieurs tags html pour ne pas parasiter le parsing. Il \u00e9limine\u00a0 :\r\n<ol>\r\n \t<li>Les espaces avant le d\u00e9but des premiers caract\u00e8res int\u00e9ressants.<\/li>\r\n \t<li>Les caract\u00e8res d\u2019\u00e9chappement comme \u00ab \\n \u00bb ou \u00ab \\r \u00bb.<\/li>\r\n \t<li>Les espaces inutiles apr\u00e8s la balise fermante<\/li>\r\n \t<li>Les espaces en trop dans la balise ouvrante<\/li>\r\n<\/ol>\r\nApr\u00e8s cette purge, le parseur commence l\u2019<strong><span style=\"color: #e6af2a;\">analyse<\/span><\/strong>.\r\n\r\n&nbsp;\r\n<h2>Identifier limite tag<\/h2>\r\nPour pouvoir identifier toutes les parties du tag, il faut d\u00e9terminer :\r\n<ul>\r\n \t<li>La balise ouvrante<\/li>\r\n \t<li>La balise fermante<\/li>\r\n<\/ul>\r\nEn identifiant ces deux parties, le programme pourra plus facilement trouver le contenu, les attributs\u2026.\r\n\r\nLe parseur commence par rechercher la <strong><span style=\"color: #e6af2a;\">balise ouvrante<\/span><\/strong>. Elle va chercher la cha\u00eene de caract\u00e8re commen\u00e7ant par \u00ab &lt; \u00bb se terminant par \u00ab &gt; \u00bb. Vous obtenez ainsi la premi\u00e8re balise ouvrante de votre tag.\r\n\r\nA partir de cette information, le parseur va calculer la <strong><span style=\"color: #e6af2a;\">balise fermante<\/span><\/strong>:\r\n<ol>\r\n \t<li>Elle va prendre le nom de la balise.<\/li>\r\n \t<li>Elle g\u00e9n\u00e8re l\u2019\u00e9l\u00e9ment recherch\u00e9 sous la forme <strong><span style=\"color: #e6af2a;\">&lt;\/<em>nomdelabalise<\/em>&gt;<\/span><\/strong>.<\/li>\r\n<\/ol>\r\nPour rappel certaines balises comme <em>html a p<\/em>\u2026 poss\u00e8dent des balises fermantes tandis que les balises <em>meta input<\/em>\u2026 n\u2019en ont pas. En \u00e9tudiant le texte \u00e0 parser, le parseur va rechercher la balise fermante pr\u00e9c\u00e9demment calcul\u00e9e. Si elle la trouve, il la <strong><span style=\"color: #e6af2a;\">retournera<\/span> <\/strong>quand on lui demandera sinon il renverra un r\u00e9sultat <span style=\"color: #e6af2a;\"><strong>null<\/strong><\/span>.\r\n\r\n&nbsp;\r\n<h2>Identification des attributs<\/h2>\r\nLes attributs de la balise ouvrante ajoutent des <strong><span style=\"color: #e6af2a;\">d\u00e9tails<\/span> <\/strong>pour le navigateur. Elles peuvent par exemple ajouter du code css, lui attribuer un id ou une classe\u2026 Un tag html peut se composer de plusieurs attributs html.\r\n\r\nSi on reprend le d\u00e9but d\u2019une balise, on a:\r\n\r\n<img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-339\" src=\"http:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/09\/1-StartTag.png\" alt=\"\" width=\"308\" height=\"33\" srcset=\"https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/09\/1-StartTag.png 308w, https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/09\/1-StartTag-300x32.png 300w, https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/09\/1-StartTag-81x9.png 81w\" sizes=\"auto, (max-width: 308px) 100vw, 308px\" \/>\r\n\r\n&nbsp;\r\n\r\n&nbsp;\r\n\r\nLa liste des attributs d'une balise se trouve entre le nom du tag et \u00ab &gt; \u00bb. Il suffit de la r\u00e9cup\u00e9rer cette cha\u00eene de caract\u00e8re. On obtient la liste de tous les attributs s\u00e9par\u00e9s par un espace.\r\n\r\nUn attribut se trouve sous cette forme :\r\n\r\n<img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-332\" src=\"http:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/09\/1-Attributs.png\" alt=\"\" width=\"480\" height=\"219\" srcset=\"https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/09\/1-Attributs.png 480w, https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/09\/1-Attributs-300x137.png 300w, https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/09\/1-Attributs-81x37.png 81w\" sizes=\"auto, (max-width: 480px) 100vw, 480px\" \/>\r\n\r\n&nbsp;\r\n\r\n&nbsp;\r\n\r\n&nbsp;\r\n\r\n&nbsp;\r\n\r\n&nbsp;\r\n\r\n&nbsp;\r\n\r\nA gauche de l\u2019\u00e9galit\u00e9 se trouve le <span style=\"color: #e6af2a;\"><strong>type <\/strong><\/span>de l\u2019attribut tandis qu'\u00e0 droite se trouve sa <strong><span style=\"color: #e6af2a;\">valeur<\/span><\/strong>. Le type de l\u2019attribut fait partie d\u2019une liste norm\u00e9e. Le parseur doit donc reconna\u00eetre le type puis lui attacher sa valeur.\r\n\r\nAttention, certains attributs n\u2019ont pas besoin de valeur. Par exemple l\u2019attribut \u00ab hidden \u00bb se suffit \u00e0 lui-m\u00eame.\r\n<h2>Nom de la balise<\/h2>\r\nPour d\u00e9terminer le nom de la balise, il y a deux sc\u00e9narios\u00a0:\r\n<ul>\r\n \t<li>sans attribut html<\/li>\r\n \t<li>avec attribut html<\/li>\r\n<\/ul>\r\n&nbsp;\r\n<h3>Sans attribut html<\/h3>\r\n<img loading=\"lazy\" decoding=\"async\" class=\"alignleft wp-image-328\" src=\"http:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/09\/1-Tag-sans-attributs.png\" alt=\"\" width=\"360\" height=\"122\" srcset=\"https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/09\/1-Tag-sans-attributs.png 710w, https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/09\/1-Tag-sans-attributs-300x101.png 300w, https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/09\/1-Tag-sans-attributs-81x27.png 81w\" sizes=\"auto, (max-width: 360px) 100vw, 360px\" \/>\r\n\r\n&nbsp;\r\n\r\n&nbsp;\r\n\r\nPour ce cas d\u2019usage, il suffit de retirer &lt; et &gt; de la balise ouvrante et on obtient le nom de la balise.\r\n<h3>Avec attribut html<\/h3>\r\n<img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-339\" src=\"http:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/09\/1-StartTag.png\" alt=\"\" width=\"308\" height=\"33\" srcset=\"https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/09\/1-StartTag.png 308w, https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/09\/1-StartTag-300x32.png 300w, https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/09\/1-StartTag-81x9.png 81w\" sizes=\"auto, (max-width: 308px) 100vw, 308px\" \/>\r\n\r\n&nbsp;\r\n\r\n&nbsp;\r\n\r\nDans ce sc\u00e9nario, il suffit de prendre la cha\u00eene de caract\u00e8re entre le &lt; et le premier espace pr\u00e9c\u00e9dant la liste des attributs.\r\n<h2>Type balise<\/h2>\r\nCette balise peut se classer en deux cat\u00e9gories\u00a0:\r\n<ul>\r\n \t<li>Balise fermante<\/li>\r\n \t<li>Balise non fermante<\/li>\r\n<\/ul>\r\nPour pouvoir le d\u00e9terminer, il suffit de voir si le parseur a pr\u00e9c\u00e9demment identifi\u00e9 une balise fermante.\r\n\r\nN.B : je pense supprimer cette propri\u00e9t\u00e9, car son utilit\u00e9 est sujet \u00e0 caution.\r\n<h2>Recherche contenu<\/h2>\r\nPour finir, le parseur doit retourner le <strong><span style=\"color: #e6af2a;\">contenu<\/span> <\/strong>de la balise. Il correspond au texte se trouvant entre la balise ouvrante et la balise fermante. Bien s\u00fbr en cas d'abscence de balise fermante, elle ne poss\u00e8de pas de contenu.\r\n\r\nPour le calculer, il faut prendre le tag dans son ensemble, supprimer la balise ouvrante et la balise fermante pour obtenir le contenu.\r\n<h2>Pour r\u00e9sumer<\/h2>\r\nPour ceux que j\u2019ai perdu, je vous propose ce sch\u00e9ma r\u00e9sumant comment fonctionne la phase d\u2019identification\r\n\r\n<img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-333\" src=\"http:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/09\/1-Resume-Identification.png\" alt=\"\" width=\"1321\" height=\"601\" srcset=\"https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/09\/1-Resume-Identification.png 1321w, https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/09\/1-Resume-Identification-300x136.png 300w, https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/09\/1-Resume-Identification-1024x466.png 1024w, https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/09\/1-Resume-Identification-768x349.png 768w, https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/09\/1-Resume-Identification-81x37.png 81w\" sizes=\"auto, (max-width: 1321px) 100vw, 1321px\" \/>\r\n\r\n&nbsp;\r\n\r\n&nbsp;\r\n\r\n&nbsp;\r\n\r\n&nbsp;\r\n\r\n&nbsp;\r\n\r\n&nbsp;\r\n\r\n&nbsp;\r\n\r\nDans cette partie, on a vu comment parser un\u00a0 simple tag. Cependant comment on fait pour parser l\u2019ensemble des \u00e9l\u00e9ments d\u2019une page html.\r\n<h1>La gestion des tags enfants<\/h1>\r\n<h2>Forme page html<\/h2>\r\nApr\u00e8s avoir compris l\u2019importance de l\u2019identification du tag, prenons le temps d\u2019analyser une simple page html.\r\n\r\n<img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-330\" src=\"http:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/09\/2-Page-Html.png\" alt=\"\" width=\"800\" height=\"505\" srcset=\"https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/09\/2-Page-Html.png 800w, https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/09\/2-Page-Html-300x189.png 300w, https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/09\/2-Page-Html-768x485.png 768w, https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/09\/2-Page-Html-133x83.png 133w, https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/09\/2-Page-Html-81x51.png 81w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/>\r\n\r\n&nbsp;\r\n\r\n&nbsp;\r\n\r\n&nbsp;\r\n\r\n&nbsp;\r\n\r\n&nbsp;\r\n\r\n&nbsp;\r\n\r\n&nbsp;\r\n\r\n&nbsp;\r\n\r\n&nbsp;\r\n\r\n&nbsp;\r\n<ul>Tout d'abord premier tag de la page html a deux tags enfants :\r\n \t<li>Head<\/li>\r\n \t<li>Body<\/li>\r\n<\/ul>\r\n&nbsp;\r\n<ul>Le tag head a pour parent le tag html et quatre tags enfants :\r\n \t<li>Deux tags meta<\/li>\r\n \t<li>Un tag title<\/li>\r\n \t<li>Un tag link<\/li>\r\n<\/ul>\r\nLe tag body a comme tag enfant un tag div qui lui-m\u00eame a deux tags p enfants.\r\n\r\nApr\u00e8s avoir analys\u00e9 cette page html, on comprend que le contenu des tags se trouvant entre la balise ouvrante et la balise fermante peut soit <strong><span style=\"color: #e6af2a;\">contenir du texte<\/span><\/strong> ou soit d\u2019<strong><span style=\"color: #e6af2a;\">autres tags<\/span><\/strong>.\r\n\r\nEn partant de ce constat, le programme a d\u00fb \u00eatre con\u00e7u pour pouvoir analyser et parser le contenu de chaque tag.\r\n<h2>Sc\u00e9narios html \u00e0 traiter<\/h2>\r\n<ul>Le contenu des tags \u00e0 parser peut se pr\u00e9senter sous trois formats :\r\n \t<li>Premi\u00e8re forme : un tag parent poss\u00e8de plusieurs enfants, mais pas de petits enfants comme le tag head poss\u00e8dant quatre enfants et aucun de petit enfant.<\/li>\r\n \t<li>Deuxi\u00e8me forme\u00a0: un tag parent poss\u00e8de un enfant et un petit enfant. Par exemple le premier tag p poss\u00e8de comme enfant le tag span qui lui-m\u00eame a pour enfant le tag a.<\/li>\r\n \t<li>Troisi\u00e8me forme\u00a0: un tag parent a plusieurs enfants qui ont eux aussi leurs propres tags enfants. Dans notre exemple, la div poss\u00e8de deux tags p dont l\u2019un a une descendance.<\/li>\r\n<\/ul>\r\nIl est temps de se pencher sur le traitement de ses formes par le parseur.\r\n\r\n&nbsp;\r\n<h2>Recherche du bon parseur<\/h2>\r\nQuand le programme rencontre un contenu \u00e0 analyser, il doit <strong><span style=\"color: #e6af2a;\">choisir<\/span> <\/strong>le bon parseur. Pour chaque tag, un parseur ayant ses propres r\u00e8gles a \u00e9t\u00e9 d\u00e9velopp\u00e9.\r\n<ul>\r\n \t<li style=\"list-style-type: none;\">\r\n<ol>Comment cette partie s\u2019ex\u00e9cute t\u2019elle\u00a0?\r\n \t<li>Le programme recherche le premier tag dans l\u2019extrait qu\u2019elle doit traiter.<\/li>\r\n \t<li>Elle recherche le parseur correspondant.<\/li>\r\n \t<li>On ajoute le parseur trouv\u00e9 \u00e0 la liste des parseurs que le programme va renvoyer \u00e0 l\u2019appelant.<\/li>\r\n \t<li>Elle supprime le html du tag trait\u00e9 dans le texte \u00e0 analyser.<\/li>\r\n \t<li>Deux possibilit\u00e9s : 5a : Il n\u2019a plus de html \u00e0 traiter donc le programme de cette partie s\u2019arr\u00eate et renvoie la liste des parseurs d\u00e9j\u00e0 trouv\u00e9s. 5b : il reste du html donc le programme va boucler de nouveaux sur les \u00e9tapes 1 2 3 4 5b jusqu\u2019\u00e0 ne plus avoir de html \u00e0 traiter.<\/li>\r\n<\/ol>\r\n<\/li>\r\n<\/ul>\r\nSi on prend les trois exemples pr\u00e9c\u00e9demment \u00e9voqu\u00e9s :\r\n<ul>\r\n \t<li>Forme 1 : le programme renverra pour le contenu du tag head, deux parseurs meta, un parseur title et un parseur link.<\/li>\r\n \t<li>Forme 2 : le programme renverra pour le contenu du premier tag p, un parseur span.<\/li>\r\n \t<li>Forme 3 : le programme renverra pour le contenu du tag div, deux parseurs p.<\/li>\r\n<\/ul>\r\n&nbsp;\r\n<h2>Parsing enfants<\/h2>\r\nApr\u00e8s avoir r\u00e9cup\u00e9r\u00e9 les bons parseurs, le programme va se mettre \u00e0 parser les enfants en 3 \u00e9tapes :\r\n<ol>\r\n \t<li>On nettoie le html \u00e0 parser comme expliqu\u00e9 dans la partie sur l\u2019identification.<\/li>\r\n \t<li>Le parseur trouv\u00e9 pr\u00e9c\u00e9demment parse le html lui correspondant.<\/li>\r\n \t<li>On supprime le html qui vient d\u2019\u00eatre pars\u00e9.<\/li>\r\n<\/ol>\r\nCes 3 \u00e9tapes vont continuer jusqu'\u00e0 ce qu'il n'y ait plus de html \u00e0 parser.\r\n<h2>Traitement arbre<\/h2>\r\nPour le moment, le programme peut uniquement traiter les enfants. Si on prend l\u2019exemple de la page html juste au-dessus, il va juste parser les balises head et body, mais n\u2019ira pas s\u2019occuper des balises meta, div\u2026.\r\n\r\nPour r\u00e9pondre \u00e0 cette probl\u00e9matique, la r\u00e9cursivit\u00e9 a \u00e9t\u00e9 mise en place.\r\n\r\nQuand on parse un enfant, on va aussi voir si cet enfant a ses propres enfants, deux situations peuvent se passer\u00a0:\r\n<ul>\r\n \t<li style=\"list-style-type: none;\">\r\n<ul>\r\n \t<li style=\"list-style-type: none;\">\r\n<ol>\r\n \t<li>Aucun enfant trouv\u00e9, on s\u2019arr\u00eate l\u00e0.<\/li>\r\n \t<li>N enfant(s) trouv\u00e9(s), le parseur va aussi traiter se(s) enfant(s). Le programme bouclera jusqu'\u00e0 ce qu'il n'y ait plus de descendance \u00e0 parser.<\/li>\r\n<\/ol>\r\n<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n&nbsp;\r\n\r\nGr\u00e2ce \u00e0 la r\u00e9cursivit\u00e9, le programme pourra traiter une page enti\u00e8re. Cependant, ce n\u2019est pas la solution la plus optimis\u00e9e.\r\n<h2>Pour r\u00e9sumer<\/h2>\r\nPour ceux que j\u2019ai perdus, je vous propose ce sch\u00e9ma r\u00e9sumant comment fonctionne la gestion des tags enfants.\r\n\r\n<img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-full wp-image-331\" src=\"http:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/09\/2-Resume-arbre.png\" alt=\"\" width=\"1340\" height=\"882\" srcset=\"https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/09\/2-Resume-arbre.png 1340w, https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/09\/2-Resume-arbre-300x197.png 300w, https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/09\/2-Resume-arbre-1024x674.png 1024w, https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/09\/2-Resume-arbre-768x506.png 768w, https:\/\/buildmytech.fr\/wp-content\/uploads\/2025\/09\/2-Resume-arbre-81x53.png 81w\" sizes=\"auto, (max-width: 1340px) 100vw, 1340px\" \/>\r\n\r\n<em>Je viens de vous pr\u00e9senter comment mon programme arrive \u00e0 parser une page internet. Il fonctionne bien. Pour l\u2019instant, les r\u00e9sultats obtenus montrent que l\u2019outil fonctionne bien. Cependant il est loin d\u2019\u00eatre termin\u00e9, par exemple, il ne conna\u00eet pas toutes les balises et les attributs existants. Il ne peut pas parser toutes les pages. On ne peut pas le consid\u00e9rer comme op\u00e9rationnel. Je vais donc vous parler des prochaines \u00e9tapes de ce projet pour le rendre utilisable.<\/em>\r\n\r\n&nbsp;\r\n<h1>Avenir de Falcon<\/h1>\r\n&nbsp;\r\n<h2>Balises et attributs inconnus<\/h2>\r\nPour pouvoir \u00eatre utilis\u00e9 dans les conditions r\u00e9els, ce programme doit conna\u00eetre toutes les balises et attributs existants.\r\n\r\nEn me basant sur la documentation du site Mozilla, je pourrai lister les balises et attributs manquant et d\u00e9velopper leurs parsers. Mais je vois deux probl\u00e8mes \u00e0 cette fa\u00e7on de faire :\r\n<ul>\r\n \t<li style=\"list-style-type: none;\">\r\n<ul>\r\n \t<li style=\"list-style-type: none;\">\r\n<ol>\r\n \t<li>Int\u00e9grer tous les tags et les attributs prendra du temps en \u00e9tant long et fastidieux.<\/li>\r\n \t<li>Si on se base sur la loi de <strong><span style=\"color: #e6af2a;\">Paretto<\/span><\/strong>, on peut dire que 20% des balises et des attributs constituent 80% du web. Si on admet que cette loi se v\u00e9rifie dans ce contexte, je devrai me concentrer sur ceux qui sont r\u00e9ellement les plus utilis\u00e9s.<\/li>\r\n<\/ol>\r\n&nbsp;\r\n\r\nPour \u00e9viter ces \u00e9cueils, une autre solution se dessine. Je cr\u00e9e un <strong><span style=\"color: #e6af2a;\">webscrapper<\/span> <\/strong>o\u00f9 j\u2019incorpore mon programme. Ce nouveau produit se mettra \u00e0 parser des pages Web et remontera les tags et les attributs qu\u2019il ne conna\u00eet pas. Je n\u2019aurai plus qu\u2019\u00e0 les incorporer dans mon programme en d\u00e9veloppant les parsers correspondant.\r\n\r\nPour pr\u00e9parer cette solution, il y a deux choses \u00e0 faire\u00a0:\r\n<ol>\r\n \t<li>Il faut un syst\u00e8me d\u2019exception pour remonter facilement les \u00e9l\u00e9ments qu\u2019il n\u2019arrive pas \u00e0 parser. Heureusement, je l'ai d\u00e9velopp\u00e9 il y a quelques semaines.<\/li>\r\n \t<li>Cr\u00e9er un syst\u00e8me de logs o\u00f9 tous les \u00e9l\u00e9ments non parsables seront notifi\u00e9s. Ensuite, le comportement du programme devra \u00eatre modifi\u00e9. Actuellement \u00e0 la premi\u00e8re erreur, il s\u2019arr\u00eate de fonctionner. A place, il marquera dans les logs l\u2019\u00e9l\u00e9ment inconnu et continuera \u00e0 parser le reste de la page. Ainsi \u00e0 la fin de son ex\u00e9cution, j\u2019aurai une liste d\u2019\u00e9l\u00e9ments \u00e0 int\u00e9grer.<\/li>\r\n<\/ol>\r\n<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n&nbsp;\r\n<h2>Performance<\/h2>\r\n&nbsp;\r\n<h3>Importance de la performance<\/h3>\r\nComme dit dans mes pr\u00e9c\u00e9dents articles, la <strong><span style=\"color: #e6af2a;\">vitesse d\u2019ex\u00e9cution<\/span><\/strong> d\u2019un navigateur internet est tr\u00e8s importante. La partie parsing de mon moteur doit donc \u00eatre la plus rapide possible. Apr\u00e8s avoir permis \u00e0 mon programme de pouvoir parser la majorit\u00e9 des pages web, il faut am\u00e9liorer les performances.\r\n<h3>Mesures<\/h3>\r\nTout d\u2019abord, il faut que je puisse ajouter des mesures pour\u00a0conna\u00eetre son temps d\u2019ex\u00e9cution et identifier les parties \u00e0 am\u00e9liorer.\r\n<h3>R\u00e9cursivit\u00e9<\/h3>\r\nPour la gestion de l\u2019arbre, la <span style=\"color: #e6af2a;\"><strong>r\u00e9cursivit\u00e9<\/strong> <\/span>a \u00e9t\u00e9 mise en place pour pouvoir parser une page enti\u00e8re. La r\u00e9cursivit\u00e9 n\u2019est pas forc\u00e9ment la meilleure solution \u00e0 cause de sa consommation m\u00e9moire. Pour le moment, aucun probl\u00e8me n\u2019a \u00e9t\u00e9 rencontr\u00e9 sur ce sujet l\u00e0. Mais je serai peut-\u00eatre amen\u00e9 \u00e0 modifier cette partie pour am\u00e9liorer les performances.\r\n<h3>R\u00e9p\u00e9titions<\/h3>\r\nPlusieurs t\u00e2ches identiques se <strong><span style=\"color: #e6af2a;\">r\u00e9p\u00e8tent<\/span> <\/strong>pendant le workflow. Par exemple, \u00e0 plusieurs endroits le programme doit conna\u00eetre la balise ouvrante et fermante du tag. Il les calcule \u00e0 chaque fois. Pour un programme lambda, refaire cette t\u00e2che ne poserait aucun probl\u00e8me. Pour un programme o\u00f9 la rapidit\u00e9 devient la r\u00e8gle ce n\u2019est pas la m\u00eame chose. Il faudra peut-\u00eatre modifier le <span style=\"color: #e6af2a;\"><strong>workflow<\/strong> <\/span>pour calculer les donn\u00e9es n\u00e9cessaires et les rendre accessibles au reste du programme.\r\n<h3>R\u00e9\u00e9crire dans un autre langage<\/h3>\r\nLa premi\u00e8re version de ce programme a \u00e9t\u00e9 faite en C# un langage haut niveau. Pour gagner de la vitesse d\u2019ex\u00e9cution, je serai peut-\u00eatre amen\u00e9 \u00e0 le r\u00e9\u00e9crire dans un langage bas niveau comme :\r\n<ul>\r\n \t<li style=\"list-style-type: none;\">\r\n<ul>\r\n \t<li style=\"list-style-type: none;\">\r\n<ol>\r\n \t<li>Go<\/li>\r\n \t<li>C++<\/li>\r\n \t<li>Rust<\/li>\r\n<\/ol>\r\n<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\nEn le r\u00e9\u00e9crivant, je pourrai obtenir :\r\n<ul>\r\n \t<li style=\"list-style-type: none;\">\r\n<ul>\r\n \t<li style=\"list-style-type: none;\">\r\n<ol>\r\n \t<li>Une meilleure performance<\/li>\r\n \t<li>Un point de comparaison entre mon programme \u00ab haut niveau \u00bb et mon programme \u00ab bas niveau \u00bb.<\/li>\r\n<\/ol>\r\n<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\n&nbsp;\r\n<h3>Continuer le moteur html<\/h3>\r\nUn moteur html comme on l\u2019a vu dans les anciens articles, n\u2019est pas constitu\u00e9 uniquement par un parseur. La cr\u00e9ation d\u2019un <strong><span style=\"color: #e6af2a;\">CSSOM<\/span> <\/strong>constituera la prochaine brique d\u00e9velopp\u00e9e de Falcon.\r\n\r\n&nbsp;\r\n\r\nMerci d\u2019avoir lu cet article. J\u2019esp\u00e8re ne pas avoir perdu beaucoup de monde. J\u2019ai voulu vous montrer les deux principales features de mon programme\u00a0:\r\n<ul>\r\n \t<li style=\"list-style-type: none;\">\r\n<ul>\r\n \t<li style=\"list-style-type: none;\">\r\n<ol>\r\n \t<li>L\u2019identification des enfants<\/li>\r\n \t<li>Le traitement de l\u2019arbre form\u00e9 par les tags de la page html<\/li>\r\n<\/ol>\r\n<\/li>\r\n<\/ul>\r\n<\/li>\r\n<\/ul>\r\nSi vous voulez voir le code voici le d\u00e9p\u00f4t <strong><span style=\"color: #cc99ff;\"><a style=\"color: #cc99ff;\" href=\"https:\/\/github.com\/plouiserre\/Falcon\">github<\/a><\/span>.<\/strong> Prenez-le, clonez-le, faites un fork si vous le d\u00e9sirez. Si vous avez des am\u00e9liorations \u00e0 proposer ou des questions \u00e0 poser, servez-vous des commentaires de ce blog ou du post LinkedIn pr\u00e9sentant cet article.\r\n\r\nDe mon c\u00f4t\u00e9, un nouvel article para\u00eetra vous racontera le d\u00e9veloppement de ce programme et les d\u00e9cisions techniques prises pour faciliter sa cr\u00e9ation.","protected":false},"excerpt":{"rendered":"<p>Cet \u00e9t\u00e9, j\u2019ai \u00e9crit et publi\u00e9 trois articles parlant des navigateurs internet : Une pr\u00e9sentation g\u00e9n\u00e9rale Un historique allant des pr\u00e9mices \u00e0 la standardisation du web L\u2019ing\u00e9nierie expliquant leur fonctionnement interne &nbsp; Au d\u00e9part, je pensais que mes recherches et la r\u00e9daction allaient juste m\u2019amener \u00e0 faire de la vulgarisation. Mais plus je travaillais dessus [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":445,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,5],"tags":[],"class_list":["post-326","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-navigateur","category-projet"],"_links":{"self":[{"href":"https:\/\/buildmytech.fr\/index.php\/wp-json\/wp\/v2\/posts\/326","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=326"}],"version-history":[{"count":111,"href":"https:\/\/buildmytech.fr\/index.php\/wp-json\/wp\/v2\/posts\/326\/revisions"}],"predecessor-version":[{"id":447,"href":"https:\/\/buildmytech.fr\/index.php\/wp-json\/wp\/v2\/posts\/326\/revisions\/447"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buildmytech.fr\/index.php\/wp-json\/wp\/v2\/media\/445"}],"wp:attachment":[{"href":"https:\/\/buildmytech.fr\/index.php\/wp-json\/wp\/v2\/media?parent=326"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buildmytech.fr\/index.php\/wp-json\/wp\/v2\/categories?post=326"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buildmytech.fr\/index.php\/wp-json\/wp\/v2\/tags?post=326"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}