Introduction détaillée au chargement de pages HTML et à l'analyse

1. L'ordre des téléchargements IE est de haut en bas, et l'ordre de rendu est également de haut en bas. Le téléchargement et le rendu sont effectués simultanément.

2. Lorsque vous rendez une partie de la page, toutes les parties ci-dessus ont été téléchargées (tous les éléments associés n'ont pas été téléchargés).

3. Si vous rencontrez un fichier d'interprétation sémantique d'interprétation (script JS, style CSS), le processus de téléchargement IE permettra une connexion distincte pour le téléchargement.

4. Une fois le téléchargement de la feuille de style terminée, il sera analysé avec toutes les feuilles de style téléchargées précédemment. Une fois l'analyse terminée, tous les éléments précédents (y compris ceux qui ont été rendus auparavant) seront renvoyés.

5. S'il y a une redéfinition dans JS et CSS, la fonction de définition ultérieure remplacera la fonction de définition précédente.

1. Impossible de télécharger et d'analyser le parallèle (blocage de téléchargement).

2. Lorsque JS est référencé, le navigateur envoie une demande JS et attendra le retour de la demande. Parce que le navigateur a besoin d'une structure d'arbre Dom stable, il est très probable qu'il y ait

Le code modifie directement la structure de l'arborescence DOM, comme l'utilisation de document.write ou de l'appendchild, ou même directement en utilisant l'emplacement.href pour les sauts. Afin d'éviter que les réparations JS se produisent, le navigateur

Pour modifier l'arbre Dom, il est nécessaire de reconstruire l'arbre Dom, donc il bloquera d'autres téléchargements et rendus.

1. Perte de poids de la page:

un. Le poids de la page est le facteur le plus important affectant la vitesse de chargement.

né Supprimer les espaces et commentaires inutiles.

c. Déplacez le script en ligne et CSS vers des fichiers externes.

d. Vous pouvez utiliser HTML Tidy pour perdre du poids pour HTML, et vous pouvez également utiliser des outils de compression pour perdre du poids pour JavaScript.

2. Réduire le nombre de fichiers:

un. La réduction du nombre de fichiers référencés sur la page peut réduire le nombre de connexions HTTP.

né De nombreux fichiers JavaScript et CSS peuvent être fusionnés et il est préférable de les fusionner. Caibangzi a fusionné leur javascript. fonctions et prototype.js dans un fichier base.js.

3. Réduire la requête du nom de domaine:

un. Les noms de domaine de requête DNS et d'analyse consomment également du temps, nous devons donc réduire la référence à JavaScript externe, CSS, images et autres ressources. Moins vous utilisez différents noms de domaine, mieux c'est.

4. Données réutilisées en cache:

un. Cache réutilisée des données.

5. Optimiser l'ordre de chargement des éléments de la page:

un. Chargez d'abord le contenu affiché à l'origine sur la page et le JavaScript et CSS qui y sont liés, puis chargez des choses liées à HTML, telles que celles qui ne sont pas affichées sur les images originales, les flash, les vidéos, etc., et enfin les charger.

6. Réduire le nombre de JavaScript en ligne:

un. L'analyseur du navigateur supposera que JavaScript en ligne modifiera la structure de la page, donc l'utilisation de JavaScript en ligne coûte cher.

né N'utilisez pas Document.Write (), une méthode de sortie du contenu, utilisez des méthodes DOM W3C modernes pour traiter le contenu de la page pour les navigateurs modernes.

7. Utilisez des CSS et des étiquettes juridiques modernes:

un. Utilisez le CSS moderne pour réduire les étiquettes et les images. Par exemple, l'utilisation de texte CSS + moderne peut remplacer complètement certaines images de texte uniquement.

né Utilisez des balises légales pour éviter la correction d'erreurs et d'autres opérations lorsque le navigateur analyse HTML. Vous pouvez également utiliser HTML Tidy pour perdre du poids pour HTML.

8. Chunk votre contenu:

un. N'utilisez pas de tables imbriquées, mais des tables ou des divs non créés. Décomposez la disposition du tableau sur la base de gros morceaux de tables imbriquées dans plusieurs petites tables, vous n'avez donc pas à attendre que le contenu entier de la page (ou de grande table) soit chargé avant son affichage.

9. Spécifiez la taille de l'image et du tableau:

un. Si le navigateur peut déterminer immédiatement la taille de l'image ou de la table, il peut immédiatement afficher la page sans refaire un arrangement de mise en page.

né Cela accélère non seulement l'affichage de la page, mais empêche également des modifications inappropriées de la mise en page une fois la page chargée.

c. L'image utilise la hauteur et la largeur.

1. L'utilisateur entre dans l'URL (en supposant qu'il s'agit d'une page HTML et c'est la première fois que vous y accédez), le navigateur émet une demande au serveur et le serveur renvoie le fichier HTML.

2. Le navigateur commence à charger le code HTML et constate qu'il y a une balise <ink> dans la balise <adread> faisant référence au fichier CSS externe.

3. Le navigateur émet une demande de fichier CSS et le serveur renvoie le fichier CSS.

4. Le navigateur continue de charger la partie <body> du code dans le HTML, et le fichier CSS a été obtenu, afin que vous puissiez commencer à rendre la page.

5. Le navigateur a trouvé une balise <Mg> dans le code qui a fait référence à une image et a fait une demande au serveur. À l'heure actuelle, le navigateur n'attendra pas que l'image soit téléchargée, mais continuera de rendre le code suivant.

6. Le serveur renvoie le fichier image. Étant donné que l'image occupe une certaine zone, elle affecte la disposition des paragraphes suivants, le navigateur doit donc revenir en arrière et renvoyer cette partie du code.

7. Le navigateur a trouvé une balise <cript> contenant une ligne de code JavaScript et l'exécute rapidement.

8. Le script JavaScript exécute cette instruction, qui commande au navigateur pour masquer un <ystyle> (style.display = Aucun) dans le code. C'est dommage, soudain, il manque un tel élément, et le navigateur doit renvoyer cette partie du code.

9. Enfin, j'ai attendu l'arrivée de </html>, et le navigateur a fondu en larmes ...

10. Attendez, ce n'est pas encore fini, l'utilisateur a cliqué sur le bouton Skinning dans l'interface, et JavaScript a demandé au navigateur de modifier le chemin CSS de la balise <en lien>.

11. Le navigateur a rassemblé tout le monde ici, tout le monde a emballé ses bagages, nous devons recommencer ... le navigateur a demandé un nouveau fichier CSS au serveur et rendu la page.