Explication du principe d'analyse HTML

Les ingénieurs front-end web standard doivent connaître ◎Le principe de rendu/redessin du navigateur (ou du lecteur correspondant)

Je dois travailler plus dur là-dessus. Je ne l'ai vraiment pas expliqué très clairement, alors je l'ai simplement écrit, et il n'y a pas eu beaucoup de résultats. Quand j'en ai trouvé un, je l'ai écrit. . .

La partie suivante est tirée du blog de handawei-javaeye :

Les pages Web s'exécutent dans une variété de navigateurs, et la vitesse à laquelle le navigateur charge et affiche la page affecte directement l'expérience utilisateur
En termes simples, le rendu de page est le processus par lequel le navigateur affiche le code HTML dans la fenêtre du navigateur selon les règles définies par CSS. Tout d'abord, comprenons de manière générale le fonctionnement du navigateur :
1. L'utilisateur saisit l'URL (en supposant qu'il s'agit d'une page HTML et que c'est la première fois qu'il la visite), le navigateur envoie une requête au serveur, et le serveur renvoie un fichier html ;
2. Le navigateur commence à charger le code html et constate qu'il y a une balise dans la balise

qui fait référence à un fichier CSS externe
3. Le navigateur envoie à nouveau une demande de fichier CSS et le serveur renvoie le fichier CSS
4. Le navigateur continue de charger le code de la partie et la page peut être rendue
5. Le navigateur trouve un dans le code. La balise fait référence à une image et fait une requête au serveur. À ce stade, le navigateur n'attendra pas que l'image soit téléchargée, mais continuera à restituer le code suivant :
6. Le serveur renvoie le fichier image Puisque l'image occupe une certaine zone, cela affecte la disposition du fichier image. paragraphes suivants, le navigateur doit donc revenir en arrière pour restituer cette partie du code ;
7. Le navigateur trouve une balise <script> contenant une ligne de code Javascript, exécutez-la rapidement ; Le script Javascript exécute cette instruction, qui commande au navigateur de masquer Supprimer un <div> dans le code (style.display=”none”). Oups, du coup un tel élément manque, et le navigateur doit restituer cette partie du code <br/> 9. Finalement, quand arrive, le navigateur fond en larmes... <br/> 10 . Attendez, ce n'est pas encore fini. L'utilisateur a cliqué sur le bouton "Skin Change" dans l'interface, et Javascript a demandé au navigateur de modifier le chemin CSS de la balise <link> ;div&gt ;<span><ul><li>Nous, "Tout le monde fait ses valises, il faut recommencer...", le navigateur a demandé <br/> un nouveau fichier CSS au serveur et a restitué la page. <br/><br/> <p> <p> Les navigateurs font des allers-retours comme ça tous les jours. Vous devez savoir que la qualité des codes html et css écrits par différentes personnes est peut-être un jour inégale. Je suis mort en courant. Heureusement, il existe encore un groupe de personnes dans ce monde : les ingénieurs en reconstruction de pages. Ils sont généralement très discrets. Ils aident simplement les concepteurs visuels à couper des images et à modifier des mots. En fait, ils font beaucoup de choses pratiques en coulisses. <p>En parlant de pourquoi la page est lente ? En effet, le navigateur prend du temps et des efforts pour effectuer le rendu, en particulier lorsqu'il constate qu'une certaine partie a légèrement changé et affecte la mise en page, et doit revenir en arrière et restituer. Les experts appellent ce processus de restauration appelé redistribution. <p><p style="max-width:90%"><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/963/493/887/1488959472280777.jpg" class="lazy" title="Explication du principe danalyse HTML" alt="Explication du principe danalyse HTML" style="max-width:90%" style="max-width:90%"/> Le reflow est presque inévitable. Certains effets populaires sur l'interface actuellement, tels que le pliage et l'expansion de répertoires arborescents (essentiellement l'affichage et le masquage d'éléments), etc., provoqueront une redistribution du navigateur. Glissement de la souris, clic... Tant que ces actions entraînent des modifications de la zone, du positionnement, des marges et d'autres attributs de certains éléments de la page, elles provoqueront un nouveau rendu à l'intérieur, autour ou même de la page entière. Habituellement, nous ne pouvons pas prédire quelle partie du code le navigateur va redistribuer, elles s'influencent toutes mutuellement. <p><p style="text-align: center;"><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/435/481/759/1488959491648314.jpg" class="lazy" title="Explication du principe danalyse HTML" alt="Explication du principe danalyse HTML" style="max-width:90%" style="max-width:90%"/> Le problème de refusion peut être optimisé et nous pouvons minimiser la refusion inutile. Par exemple, le problème de chargement de l'image <img alt="Explication du principe d'analyse HTML" > dans l'exemple du début est en fait une redistribution qui peut être évitée : il suffit de définir la largeur et la hauteur de l'image. De cette manière, le navigateur connaît la zone occupée par l'image et réserve l'espace avant de charger l'image. <p>De plus, il existe un terme qui ressemble à reflow : repaint, qui s'appelle redraw en chinois. Si vous modifiez simplement la couleur d'arrière-plan, la couleur du texte, la couleur de la bordure, etc. d'un élément sans affecter sa disposition environnante ou interne, le navigateur sera simplement repeint. La vitesse de repeinture est évidemment plus rapide que la refusion (dans IE, vous devez changer le terme, la refusion est plus lente que la refonte). La prochaine fois, nous utiliserons une série d'expériences pour illustrer l'optimisation de la redistribution sous des navigateurs tels que Firefox et IE. <p><p></script>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!