Explication détaillée du processus de chargement et d'analyse des pages HTML

L'ordre dans lequel le navigateur charge et affiche le HTML

1. L'ordre de téléchargement d'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 en même temps.

2. Lors du rendu sur une certaine partie de la page, toutes les parties situées au-dessus ont été téléchargées (cela ne signifie pas que tous les éléments associés ont été téléchargés).

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

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

5. S'il y a une redéfinition en JS ou CSS, la fonction définie ultérieurement écrasera la fonction définie précédemment.

Chargement JS

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

2. Lorsque JS est référencé, le navigateur envoie une requête js et attendra le retour de la requête. Parce que le navigateur a besoin d'une structure arborescente DOM stable, et il est très probable qu'il existe des codes

dans JS qui modifient directement la structure arborescente DOM, comme en utilisant document.write ou appendChild, ou même en utilisant directement location. href. Jump, afin d'empêcher JS de modifier l'arborescence DOM

, le navigateur doit reconstruire l'arborescence DOM, il bloquera donc les autres téléchargements et rendus

Comment faire. accélérer la vitesse de chargement des pages HTML

1. Perte de poids de la page :

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

b. Supprimez les espaces et les commentaires inutiles.

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

d. Vous pouvez utiliser HTML Tidy pour affiner le HTML, et vous pouvez également utiliser certains outils de compression pour affiner le JavaScript.

2. Réduire le nombre de fichiers :

a. Réduire le nombre de fichiers référencés sur la page peut réduire le nombre de connexions HTTP.

b. De nombreux fichiers JavaScript et CSS peuvent être fusionnés et sont mieux fusionnés. Caibangzi a fusionné ses fonctions JavaScript et Prototype.js dans un fichier base.js.

3. Réduire les requêtes de nom de domaine :

a. Les requêtes DNS et la résolution de noms de domaine prennent également du temps, il est donc nécessaire de réduire les références au JavaScript externe, CSS, images et autres ressources, moins il y a d'utilisations de noms de domaine différents, mieux c'est.

4. CacheRéutiliser les données :

a.

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

a. Chargez d'abord le contenu initialement affiché sur la page et le JavaScript et le CSS qui y sont associés, puis chargez les éléments liés au HTML, comme ce qui n'est pas initialement affiché. Les images, flash, vidéos et autres ressources très volumineuses pertinentes sont chargées en dernier.

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

a. L'analyseur du navigateur supposera que le JavaScript en ligne modifiera la structure de la page, donc l'utilisation de JavaScript en ligne est plus coûteuse.

b. N'utilisez pas document.write() pour générer du contenu, utilisez les méthodes DOM modernes du W3C pour gérer le contenu des pages pour les navigateurs modernes.

7. Utilisez du CSS moderne et des balises légales :

a. Utilisez du CSS moderne pour réduire les balises et les images. Par exemple, l'utilisation de CSS + texte moderne peut remplacer complètement certaines images par du texte uniquement.

b. Utilisez des balises légales pour empêcher le navigateur d'effectuer des opérations de « correction d'erreurs » lors de l'analyse HTML. Vous pouvez également utiliser HTML Tidy pour affiner le HTML.

8. Découpez votre contenu :

a. N'utilisez pas de tableaux imbriqués, mais utilisez des tableaux non imbriqués ou p. Divisez la mise en page basée sur un grand tableau imbriqué en plusieurs petits tableaux, de sorte qu'il n'est pas nécessaire d'attendre que le contenu de la page entière (ou du grand tableau) soit chargé avant de l'afficher.

9. Spécifiez la taille des images et des tableaux :

a. Si le navigateur peut déterminer immédiatement la taille de l'image ou du tableau, alors il peut afficher la page immédiatement sans avoir à en refaire. aménagements.

b. Cela accélère non seulement l'affichage de la page, mais évite également certaines modifications de mise en page inappropriées après le chargement de la page.

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

Processus de chargement et d'analyse de la page HTML

1 L'utilisateur saisit l'URL (en supposant qu'il s'agit d'une page HTML et qu'il s'agit de la première visite), et le navigateur l'envoie. une requête au serveur. Le serveur renvoie le fichier html.

2. Le navigateur commence à charger le code html et constate qu'il y a une balise dans la balise

3. Le navigateur envoie à nouveau une demande pour le fichier CSS et le serveur renvoie le fichier CSS.

4. Le navigateur continue de charger le code pour la partie du HTML, le fichier CSS a été obtenu et la page peut être rendue.

5. Le navigateur trouve une balise dans le code qui fait référence à une image et envoie 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 Étant donné que l'image occupe une certaine zone et affecte la disposition des paragraphes suivants, le navigateur doit revenir en arrière et restituer cette partie du code.

7. Le navigateur a trouvé une balise

• Résumé des connaissances HTML
• Comment apprendre le HTML rapidement
• La différence entre htmlxhtmlxml
• La différence entre les attributs src et href
• 关于HTML5和CSS替换使用