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