Maison >interface Web >tutoriel HTML >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
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) :