Comprendre le processus de rendu des pages HTML en préparation à l'apprentissage de l'optimisation des performances frontales_HTML/Xhtml_Production de pages Web-tutoriel HTML-php.cn

Comprendre le processus de rendu des pages HTML en préparation à l'apprentissage de l'optimisation des performances frontales_HTML/Xhtml_Production de pages Web

WBOY

Libérer： 2016-05-16 16:40:41

original

1517 Les gens l'ont consulté

Récemment, j'apprends l'optimisation des performances front-end. Il est nécessaire de comprendre le processus de rendu des pages afin de prescrire le bon médicament et de découvrir le goulot d'étranglement des performances. Voici quelques choses que j'ai vues, à partager avec vous.
Référence : Comprendre le moteur de rendu
Le rendu de la page présente les caractéristiques suivantes :
•Interrogation d'événements monothread
•Opérations bien définies, continues et ordonnées (HTML5 )
•Segmentation des mots et construction de l'arborescence DOM
•Demande de ressources et préchargement
•Création de l'arborescence de rendu et dessin de la page
Plus précisément :
Quand nous obtenons du HTML à partir du réseau Lorsque les octets correspondants sont atteints, l'arborescence DOM commence à se construire. Le fil du navigateur qui met à jour l'interface utilisateur en est responsable. Lorsque vous rencontrez les situations suivantes, la construction de l'arborescence DOM sera bloquée :
•Le flux de réponse HTML est bloqué dans le réseau
•Il y a un script déchargé
•Un nœud de script est rencontré, mais celui-ci Il reste encore des fichiers de style déchargés
L'arbre de rendu est construit à partir de l'arborescence DOM et sera bloqué par les fichiers de style.
Parce qu'il est basé sur une interrogation d'événements monothread, même s'il n'y a pas de blocage des scripts et des styles, lorsque ces scripts ou styles sont analysés, exécutés et appliqués, le rendu de la page sera bloqué.
Certaines situations qui ne bloqueront pas le rendu de la page :
• Attribut defer défini et attribut asynchrone
• Aucun fichier de style avec le type de média correspondant
• Échec de transmission du script d'insertion de l'analyseur node ou style node
Ci-dessous, illustrons avec un exemple (code complet) :

Copier code

Le code est le suivant :

example.css">
　

Bonjour !

　<script> <br>　document.write('<script src="other.js">&lt ; /scr' 'ipt>'); <br>　</script>
　

Salut encore !

　

Une fois le fichier example.css Le fichier est chargé, l'arbre de rendu est maintenant construit.
Une fois le script en ligne exécuté, l'analyseur sera immédiatement bloqué par other.js. Une fois l'analyseur bloqué, le navigateur reçoit la demande de tirage et "Bonjour !" s'affiche sur la page.
Lorsque other.js est chargé, l'analyseur continue d'analyser vers le bas. . .

Copier le code

Le code est le suivant :

Bonjour !
　<script> <br>　document.write('<script src="other.js"<</scr' 'ipt>'); <br>　</script> >　

Salut encore !

Après que l'analyseur rencontre last.js être bloqué, le navigateur reçoit une autre demande de tirage et "Salut encore!" s'affiche sur la page. Enfin, last.js sera chargé et exécuté.
Cependant, afin de ralentir le blocage du rendu, les navigateurs modernes utilisent le chargement spéculatif.

Dans le cas ci-dessus, les scripts et fichiers de style bloqueront sérieusement le rendu de la page. Je suppose que le but du préchargement est de réduire ce temps de blocage. Lorsque le rendu est bloqué, il fera ce qui suit :
• Un scanner léger HTML (ou CSS) (scanner) continue d'analyser le document
• Trouver des ressources qui pourront être utilisées dans les futures URL des fichiers
• Téléchargez-les avant que le moteur de rendu les utilise
Cependant, le préchargement ne peut pas découvrir les fichiers de ressources chargés via javascript (par exemple, document.write()).

Remarque : Tous les navigateurs "modernes" prennent en charge cette méthode. Retournez en arrière et regardez l'exemple ci-dessus pour deviner comment fonctionne le préchargement.

Copier le codeLe code est le suivant :

>< corps>
　
　

Bonjour !

　<script>... <br> <br><br>L'analyseur a renvoyé example.css et l'a obtenu du réseau. L'analyseur n'a pas été bloqué et a continué à analyser lorsqu'il a rencontré un nœud de script en ligne, il a été bloqué car le fichier de style n'était pas chargé. . Bloque l'exécution du script. L'arbre de rendu est également bloqué par le fichier de style, de sorte que le navigateur ne reçoit pas la demande de rendu et ne peut rien voir. Jusqu'à présent, c'est la même chose que celle qui vient d'être mentionnée. Mais ensuite les choses ont changé. </div> <br>Le préchargeur (Speculative Loader) continue de "lire" le document, découvre last.js et le charge. Suivant : <br><br><br><br><div class="msgheader"> <div class="right">Copiez le code<span style="CURSOR: pointer" onclick="copycode(getid('phpcode28'));"><u></u>Le code est le suivant :</span> </div> </div><html&gt ; <div class="msgborder" id="phpcode28"><body> <br>　<link rel="stylesheet" href="example.css"> <br>　<div> <br> document.write('<script src="other.js"></scr' 'ipt>'); <br>　</script> fichier example.css Une fois le chargement terminé, l'arborescence de rendu est terminée et le script en ligne peut être exécuté. Après cela, l'analyseur est bloqué par other.js. Une fois l'analyseur bloqué, le navigateur recevra la première demande de rendu et "Bonjour !" s'affichera sur la page. Cette étape est cohérente avec la situation actuelle. Ensuite :

Copiez le code

Le code est le suivant :

Bonjour !

　document .write('
　

Salut encore !< ;/div>
　

L'analyseur a trouvé last.js, mais comme le préchargeur venait de le charger, il a été placé dans le cache du navigateur, donc last.js sera exécuté immédiatement. Ensuite, le navigateur recevra une demande de rendu et « Salut à nouveau » s'affichera sur la page.
En comparant les deux situations avant et après, j'espère que chacun pourra avoir une certaine compréhension du rendu des pages, puis faire quelques optimisations ciblées. Bonne nuit! (Fin)^_^