Comment optimiser les performances des pages Web
Le front-end est énorme, comprenant HTML, CSS, Javascript, Image, Flash et d'autres ressources diverses. L'optimisation frontale est complexe et il existe différentes méthodes pour tous les aspects des ressources. Alors, à quoi sert l’optimisation front-end ?
1. Du point de vue de l'utilisateur, l'optimisation peut accélérer le chargement des pages, répondre plus rapidement aux opérations de l'utilisateur et offrir aux utilisateurs une expérience plus conviviale.
2. Du point de vue du fournisseur de services, l'optimisation peut réduire le nombre de requêtes de pages ou réduire la bande passante occupée par les requêtes, ce qui peut économiser des ressources considérables.
En bref, une bonne optimisation peut non seulement améliorer l'expérience utilisateur du site, mais également économiser une utilisation considérable des ressources.
Il existe de nombreuses façons d'optimiser le front-end, qui peuvent être grossièrement divisées en deux catégories selon la granularité. La première catégorie est l'optimisation au niveau de la page, comme le nombre de requêtes HTTP, le chargement non bloquant des scripts. , optimisation de la position des scripts en ligne, etc. ; la deuxième catégorie Il s'agit de l'optimisation au niveau du code, telle que l'optimisation des opérations DOM en Javascript, l'optimisation du sélecteur CSS, l'optimisation des images, l'optimisation de la structure HTML, etc. De plus, dans le but d'améliorer le rapport entrées-sorties, les différentes stratégies d'optimisation mentionnées plus loin sont grossièrement classées par ordre croissant de rapport entrées-sorties.
1. Optimisation au niveau de la page
1. Réduire le nombre de requêtes HTTP
Cette stratégie est fondamentalement connue de toutes les personnes front-end, et c'est aussi la plus importante et la plus efficace. On dit qu’il faut réduire les requêtes HTTP, mais que se passera-t-il s’il y a trop de requêtes ? Tout d’abord, chaque requête a un coût, incluant à la fois un coût en temps et un coût en ressources ? Une requête complète nécessite un processus « long » et compliqué d'adressage DNS, d'établissement d'une connexion avec le serveur, d'envoi de données, d'attente de réponse du serveur et de réception de données. Le coût en temps est que l'utilisateur doit attendre la fin du processus pour voir ou « sentir » la ressource. Puisque chaque requête sur la ressource doit transporter des données, chaque requête nécessite de la bande passante. De plus, comme il existe une limite supérieure au nombre de requêtes simultanées que le navigateur peut effectuer (voir ici pour plus de détails), lorsque le nombre de requêtes augmente, le navigateur doit effectuer des requêtes par lots, ce qui augmentera le temps d'attente de l'utilisateur. et causer des problèmes au site Web de l'utilisateur. L'impression de vitesse lente est que même si toutes les ressources du premier écran que l'utilisateur peut voir ont été demandées, la barre de progression du navigateur existera toujours.
Les principaux moyens de réduire le nombre de requêtes HTTP sont les suivants :
(1) Simplifiez la page dès le niveau de la conception et de la mise en œuvre.
Si votre page est aussi simple que la page d'accueil de Baidu, alors les règles suivantes sont essentiellement les suivantes. inutile. Il est plus simple de garder la page simple et de réduire l’utilisation des ressources. Si ce n’est pas le cas et que votre page a besoin d’un superbe skin, continuez à lire ci-dessous.
(2). Définir correctement le cache HTTP
La puissance du cache est puissante et des paramètres de cache appropriés peuvent réduire considérablement les requêtes HTTP. En prenant la page d'accueil de Youa comme exemple, lorsque le navigateur ne la met pas en cache, un total de 78 requêtes seront émises, avec un total de plus de 600 000 données (comme le montre la figure 1.1. Cependant, lorsque la deuxième visite a lieu après le navigateur). l'a mis en cache, il n'y aura que 10 requêtes, avec un total de plus de 20 000 données (Figure 1.2). (Il est à noter ici que si vous actualisez directement la page avec F5, l'effet sera différent. Dans ce cas, le nombre de requêtes est toujours le même, mais le serveur de requêtes pour la ressource mise en cache est une réponse 304. Seule la L'en-tête n'a pas de corps, ce qui peut économiser de la bande passante)
Qu'est-ce qu'un paramètre raisonnable ? Le principe est très simple. Plus vous pouvez mettre en cache, mieux c'est, et plus vous pouvez mettre en cache longtemps, mieux c'est. Par exemple, les ressources d'image qui changent rarement peuvent définir directement un en-tête d'expiration long via Expires dans l'en-tête HTTP. Les ressources qui changent rarement mais peuvent changer peuvent utiliser Last-Modifed pour la vérification de la demande ; Conservez les ressources dans le cache le plus longtemps possible. Les paramètres et principes spécifiques de la mise en cache HTTP ne seront pas décrits en détail ici. Ceux qui sont intéressés peuvent se référer aux articles suivants :
Description des stratégies de mise en cache dans le protocole HTTP1.1
Fiddler HTTP. Performances Introduction à la mise en cache dans
(3). Fusion et compression des ressources
Si possible, fusionnez autant que possible les scripts et les styles externes et fusionnez-en plusieurs en un seul. De plus, CSS, Javascript et Image peuvent tous être compressés à l'aide des outils correspondants. Après la compression, beaucoup d'espace peut souvent être économisé.
(4). CSS Sprites
La fusion d'images CSS est un autre bon moyen de réduire le nombre de requêtes.
(5). Images en ligne
Utiliser les données :
Le schéma d'URL est utilisé pour intégrer des images dans des pages ou CSS. C'est une bonne méthode si les problèmes de gestion des ressources ne sont pas pris en compte. S'il est intégré à la page, la taille de la page sera augmentée et le cache du navigateur ne pourra pas être utilisé. Les images utilisées en CSS sont plus idéales.
(6). Lazy Load Images (je ne comprends toujours pas le contenu de cette section)
Cette stratégie ne réduit peut-être pas réellement le nombre de requêtes HTTP, mais elle peut réduire le nombre de requêtes HTTP dans certaines conditions ou lorsque la page vient d'être chargée. Pour les images, vous pouvez charger uniquement le premier écran lorsque la page vient d'être chargée, et charger uniquement les images suivantes lorsque l'utilisateur continue de faire défiler vers l'arrière. De cette manière, si l'utilisateur n'est intéressé que par le contenu du premier écran, les demandes d'images restantes seront enregistrées.
Oui Page d'accueil
L'approche précédente consistait à mettre en cache les adresses d'image après le premier écran dans la balise Textarea lors du chargement, puis à les charger « paresseusement » lorsque l'utilisateur faisait défiler vers le bas.
2. Placez le script externe en bas (chargez le contenu du script une fois les informations de la page chargées)
Comme mentionné précédemment, le navigateur peut demander simultanément, ce qui accélère le chargement des ressources, cependant, externes les scripts de lien bloqueront d'autres ressources lors du chargement. Par exemple, avant le chargement du script, les images, styles et autres scripts derrière celui-ci sont bloqués et ne commenceront à se charger que lorsque le script sera chargé. Si le script est placé dans une position relativement élevée, cela affectera la vitesse de chargement de la page entière et affectera ainsi l'expérience utilisateur. Il existe de nombreuses façons de résoudre ce problème, notamment
Voici une introduction plus détaillée
(Voici la traduction et
Exemples plus détaillés
), et la méthode la plus simple et la plus fiable consiste à déplacer le script aussi loin que possible pour réduire l'impact sur les téléchargements simultanés.
3. Exécutez les scripts en ligne de manière asynchrone (en fait, le principe est le même que ci-dessus, garantissant que le script est chargé après le contenu de la page.)
L'impact des scripts en ligne sur les performances est encore pire que celui des scripts externes. scripts. La page d'accueil, comme les scripts externes, les scripts en ligne bloqueront également les requêtes simultanées lors de leur exécution. De plus, étant donné que le navigateur est monothread dans le traitement des pages, lorsque le script en ligne est exécuté avant le rendu de la page, le travail de rendu de la page sera reporté. . Bref, lorsque le script en ligne est exécuté, la page est vierge. Compte tenu des deux raisons ci-dessus, il est recommandé d'exécuter des scripts en ligne qui prennent beaucoup de temps à s'exécuter de manière asynchrone, telles que l'utilisation de l'attribut defer de l'élément de script (il existe des problèmes de compatibilité et d'autres problèmes, tels que). car document.write ne peut pas être utilisé), utilisez setTimeout
, en outre, introduit dans HTML5
Le mécanisme des Web Workers peut exactement résoudre ce genre de problème.
4. Lazy Load Javascript (Chargé uniquement lorsque cela est nécessaire, le contenu des informations n'est pas chargé dans des circonstances normales.)
Avec la popularité des frameworks Javascript, de plus en plus de sites l'utilisent. Cependant, un framework comprend souvent de nombreuses implémentations fonctionnelles. Ces fonctions ne sont pas requises par chaque page. Si vous téléchargez des scripts inutiles, c'est un gaspillage de ressources : cela gaspille à la fois de la bande passante et du temps d'exécution. Il existe actuellement deux approches. L'une consiste à personnaliser une mini version dédiée du framework pour les pages à trafic particulièrement élevé, et l'autre est Lazy Load. YUI utilise la deuxième méthode dans l'implémentation de YUI, seul le module principal est chargé initialement et les autres modules peuvent attendre jusqu'à ce qu'ils soient nécessaires.
5. Placez le CSS dans HEAD
Si vous placez le CSS à d'autres endroits tels que BODY, le navigateur peut commencer à restituer la page avant de télécharger et d'analyser le CSS, ce qui entraîne La page saute du CSS- moins d’état à l’état CSS, ce qui entraîne une mauvaise expérience utilisateur. De plus, certains navigateurs ne commenceront à rendre la page qu'après le téléchargement du CSS. Si le CSS est placé à une position inférieure, le navigateur retardera le temps de rendu.
6. Rappel de demande asynchrone (c'est-à-dire extraire certains styles de comportement et charger lentement le contenu des informations)
Dans certaines pages, il peut y avoir une telle exigence que vous deviez utiliser des balises de script pour demander des données de manière asynchrone. Similaire :
Javascript :
/*Fonction de rappel*/
fonction myCallback(info){
//faire quelque chose ici
}
HTML :
Contenu renvoyé par cb :
myCallback('Hello world!');
Écrire
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Inversion des valeurs clés du tableau PHP : analyse comparative des performances de différentes méthodes
May 03, 2024 pm 09:03 PM
La comparaison des performances des méthodes de retournement des valeurs de clé de tableau PHP montre que la fonction array_flip() fonctionne mieux que la boucle for dans les grands tableaux (plus d'un million d'éléments) et prend moins de temps. La méthode de la boucle for consistant à retourner manuellement les valeurs clés prend un temps relativement long.
Comparaison des performances de différents frameworks Java
Jun 05, 2024 pm 07:14 PM
Comparaison des performances de différents frameworks Java : Traitement des requêtes API REST : Vert.x est le meilleur, avec un taux de requêtes de 2 fois SpringBoot et 3 fois Dropwizard. Requête de base de données : HibernateORM de SpringBoot est meilleur que l'ORM de Vert.x et Dropwizard. Opérations de mise en cache : le client Hazelcast de Vert.x est supérieur aux mécanismes de mise en cache de SpringBoot et Dropwizard. Cadre approprié : choisissez en fonction des exigences de l'application. Vert.x convient aux services Web hautes performances, SpringBoot convient aux applications gourmandes en données et Dropwizard convient à l'architecture de microservices.
Optimisation des programmes C++ : techniques de réduction de la complexité temporelle
Jun 01, 2024 am 11:19 AM
La complexité temporelle mesure le temps d'exécution d'un algorithme par rapport à la taille de l'entrée. Les conseils pour réduire la complexité temporelle des programmes C++ incluent : le choix des conteneurs appropriés (tels que vecteur, liste) pour optimiser le stockage et la gestion des données. Utilisez des algorithmes efficaces tels que le tri rapide pour réduire le temps de calcul. Éliminez les opérations multiples pour réduire le double comptage. Utilisez des branches conditionnelles pour éviter les calculs inutiles. Optimisez la recherche linéaire en utilisant des algorithmes plus rapides tels que la recherche binaire.
Comment optimiser les performances des programmes multi-thread en C++ ?
Jun 05, 2024 pm 02:04 PM
Les techniques efficaces pour optimiser les performances multithread C++ incluent la limitation du nombre de threads pour éviter les conflits de ressources. Utilisez des verrous mutex légers pour réduire les conflits. Optimisez la portée du verrou et minimisez le temps d’attente. Utilisez des structures de données sans verrouillage pour améliorer la simultanéité. Évitez les attentes occupées et informez les threads de la disponibilité des ressources via des événements.
Comment utiliser des benchmarks pour évaluer les performances des fonctions Java ?
Apr 19, 2024 pm 10:18 PM
Un moyen de comparer les performances des fonctions Java consiste à utiliser Java Microbenchmark Suite (JMH). Les étapes spécifiques incluent : Ajout de dépendances JMH au projet. Créez une nouvelle classe Java et annotez-la avec @State pour représenter la méthode de référence. Écrivez la méthode de benchmark dans la classe et annotez-la avec @Benchmark. Exécutez le test de performance à l'aide de l'outil de ligne de commande JMH.
Quel est l'impact sur les performances de la conversion de tableaux PHP en objets ?
Apr 30, 2024 am 08:39 AM
En PHP, la conversion de tableaux en objets aura un impact sur les performances, principalement affecté par des facteurs tels que la taille du tableau, la complexité, la classe d'objet, etc. Pour optimiser les performances, envisagez d'utiliser des itérateurs personnalisés, en évitant les conversions inutiles, les tableaux de conversion par lots et d'autres techniques.
Comparaison des performances du C++ avec d'autres langages
Jun 01, 2024 pm 10:04 PM
Lors du développement d'applications hautes performances, le C++ surpasse les autres langages, notamment dans les micro-benchmarks. Dans les benchmarks macro, les mécanismes de commodité et d'optimisation d'autres langages tels que Java et C# peuvent mieux fonctionner. Dans des cas pratiques, C++ fonctionne bien dans le traitement d'images, les calculs numériques et le développement de jeux, et son contrôle direct de la gestion de la mémoire et de l'accès au matériel apporte des avantages évidents en termes de performances.
Comparaison des performances des frameworks Java
Jun 04, 2024 pm 03:56 PM
Selon les benchmarks, pour les petites applications hautes performances, Quarkus (démarrage rapide, mémoire faible) ou Micronaut (TechEmpower excellent) sont des choix idéaux. SpringBoot convient aux grandes applications full-stack, mais a des temps de démarrage et une utilisation de la mémoire légèrement plus lents.
