Maison > Article > interface Web > Introduction détaillée au processus de chargement et d'analyse des pages HTML
Introduction détaillée au processus de chargement et d'analyse des pages HTML
- 高洛峰original
- 2017-02-09 17:31:041759parcourir
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 manquer Chargement du navigateur. et L'ordre de rendu 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 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 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 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 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 de la partie et le fichier CSS a été obtenu et la page peut être rendue.
5. Le navigateur trouve une balise
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