L'ordre dans lequel les navigateurs chargent et affichent le HTML

L'ordre dans lequel les navigateurs chargent et affichent le HTML, comment accélérer le chargement des pages HTML, les processus de chargement et d'analyse des pages HTML, etc., seront présentés en détail dans cet article. Les amis intéressés ne devraient pas le manquer

L'ordre dans lequel le navigateur charge et restitue 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), alors le processus de téléchargement d'IE permettra 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 fait référence à JS, 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 y aura probablement du

code dans JS qui modifie directement la structure arborescente DOM, comme l'utilisation de document.write ou app end Child, ou même utiliser directement location.href pour sauter. 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 présentations. .

Comment accélérer le chargement des pages HTML

1. Perte de poids de la page :

a. 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 perdre du poids pour le 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éduisez les requêtes de nom de domaine :

a. Les requêtes DNS et la résolution de noms de domaine prennent également du temps, réduisez donc les images JavaScript, CSS et externes. Références à d'autres ressources, moins on utilise 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 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 initialement affiché Les images pertinentes, le flash, les vidéos et autres ressources très volumineuses sont chargés 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 W3C modernes 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 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 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.

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

Processus de chargement et d'analyse des pages 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), le navigateur envoie une requête au serveur et le serveur renvoie un fichier HTML.

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

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 et 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 trouve une balise