Maison > interface Web > Questions et réponses frontales > Quelles sont les méthodes d'optimisation des performances front-end ?

Quelles sont les méthodes d'optimisation des performances front-end ?

coldplay.xixi
Libérer: 2020-11-13 14:29:08
original
33833 Les gens l'ont consulté

Méthodes d'optimisation des performances frontales : 1. Réduire le nombre de requêtes http ; 2. Optimiser les images ; 3. Utiliser CDN ; 4. Activer GZIP ; 5. Optimiser les feuilles de style et les fichiers JS ; noms de domaine sans cookies ; 7. Optimisation de la structure du code front-end.

Quelles sont les méthodes d'optimisation des performances front-end ?

Méthode d'optimisation des performances front-end :

1. >

Les méthodes couramment utilisées pour réduire le nombre de requêtes http sont les suivantes :

1) Fusionner les images. Lorsqu'il y a plusieurs images, elles peuvent être fusionnées en une seule grande image pour réduire le nombre de requêtes http. Les images qui changent fréquemment peuvent ne pas convenir. Les images qui changent de manière relativement constante peuvent être prises en compte. En plus de réduire le nombre de requêtes http, la fusion d'images volumineuses peut également utiliser pleinement le cache pour améliorer les performances.

2) Fusionner et compresser les feuilles de style CSS et les scripts js Leur objectif commun est de réduire le nombre de connexions http.

3) Supprimez les demandes inutiles. Développez des connexions de requêtes non valides restant après l’écriture du code ou la mise à niveau du système.

4) Exploitez pleinement le cache. Le cache mentionné ici est le cache côté client ou le cache du navigateur. Les informations d'en-tête Expires constituent une base importante pour la mise en cache côté client. Le format est similaire à Expires:sun, 20 Dec 2017 23:00:00 GMT. Si l'heure actuelle est inférieure à l'heure spécifiée par Expires, le navigateur obtiendra directement les informations de données pertinentes ou le fichier HTML du cache. Si l'heure actuelle est supérieure à l'heure spécifiée par Expires, le navigateur enverra une demande au. serveur pour obtenir les informations de données pertinentes.

En prenant Apache comme exemple, Expires peut être défini dans le fichier de configuration d'Apache httpd.conf.

2. Optimisation des images

Méthode d'optimisation :

1) Utiliser autant que possible des images au format PNG, qui sont de taille relativement petite.

2) Pour les images de formats différents, il est préférable d'effectuer certaines optimisations avant de les mettre en ligne.

3) Chargement différé des images, également appelé chargement différé.

3. Utiliser CDN

CDN est un réseau de distribution de contenu, qui permet aux utilisateurs d'obtenir le contenu dont ils ont besoin à proximité, résout la congestion du réseau et améliore la vitesse de réponse de utilisateurs accédant à des sites Web.

4. Activez GZIP

GZIP est une compression de données, qui est utilisée pour compresser toutes les ressources texte transmises sur Internet. La méthode pour activer GZIP est très simple, il suffit d'accéder au fichier de configuration du service Web correspondant et de le définir. En prenant Apache comme exemple, ajoutez-le au fichier de configuration httpd.conf.

5. Optimisation des feuilles de style et des fichiers JS

Généralement nous mettrons le fichier feuille de style css en tête du fichier. Par exemple, placez-le dans la balise , afin que la feuille de style CSS puisse être téléchargée au plus vite. Correspondant au fichier script js, généralement on le met en fin de page.

6. Utilisez des noms de domaine sans cookies

Le concept des noms de domaine sans cookies : Lors de l'envoi d'une demande, vous devez également demander une image statique et envoyer un cookie. Le serveur n'utilisera pas ces cookies, ce qui signifie que ces cookies ne sont d'aucune utilité et ne doivent pas être envoyés avec la demande.

7. Optimisation de la structure du code front-end

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal