Introduction détaillée au processus de chargement et d'analyse des pages HTML_HTML/Xhtml_Production de pages Web

L'ordre dans lequel le navigateur charge et rend 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. 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 balises sémantiquement interprétables (script JS, style CSS), alors le processus de téléchargement 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 les éléments précédemment rendus) 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 arborescence DOM stable, et il y aura probablement du code

dans JS qui modifie directement la structure de l'arborescence DOM, par exemple 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 accélérer. 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 commentaires inutiles.

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

d. Vous pouvez utiliser HTML Tidy pour perdre du poids pour HTML, et vous pouvez également utiliser certains outils de compression pour perdre du poids pour 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 à du JavaScript, CSS, images et autres externes. ressources. Plus on utilise de noms de domaine différents, moins c'est mieux.

4. Mettre en cache les données réutilisées :

a. Mettre en cache les données réutilisées.

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

a. Chargez d'abord le contenu initialement affiché sur la page ainsi que 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 affiché initialement. 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 texte CSS 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 du HTML. Elles peuvent également être utilisées par HTML Tidy pour affiner le HTML.

8. Découpez votre contenu :

a. N'utilisez pas de tables imbriquées, mais utilisez des tables ou des divs non imbriqués. 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 entier de la page (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 à l'intérieur de la balise qui fait référence à un fichier CSS externe.

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 de la partie du html, et le fichier CSS a été obtenu, et la page peut être rendue.

5. Le navigateur trouve une balise dans le code qui 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 trouve une balise <script> contenant une ligne de code Javascript et l'exécute rapidement. <br /><br />8. Le script Javascript exécute cette instruction, qui demande au navigateur de masquer un certain <style> (style.display="none") dans le code. Oups, tout à coup, un tel élément manque et le navigateur doit restituer cette partie du code. <br /><br />9. En attendant enfin l'arrivée de , le navigateur a fondu en larmes... <br /><br />10 Attendez, ce n'est pas encore fini, l'utilisateur a cliqué sur le bouton "Changement de skin". dans l'interface, Javascript permet au navigateur de modifier le chemin CSS de la balise <link>. <br /><br />11. Le navigateur convoque toutes les personnes présentes <div><span><ul><li>, "Tout le monde fait ses valises, il faut recommencer...", le navigateur demande au serveur Créer un nouveau Fichier CSS et restituez la page.</script>