Maison >interface Web >tutoriel CSS >Introduction détaillée aux solutions d'optimisation des performances Web
Introduction détaillée aux solutions d'optimisation des performances Web
- 黄舟original
- 2017-07-27 09:39:351125parcourir
Chapitre 1 Analyse de l'état lent du site Web ouvert
Lorsque l'entreprise accède au site Web VIP déployé dans la salle informatique IDC, cela semblera très lent. Quelle est la cause de cela ? Afin de réduire le temps de réponse de la page et d'améliorer notre expérience utilisateur, nous devons savoir ce que les utilisateurs passent leur temps à attendre.
Vous pouvez suivre notre page de connexion, comme indiqué ci-dessous
À partir de l'image ci-dessus, nous pouvons analyser et savoir, HTMLLes documents ne représentent que 20% du temps de réponse total, et les 80% autres temps de réponse sont utilisés pour télécharger JS, CSS, images, etc. composants. Par conséquent, il y a beaucoup de place pour l'optimisation dans le front-end de WEB Nous donnerons un plan d'optimisation des performances pour WEB à partir des deux aspects de l'optimisation front-end et arrière. -optimisation finale du WEB .
1. Réduire HTTP requêtes
1, Fusionnez les fichiers de script et de style, par exemple, vous pouvez combiner plusieurs fichiers CSS en one , combinez plusieurs fichiers JS en un seul.
2, Sprites CSS Utilisez l' arrière-plan CSS les éléments associés pour positionner de manière absolue l'image d'arrière-plan , pour combiner plusieurs images une image.
2. Utiliser le cache du navigateur
Lorsque les utilisateurs parcourent différentes pages du site Web, de nombreux contenus sont répétés, comme les mêmes JS, CSS, images, etc. Si nous pouvions suggérer ou même forcer les navigateurs à mettre en cache ces fichiers localement, cela réduirait considérablement la quantité de trafic généré par la page, réduisant ainsi les temps de chargement des pages.
Selon la réponse côté serveur header, un fichier a plusieurs niveaux différents d'état de cache pour le navigateur.
1. Le serveur indique au navigateur de ne pas mettre en cache ce fichier et de mettre à jour le fichier sur le serveur à chaque fois.
2. Le serveur ne donne aucune instruction au navigateur.
3 Lors de la dernière transmission, le serveur a envoyé au navigateur les données Last-Modified ou Etag Lors de la nouvelle navigation, le navigateur This. les données seront soumises au serveur pour vérifier si la version locale est la dernière. Si c'est la dernière, le serveur renverra le code 304, indiquant au navigateur d'utiliser directement la version locale, sinon téléchargez la version locale. nouvelle version. D'une manière générale, s'il n'y a que des fichiers statiques, le serveur fournira ces données.
4. Le serveur force le navigateur à mettre en cache les fichiers et définit un délai d'expiration. Avant l'expiration du cache, le navigateur utilisera directement le fichier de cache local sans aucune communication avec le serveur.
Ce que nous devons faire est d'essayer de forcer le navigateur au quatrième état, en particulier pour JS, CSS, les images et autres modifications qui sont relativement volumineux Moins de fichiers.
3. Utiliser les composants de compression
IE et Firefox prennent tous deux en charge le clientGZIP, avant la transmission, utilisez GZIP pour le compresser puis transmettez-le au client. Une fois que le client l'a reçu, il sera décompressé par le navigateur, bien que cela occupe légèrement une partie du CPU. du serveur et du client, cela ne change pas l'utilisation de la bande passante. Pour du texte brut, le taux de compression est assez impressionnant. Si chaque utilisateur économise 50 % de bande passante, alors la bande passante louée peut servir deux fois plus de clients et raccourcir le temps de transmission des données.
4. Préchargement des images et JS
Le moyen le plus simple de précharger des images est de Instancier un nouvel objet Image() en JavaScript , puis transmettez l' URL de l'image à charger en paramètre.
function preLoadImg(url) {
var img = new Image();
img.src = url;
}Vous pouvez précharger JS et des images sur la page de connexion
5 , Placer le script en bas
Problèmes causés par le placement du script en haut,
1, Lors de l'utilisation de scripts, le rendu progressif bloquera le contenu situé en dessous du script
2, bloquera les téléchargements parallèles lors du téléchargement du script
placé en bas peut provoquer une erreur JS Lorsque le script n'est pas chargé, l'utilisateur déclenche l'événement de script.
Considérez la situation de manière globale.
6. Placez le fichier de style en haut de la page
Si la feuille de style n'est pas chargée, construire l'arbre de rendu est un gaspillage. Il peut y avoir deux situations lorsque le fichier de style est placé en bas de la page :
1. , Écran blanc
2 Flash de contenu non stylé
Utilisez des JS et des CSS
externes pour transformer les JS et CSS externes en JS externes , CSS. Réduisez les téléchargements répétés de JS et CSS en ligne.
8. Diviser les composants en plusieurs domaines
Chapitre 4 Optimisation de la base de données
AnnexeA Analyse des demandes de page
À partir de la saisie URL nécessite les 5 étapes suivantes pour s'afficher sur la page
1. Entrez l'adresse URL ou cliquez sur un lien de URL
2. Le navigateur analyse l'IPadresse URL en fonction de l'adresse URL, combinée avec le DNS 🎜>
3. Envoyer une demande HTTP
4． Commencez à vous connecter au serveur demandé et demandez le contenu associé
5． Le navigateur analyse le contenu renvoyé par le serveur et affiche la page
Ce qui précède est essentiellement le processus de base d'une page, de la demande à la mise en œuvre. ce processus.
Lorsque vous entrez URL, le navigateur connaîtra cette URL Quelle est l'IP correspondante ? Ce n'est qu'en connaissant l'adresse IP que le navigateur peut se préparer à envoyer la requête au serveur spécifié plus précisément. IP et numéro de port. L'analyseur DNS du navigateur est chargé d'analyser l'URL dans l'IP correcte. adresse. Ce processus d'analyse prend du temps et pendant cette période d'analyse, le navigateur ne peut rien télécharger depuis le serveur. Les navigateurs et les systèmes d'exploitation fournissent une prise en charge de la mise en cache de résolution DNS. Après avoir obtenu l'adresse IP, le navigateur envoie une requête HTTP au serveur. Le processus est le suivant. suit :
1． Le navigateur demande au serveur d'ouvrir une connexion 2
en envoyant un paquetTCP. Le serveur répond également au navigateur du client en envoyant un paquet indiquant au navigateur que la connexion est ouverte.
3. Le navigateur envoie une requête HTTPGET. Cette requête contient de nombreuses choses, telles que notre cookie commun et d'autres headinformations d'en-tête.
De cette façon, une demande est envoyée.
Une fois la requête envoyée, c'est l'affaire du serveur. Le programme côté serveur envoie le résultat final au client.
En fait, la première chose qui atteint le navigateur, ce sont les documents de html Les soi-disant documents de html sont purs <.>htmlLe code n'inclut aucune image, script, CSS, etc. C'est-à-dire la structure html de la page. Car ce qui est renvoyé à ce moment-là n'est que la structure html de la page. Le temps nécessaire à l'envoi de ce document html au navigateur est très court, représentant généralement environ 10% du temps de réponse total.
Après cela, le squelette de base de la page se trouve dans le navigateur. L'étape suivante est le processus d'analyse de la page par le navigateur, qui est une analyse étape par étape depuis le haut. vers le bashtml squelette.
Si la balise img est rencontrée dans le document html à ce moment, le navigateur enverra une requête HTTP à ce L'adresse URL de la réponse img permet d'obtenir l'image puis de la présenter. S'il y a beaucoup d'images dans le document html, flash, alors le navigateur les demandera une par une puis les restituera. Si chaque image doit être demandée, alors elle doit l'être. fait avant Les étapes mentionnées : analyser l'url, ouvrir la connexion tcp, etc. L'ouverture d'une connexion consomme également des ressources. Tout comme lorsque nous accédons à une base de données, nous essayons d'ouvrir le moins de connexions à la base de données possible et d'utiliser plus de connexions dans le pool de connexions. Pour la même raison, les connexions tcp peuvent également être réutilisées. http1.1 a proposé le concept de connexion persistante (connexion persistante), ce qui signifie que la même connexion HTTP peut gérer plusieurs requêtes en même temps, réduisant ainsi tcp.
Lorsque le squelette html de la page est chargé, le navigateur commence à analyser les balises de la page , de Commencez l'analyse de haut en bas.
La première est l'analyse de la balise head S'il s'avère qu'il y a un script JS à citer dans head, puis le navigateur commence à demander le script à ce moment-là, et tout le processus d'analyse de la page s'arrête jusqu'à ce que la requête JS soit terminée. Ensuite, la page est analysée vers le bas, par exemple en analysant la balise body S'il y a une balise img dans body, alors le navigateur demandera img. Les ressources correspondant à src, s'il y a plusieurs balises img, alors le navigateur les analysera une à une, et l'analyse n'attendra pas comme JS. Sera téléchargé simultanément.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!