Récemment, j'apprends l'optimisation des performances du frontal. Il est nécessaire de comprendre le processus de rendu de la page afin de prescrire le bon médicament et de découvrir le goulot d'étranglement des performances. Voici quelques choses que j'ai vues et je les partagerai avec vous.
Référence: Comprendre le rendu
Le rendu de la page a les caractéristiques suivantes :• Sondage des événements à thread unique
• Fonctionnement clairement défini, continu et ordonné (HTML5)
• Partition et construction d'arbres DOM
• Demander des ressources et une précharge
• Construire des arbres de rendu et dessiner des pages
Spécifiquement :Lorsque nous obtenons les octets correspondants de HTML à partir du réseau, l'arborescence DOM commence à être construite. Le fil qui met à jour l'interface utilisateur est responsable du navigateur. La construction de l'arbre Dom est bloquée lorsque:
• Le flux de réponse HTML est bloqué dans le réseau
• Il y a des scripts non chargés
• Le nœud de script a été rencontré, mais il y avait toujours un fichier de style non chargé à ce moment
L'arbre de rendu est construit à partir de l'arborescence DOM et sera bloqué par le fichier de style.
Puisqu'il est basé sur un sondage d'événements à thread, même s'il n'y a pas de blocage des scripts et des styles, le rendu de la page sera bloqué lorsque ces scripts ou styles seront analysés, exécutés et appliqués.
Certains cas où le rendu des pages ne bloque pas :• Attributs de différence définis et attributs asynchrones
• Le fichier de style sans type de support correspondant
• Aucun nœud de script ou nœud de style n'est inséré via l'analyseur
Ici, illustrons cela avec un exemple (code complet) :Copier le code