Je crois qu'Internet est devenu une partie indispensable de la vie des gens. Les applications de clients riches tels que Ajax, Flex, etc. rendent les gens plus heureux de vivre de nombreuses fonctions qui ne pourraient être mises en œuvre qu'en c / s. Par exemple, Google Opportunity a déplacé toutes les applications de bureau les plus élémentaires vers Internet. Bien sûr, tout en étant pratique, il rend sans aucun doute la page de plus en plus lente. Je fais du développement frontal. En termes de performance, selon l'enquête de Yahoo, le backend ne représente que 5%, tandis que le frontal atteint 95%, dont 88% des choses peuvent être optimisées.
Ce qui précède est le diagramme du cycle de vie d'une page Web2.0. L'ingénieur dit de façon vivante qu'elle est divisée en quatre étapes: la grossesse, la naissance, l'obtention du diplôme et le mariage. Si nous pouvons réaliser ce processus au lieu d'une simple réponse de demande lorsque nous cliquons sur le lien Web, nous pouvons déterrer de nombreux détails qui peuvent améliorer les performances. Aujourd'hui, j'ai écouté une conférence sur la recherche sur les performances Web de Xiao Ma Ge sur Taobao dans l'équipe de développement de Yahoo. Je sentais que j'avais gagné beaucoup et que je voulais le partager sur le blog.
Je crois que beaucoup de gens ont entendu parler de 14 règles pour optimiser les performances du site Web. Plus d'informations peuvent être trouvées dans Developer.yahoo.com
1. Réduisez le nombre de demandes HTTP autant que possible [Contenu]
2. Utilisez CDN (Network de livraison de contenu) [Server]
3. Add expire en-tête (ou contrôle de cache) [serveur]
4. Composant GZIP [serveur]
5. Placez le style CSS au-dessus de la page [CSS]
6. Déplacez le script vers le bas (y compris en ligne) [JavaScript]
7. Évitez d'utiliser des expressions dans CSS [CSS]
8. séparer JavaScript et CSS en fichiers externes [JavaScript] [CSS]
9. Réduire les requêtes DNS [Contenu]
10. Compress JavaScript et CSS (y compris en ligne) [JavaScript] [CSS]
11. Évitez de rediriger [serveur]
12. Supprimer les scripts en double [JavaScript]
13. Configurer les balises d'entité (ETAGS) [CSS]
14. Cache ajax
Il y a un plug-in Yslow sous Firefox, qui est intégré à Firebug. Vous pouvez l'utiliser pour voir facilement comment votre site Web fonctionne dans ces aspects.
Ceci est le résultat de l'utilisation de Yslow pour évaluer mon site Web Xifengfang. Malheureusement, il n'a que 51 points. hehe. Les scores des principaux sites Web en Chine ne sont pas élevés. Je viens de le tester et Sina et NetEase étaient de 31 points. Ensuite, le score de Yahoo (États-Unis) est en effet de 97 points! On peut voir que Yahoo a fait des efforts à cet égard. À en juger par les 14 règles qu'ils ont résumées, il y a de nombreux détails qui nous ont été ajoutés maintenant, et certaines pratiques sont même un peu perverties.
Article 1: Minimisez le nombre de demandes HTTP autant que possible (faire moins de demandes HTTP)
Les demandes HTTP sont des frais généraux, et trouver des moyens de réduire le nombre de demandes peut naturellement augmenter la vitesse de la page Web. Les méthodes courantes fusionnent respectivement CSS, JS (fusion des fichiers CSS et JS dans une page), et des cartes d'image et des sprites CSS, etc. Bien sûr, peut-être que les fichiers CSS et JS sont dus à des considérations en termes de structure CSS, de partage, etc. Le site Web d'alibaba était de se développer séparément pendant le développement, puis de Merge JS et CSS dans le contexte. Il s'agissait toujours d'une demande pour le navigateur, mais il pouvait toujours être restauré à plusieurs pendant le développement, ce qui était pratique pour la gestion et les références répétées. Yahoo recommande même d'écrire la page d'accueil CSS et JS directement dans le fichier de page au lieu de références externes. Parce que la page d'accueil a trop de visites, cela peut réduire le nombre de deux demandes. En fait, de nombreux portails nationaux le font.
CSS Sprites fait référence à la combinaison de l'image d'arrière-plan sur la page en une seule, puis à l'utilisation de la valeur qui ne peut pas être définie par l'attribut de position d'arrière-plan de CSS pour obtenir son arrière-plan. Les sites Web chinois de Taobao et Alibaba le font actuellement. Si vous êtes intéressé, vous pouvez jeter un œil aux photos d'arrière-plan de Taobao et Alibaba.
http://www.cssssprites.com/ Il s'agit d'un site Web d'outils qui peut automatiquement fusionner les images que vous téléchargez et donner les coordonnées de position d'arrière-plan correspondantes. Et sortir les résultats dans les formats PNG et GIF.
Article 2: Utilisez un réseau de livraison de contenu
Pour être honnête, je ne sais pas grand-chose sur CDN. Autrement dit, en ajoutant une nouvelle architecture réseau à Internet existant, en publiant le contenu du site Web au serveur de cache le plus proche de l'utilisateur. Grâce à la technologie d'équilibrage de charge DNS, il est jugé que la source de l'utilisateur accéde au serveur de cache à proximité pour obtenir le contenu requis. Les utilisateurs de Hangzhou accèdent au contenu du serveur près de Hangzhou, et ceux de Pékin accèdent au contenu du serveur près de Pékin. Cela peut réduire efficacement le temps de transmission des données sur le réseau et améliorer la vitesse. Pour un contenu plus détaillé, vous pouvez vous référer à l'explication de CDN sur Baidu Encyclopedia. Yahoo! La distribution du contenu statique à CDN réduit le temps d'impact de l'utilisateur de 20% ou plus.
Diagramme de technologie CDN:
Diagramme de réseautage CDN:
Article 3: Ajouter un en-tête Expire / Cache-Control: Ajouter un en-tête expiré
Maintenant, de plus en plus d'images, de scripts, de CSS et de flash sont intégrés dans la page, et lorsque nous y accéderons, nous ferons inévitablement de nombreuses demandes HTTP. En fait, nous pouvons mettre ces fichiers en cache en paramètres Expires En-tête. Expire spécifie en fait le temps de cache d'un type de fichier spécifique dans le navigateur via le message d'en-tête. La plupart des images n'ont pas besoin d'être modifiées fréquemment après avoir été publiée. Après avoir été mis en cache, le navigateur n'aura plus besoin de télécharger ces fichiers à partir du serveur et de les lire directement à partir du cache. Cela accélérera considérablement l'accès à la page à nouveau. Un protocole HTTP 1.1 typique renvoie les informations d'en-tête:
Http / 1.1 200 ok
Date: ven, 30 octobre 1998 13:19:41 GMT
Serveur: Apache / 1.3.3 (UNIX)
Cache-Control: Max-Age = 3600, MUST-REVALIDAD
Expire: ven, 30 octobre 1998 14:19:41 GMT
Dernière modifié: lun, 29 juin 1998 02:28:12 GMT
ETAG: 3E86-410-3596FBBC
Longueur du contenu: 1040
Type de contenu: texte / html
Il peut être fait en définissant le contrôle de cache et expirait via des scripts côté serveur.
Par exemple, si elle est définie en PHP, expire après 30 jours:
<! - Pheader (Cache-Control: Must-Revalidate); $ offset = 60 * 60 * 24 * 30; $ expstr = expire :. gmdate (d, d myh: i: s, time () + $ offset). GMT; En-tête ($ expstr); -> peut également être fait en configurant le serveur lui-même, donc ceux-ci ne sont pas très clairs, haha. Si vous voulez en savoir plus, veuillez vous référer à http://www.web-caching.com/
Pour autant que je sache, le temps d'expiration expiré du site Web chinois d'Alibaba est de 30 jours. Cependant, il y a eu des problèmes au cours de cette période, en particulier lors de la définition du temps d'expiration du script, vous devez le considérer attentivement, sinon il peut prendre beaucoup de temps au client pour percevoir ces modifications après la mise à jour de la fonction de script correspondante. J'ai rencontré ce problème lorsque je travaillais sur le [Projet de suggestions] auparavant. Par conséquent, nous devons soigneusement considérer lesquels doivent être mis en cache et lesquels ne doivent pas être mis en cache.
Article 4: Activer la compression GZIP: composants GZIP
L'idée de GZIP est d'abord de compresser les fichiers du serveur, puis de les transférer. Cela peut réduire considérablement la taille des transferts de fichiers. Une fois la transmission terminée, le navigateur redécompressera le contenu compressé et l'exécutera. Les navigateurs actuels peuvent bien prendre en charge GZIP. Non seulement le navigateur peut le reconnaître, mais aussi les grands robots peuvent également le reconnaître. Tous les SEO peuvent être assurés. De plus, le rapport de compression de GZIP est très important, généralement le rapport de compression est de 85%, ce qui signifie que la page 100K sur le serveur peut être compressée à environ 25K avant d'être envoyée au client. Pour des principes de compression GZIP spécifiques, vous pouvez vous référer à l'article "algorithme de compression GZIP" sur CSDN. Yahoo souligne particulièrement que tout le contenu du texte doit être compressé par GZIP: HTML (PHP), JS, CSS, XML, TXT ... Notre site Web fait du bon travail à cet égard, c'est un A. Dans le passé, notre page d'accueil n'était pas un, car il y avait beaucoup de JS sur la page d'accueil avec des codes publicitaires. Les JS des sites Web de ces propriétaires de code publicitaires n'étaient pas compressés par GZIP, qui entraînerait également notre site Web.
La plupart des trois points ci-dessus sont du contenu côté serveur, et je n'en ai qu'une brève compréhension. Ce qui ne va pas, c'est être corrigé.
Article 5: Mettez les feuilles de style en haut
Mettez CSS sur la page, pourquoi est-ce? Parce que les navigateurs tels que IE, Firefox ne rendra rien tant que tout CSS sera complètement transmis. La raison est aussi simple que Brother Ma a dit. CSS, nom complet: feuilles de style en cascade. La cascade signifie que le CSS derrière peut couvrir le CSS précédent, et le CSS avec des niveaux élevés peut couvrir le CSS avec de faibles niveaux. Dans [CSS! IMPORTANT] Cette relation de hiérarchie a été mentionnée au bas de cet article, et ici, nous avons seulement besoin de savoir que le CSS peut être écrasé. Étant donné que le précédent peut être écrasé, il est sans aucun doute raisonnable que le navigateur soit rendu après son chargement complètement. Dans de nombreux navigateurs, tels que IE, le problème de mettre la feuille de style en bas de la page est qu'il interdit l'ordre d'affichage du contenu de la page Web. Si le navigateur bloque l'affichage pour éviter de repeindre les éléments de la page, l'utilisateur ne peut voir que des pages vierges. Firefox ne bloque pas l'affichage, mais cela signifie que lorsque la feuille de style est téléchargée, certains éléments de page peuvent devoir être repeints, ce qui provoque des problèmes scintillants. Nous devons donc faire charger le CSS dès que possible
Suivant ce sens, si nous le regardons attentivement, il y a en fait certains domaines qui peuvent être optimisés. Par exemple, les deux fichiers CSS contenus sur ce site sont <link rel = Stylesheet rev = Stylesheet href = http: //www.space007.com/themes/google/style/google.css type = text / css media = screen /> et <lin href = http: //www.space007.com/css/print.css type = text / css media = print />. À partir des médias, nous pouvons voir que le premier CSS est pour le navigateur, et le deuxième fichier CSS est pour le style d'impression. À partir des habitudes comportementales de l'utilisateur, l'action pour imprimer la page doit se produire après s'afficher la page. Par conséquent, une meilleure méthode devrait être d'ajouter dynamiquement CSS à la page une fois la page chargée, afin qu'elle puisse améliorer la vitesse. (Ha ha)
Article 6: Mettez les scripts en bas
Il y a deux objectifs pour placer des scripts en bas de la page: 1. Parce que l'exécution des scripts de script empêche le blocage du téléchargement de la page. Pendant le processus de chargement de la page, lorsque le navigateur lit l'instruction JS Exécution, il expliquera certainement tout et lira le contenu suivant ensuite. Si vous ne le croyez pas, vous pouvez écrire une boucle JS pour voir si les choses sous la page seront toujours en train de sortir. (L'exécution de setTimeout et SetInterval est un peu similaire au multithreading, et le rendu de contenu suivant se poursuivra avant le temps de réponse correspondant.) La logique derrière le navigateur est que JS peut exécuter l'emplacement. Par conséquent, le mettre à la fin de la page peut réduire efficacement le temps de chargement des éléments visuels de la page. 2. Le deuxième problème causé par le script est qu'il bloque le nombre de téléchargements parallèles. La spécification HTTP / 1.1 recommande que le nombre de téléchargements parallèles pour chaque hôte du navigateur ne dépasse pas 2 (IE ne peut être que 2, et d'autres navigateurs tels que FF sont définis sur 2 par défaut, mais le nouveau IE8 peut atteindre 6). Donc, si vous distribuez des fichiers image à plusieurs machines, vous pouvez obtenir plus de 2 téléchargements parallèles. Cependant, lorsque le fichier de script est téléchargé, le navigateur ne commencera pas d'autres téléchargements parallèles.
Bien sûr, pour chaque site Web, la faisabilité de mettre tous les scripts en bas de la page est toujours discutable. Par exemple, la page du site Web d'Alibaba chinois. Il y a des JS en ligne dans de nombreux endroits, et l'affichage des pages en dépend fortement. J'avoue que c'est loin du concept de scripts non invasifs, mais de nombreux problèmes historiques ne sont pas si faciles à résoudre.
Article 7: Évitez d'utiliser des expressions dans CSS (éviter les expressions CSS)
Cependant, il y aura deux couches de nidification sans signification, ce qui n'est certainement pas bon. Une meilleure solution est nécessaire.
Article 8: Mettez à la fois JavaScript et CSS dans des fichiers externes (rendre JavaScript et CSS externe)
Je pense que c'est toujours facile à comprendre. Cela ne se fait pas seulement du point de vue de l'optimisation des performances, mais aussi du point de vue de la maintenance facile du code. La rédaction de CSS et JS sur le contenu de la page peut réduire 2 demandes, mais également augmenter la taille de la page. Si vous avez mis en cache CSS et JS, il n'y aura pas de demandes HTTP supplémentaires deux fois. Bien sûr, j'ai également dit auparavant que certains développeurs de pages spéciaux choisiraient toujours des fichiers CSS et JS en ligne.
Article 9: Réduisez les recherches DNS
Il existe une correspondance individuelle entre le nom de domaine et l'adresse IP sur Internet. Le nom de domaine (kuqin.com) est facile à retenir, mais l'ordinateur ne le reconnaît pas. La reconnaissance entre les ordinateurs doit être convertie en une adresse IP. Chaque ordinateur du réseau a une adresse IP indépendante. Le travail de conversion entre un nom de domaine et une adresse IP est appelé résolution de nom de domaine, également connu sous le nom de requête DNS. Un processus de résolution DNS prendra 20 à 120 millisecondes, et le navigateur ne téléchargera rien sous le nom de domaine tant que la requête DNS ne sera pas terminée. Par conséquent, la réduction du temps de requête DNS peut accélérer la vitesse de chargement de la page. Yahoo recommande que le nombre de noms de domaine contenus dans une page soit contrôlé à 2-4 autant que possible. Cela nécessite un bon plan pour la page globale. Nous ne nous débrouillons pas bien pour le moment, et de nombreux systèmes de publicité qui gèrent les points nous ont entraînés.
Article 10: Compress JavaScript et CSS (Minify JavaScript)
Il est évident de comprimer la gauche et la droite de JS et CSS, réduisant le nombre d'octets de page. La vitesse de chargement de la page est naturellement plus rapide si elle a une petite capacité. En plus de réduire le volume, la compression peut également fournir une certaine protection. Nous avons fait du bon travail dans ce domaine. Les outils de compression courants incluent JSMIN, le compresseur YUI, etc. En outre, comme http://dean.edwards.name/packer/, nous nous fournissons également un outil de compression en ligne très pratique. Vous pouvez voir la différence de capacité entre les fichiers JS compressés et les fichiers JS non compressés sur la page Web JQuery:
Bien sûr, un inconvénient de la compression est que la lisibilité du code a disparu. Je crois que de nombreux amis frontaux ont rencontré ce problème: l'effet de regarder Google est très cool, mais lorsque vous regardez son code source, il y a beaucoup de personnages figés ensemble, et même les noms de fonction ont été remplacés. Je suis tellement en sueur! N'est-il pas très gênant pour la maintenance si votre propre code est le même? La pratique actuelle de tous les sites Web chinois Alibaba est de le compresser du côté du serveur lorsque JS et CSS sont libérés. De cette façon, nous pouvons facilement maintenir notre propre code.
Article 11: Évitez les redirectes
Il n'y a pas longtemps, j'ai vu l'article "Internet explorateur et limites de connexion" sur IEBlog. Par exemple, lorsque vous entrez http://www.kuqin.com/, le serveur générera automatiquement un serveur 301 et se tournera vers http://www.kuqin.com/. Vous pouvez le voir en regardant la barre d'adresse du navigateur. Ce type de redirection prend naturellement du temps. Bien sûr, ce n'est qu'un exemple. Il existe de nombreuses raisons de redirection, mais la chose immuable est que chaque fois que la redirection est ajoutée, une demande Web sera ajoutée, donc elle devrait être minimisée.
Article 12: Supprimer les scripts en double
Je ne veux pas dire cela, mais c'est aussi vrai du point de vue des performances, mais aussi du point de vue des spécifications de code. Mais je dois admettre que plusieurs fois, nous ajouterons un code peut-être en double parce que le graphique est rapide. Peut-être qu'un cadre CSS unifié et un cadre JS peuvent mieux résoudre nos problèmes. Le point de vue de Xiaozhu est juste, non seulement pour être non répété, mais aussi pour être réutilisable.
Article 13: Configurer les balises d'entité (ETAGS) (Configurer les ETAG)
Je ne comprends pas non plus cela, haha. J'ai trouvé une explication détaillée sur INFORQ "en utilisant ETAGS pour réduire la bande passante et le chargement des applications Web". Les étudiants intéressés peuvent aller jeter un œil.
Article 14: Rendre Ajax Cacheable
L'Ajax doit encore être mis en cache? Lorsque vous faites des demandes Ajax, vous devez souvent ajouter un horodatage pour éviter le cache. Il est important de se rappeler que l'asynchrone n'implique pas instantanément. N'oubliez pas, même si l'Ajax est généré dynamiquement et ne fonctionne que pour un seul utilisateur, ils peuvent toujours être mis en cache.