Une introduction détaillée aux réglementations militaires de Yahoo

yahooLes réglementations militaires sont divisées en 7 catégories au total 35 articles :

1.Minimiser le nombre de HTTPrequêtes

Catégorie : Contenu

80 % du temps de réponse de l'utilisateur final est consacré au front end, parmi lesquels la plupart du temps est consacré au téléchargement de divers composants sur la page : images, feuilles de style, scripts, Flash, etc. Réduire le nombre de composants réduira inévitablement le nombre de requêtes HTTP soumises par la page. C’est la clé pour rendre votre page plus rapide.

Une façon de réduire le nombre de composants de page consiste à simplifier la conception de la page. Mais existe-t-il un moyen de créer des pages complexes tout en accélérant les temps de réponse ? Eh bien, il existe effectivement un moyen d’avoir le gâteau et de le manger aussi.

Fusionnez les fichiers pour réduire le nombre de requêtes en mettant tous les scripts dans un seul fichier. Bien sûr, vous pouvez également fusionner tous les CSS. La fusion de fichiers peut être une tâche fastidieuse si les scripts et les styles de chaque page sont différents, mais le faire dans le cadre du processus de publication du site peut en effet améliorer les temps de réponse.

Les Sprites CSS sont le moyen privilégié pour réduire le nombre de demandes d'images. Intégrez toutes les images d'arrière-plan dans une seule image, puis utilisez CSS background-image et background - attribut position pour positionner la pièce à afficher.

Mappage d'images Peut fusionner plusieurs images en une seule image, la taille totale est la même, mais le nombre de requêtes est réduit et accéléré La page se charge. Les cartes d'images ne sont utiles que si l'image est continue sur la page, comme une barre de navigation. Le processus de définition des coordonnées de la carte image est ennuyeux et sujet aux erreurs. Il n'est pas non plus facile d'utiliser la carte image pour la navigation, cette méthode n'est donc pas facile. recommandé.

Les images en ligne (Base64codées) utilisent le mode données : URL pour convertir les images Page d'intégration. Cela augmentera la taille du fichier HTML Mettre des images en ligne dans la feuille de style (en cache) est une bonne idée et évite avec succès que la page ne devienne "lourde". Cependant, les navigateurs grand public actuels ne prennent pas bien en charge les images en ligne.

Réduire le nombre de requêtes HTTP pour une page est un point de départ. Il s'agit d'un principe directeur important pour améliorer la vitesse de première visite. du site. Tout comme ce que Tenni Theurer a écrit sur son blog Utilisation du cache du navigateur – Exposée ! > De , 40 % à 60% ont un cache vide lorsqu'ils visitent votre site. Par conséquent, accélérer la première visite de la page est extrêmement important pour améliorer l’expérience utilisateur.

2.

Utiliser CDN(Réseau de diffusion de contenu )

Catégorie

 : Serveur

Utilisateur La distance physique avec le serveur a également un impact sur les temps de réponse. Le déploiement de contenu sur plusieurs serveurs géographiquement dispersés permet aux utilisateurs de charger les pages plus rapidement. Mais comment faire ?

La première étape pour obtenir un contenu distribué géographiquement est la suivante : n'essayez pas de repenser votre application web pour s'adapter à une structure distribuée. Selon l'application, la modification de la structure peut impliquer des tâches ardues telles que la synchronisation de l'état de la session et la réplication des transactions de base de données sur les serveurs (les traductions peuvent ne pas être exactes). Les propositions visant à réduire la distance entre les utilisateurs et le contenu peuvent être retardées ou tout simplement impossibles à adopter en raison de cette difficulté.

N'oubliez pas que l'utilisateur final passe 80 % à 90 % temps de réponse sur le télécharger les composants de la page : images, styles, scripts, Flash, etc. C'est la règle d'or de la performance. Il est préférable de disperser d'abord le contenu statique plutôt que de repenser la structure de l'application depuis le début. Cela réduit non seulement considérablement le temps de réponse, mais facilite également l'affichage du crédit de CDN.

Le réseau de diffusion de contenu (CDN) est un groupe de webLe serveur est utilisé pour envoyer du contenu aux utilisateurs plus efficacement. Généralement, le serveur choisi pour diffuser le contenu est basé sur une mesure de la distance du réseau. Par exemple : choisissez le serveur avec le plus petit nombre de sauts (hop) ou le temps de réponse le plus rapide.

Certains géants des sociétés Internet ont leur propre CDN, mais utilisent un service CDN les fournisseurs sont plus rentables, comme Akamai Technologies , EdgeCast ou level3 . Pour les entreprises et les sites Web personnels qui viennent de démarrer, le coût du service CDN est très élevé, mais si votre base d'utilisateurs devient de plus en plus grande, et devient de plus en plus mondiale, alors il est nécessaire d'utiliser le CDN en échange d'un temps de réponse plus rapide. Dans Yahoo!, déplacez le contenu statique du serveur web de l'application vers CDN( Y compris le tiers mentionné ci-dessus et Yahoo propre CDN)Peut améliorer le temps de réponse des utilisateurs finaux de 20% voire plus. Passer au CDN est un changement de code assez simple, mais il améliorera drastiquement la réactivité de votre site.

3.Ajouter Expire ou Cache-Control HTTPEn-tête

Catégorie : Serveur

Cette règle a deux faces :

Pour les composants statiques : ne jamais expirer en fixant une heure dans un futur lointain comme Expire

Composants dynamiques redondants : utilisez l'en-tête Cache-Control HTTP approprié pour permettre au navigateur d'effectuer des requêtes conditionnelles

Le web design s'enrichit, ce qui signifie qu'il y a plus de scripts, d'images et de Flash sur la page. Les nouveaux visiteurs du site devront peut-être encore soumettre quelques requêtes HTTP, mais en utilisant l'expiration, le composant devient mis en cache, ce qui évite les requêtes inutiles lors des sessions de navigation ultérieures Requête HTTP. Les en-têtes ValidityHTTP sont généralement utilisés sur les images, mais ils doivent être utilisés sur tous les composants, y compris les scripts, les styles et les composants Flash .

Les navigateurs (et les proxys) utilisent la mise en cache pour réduire le nombre et la taille des requêtes HTTP afin que les pages puissent se charger plus rapidement. webLe serveur utilise l'en-tête de réponse Validity PeriodHTTP pour indiquer au client combien de temps chaque composant de la page doit être mis en cache. Utilisez une heure dans un futur lointain comme période de validité, en indiquant au navigateur que cette réponse sera dans 2010année4mois15 Cela ne changera pas aujourd'hui.

Expire : jeu. 15 avril 2010 20:00:00 GMT

Si vous utilisez le serveur Apache , utilisez la directive ExpiresDefault pour définir la période de validité par rapport à la date du jour. L'exemple suivant définit une période d'expiration de 10 ans à compter de la date de la demande :

ExpiresDefault "access plus 10 Years"

N'oubliez pas que si vous utilisez une heure dans un avenir lointain comme période de validité, vous devrez modifier le nom de fichier du composant à temps après le changement du composant. Chez Yahoo!, nous faisons souvent cela dans le cadre du processus de build : intégrez le numéro de version dans le nom de fichier du composant, par exemple : yahoo_2.0.6.js

L'utilisation d'une heure dans un futur lointain pour l'en-tête Validity HTTP n'affectera l'affichage de la page qu'une fois que l'utilisateur a déjà visité le site. S'il s'agit d'un nouveau visiteur ou si le cache du navigateur est vidé, cela n'affectera pas le nombre de requêtes HTTP. Cette amélioration des performances dépend donc de la fréquence à laquelle les utilisateurs ayant mis en cache des composants individuels visitent le site. Nous avons mesuré ces données sur Yahoo! et avons constaté que les pages vues pour chaque composant mis en cache (PV) représentaient 75% à 85%. En utilisant une heure dans un futur lointain comme période de validité HTTP en-tête, le nombre de composants mis en cache par le navigateur est augmenté et il n'est pas nécessaire d'utiliser Internet dans les pages vues suivantes La connexion envoie encore un octet supplémentaire.

4.GzipComposant

Catégorie : Serveur

Les ingénieurs front-end peuvent trouver des moyens de réduire considérablement le temps nécessaire à la transmission des requêtes et des réponses HTTP via le réseau. Il ne fait aucun doute que la vitesse de la bande passante de l'utilisateur final, le fournisseur de services réseau, la distance des points d'échange entre pairs, etc. échappent au contrôle de l'équipe de développement. Mais il existe d'autres facteurs qui peuvent affecter le temps de réponse. La compression peut améliorer le temps de réponse en réduisant la taille de la réponse HTTP. À partir de

HTTP/1.1

, le client

web prend en charge la compression. Accept-Encoding HTTP en-tête de requête.

Accept-Encoding : gzip, deflate

Si le serveur web voit cet en-tête de requête, il compressera la réponse en utilisant l'une des méthodes répertoriées par le client. webLe serveur informe le client via l'en-tête Content-Encoding correspondant.

Content-Encoding : gzip

Gzip est actuellement la méthode de compression efficace la plus courante, développée par GNU Le projet a été développé et standardisé par la RFC 1952 . Le seul autre format de compression que vous pourriez voir est deflate, mais il n'est pas très efficace et rare.

Gzipping peut généralement compresser la réponse à 70 %, actuellement environ 90 % La transmission réseau de via le navigateur prend en charge gzip. S'il s'agit d'un serveur Apache, le module pour configurer gzip dépend de la version : Apache 1.3 Utilisez mod_gzip pendant que Apache 2.x est le mod_deflate module.

Certains facteurs liés aux navigateurs et aux proxys peuvent provoquer une inadéquation entre ce que le navigateur attend et le contenu compressé qu'il reçoit. Heureusement, ces rares rencontres diminuent à mesure que les anciens navigateurs sont retirés, et le module Apache peut automatiquement ajouter l'en-tête VaryResponse approprié pour vous aider à le faire.

Le serveur décidera d'utiliser ou non la compression gzip en fonction du type de fichier, mais cela est très limité. La plupart des sites Web utilisent gzip pour compresser les fichiers HTML En fait, la compression de scripts et de feuilles de style est également un bon choix, mais de nombreux sites Web. rate-le. J'ai eu cette opportunité. En fait, tout contenu textuel peut être compressé, y compris XML et JSON, tandis que les images et PDF Pas besoin de compresser, car ils ont déjà été compressés. Utiliser gzip pour compresser ne gaspillera pas seulement du CPU. mais peut également augmenter la compression.

Utiliser gzip autant que possible peut faire perdre du poids à la page, ce qui est également le moyen le plus simple d'améliorer l'expérience utilisateur.

5.Mettre la feuille de style en haut

Catégorie : css

Lors de l'étude des performances de Yahoo!, nous avons constaté que mettre la feuille de style dans le document La section HEAD donne l'impression que la page se charge plus rapidement. En effet, placer la feuille de style dans head permet à la page de s'afficher progressivement.

Les ingénieurs front-end soucieux des performances souhaitent que la page s'affiche de manière incrémentielle. En d'autres termes, nous souhaitons que le navigateur affiche le contenu existant le plus rapidement possible, ce qui est particulièrement important lorsqu'il y a beaucoup de contenu sur la page ou lorsque la connexion Internet de l'utilisateur est très lente. L'importance d'afficher des commentaires aux utilisateurs (tels que des indicateurs de progression) a fait l'objet de recherches approfondies et documentée . Dans notre cas, la page HTML est l'indicateur de progression ! Lorsque le navigateur charge progressivement l'en-tête de la page, la barre de navigation, le logo supérieur, etc., ceux-ci sont traités comme des commentaires par les utilisateurs qui attendent que la page se charge, ce qui peut améliorer la expérience utilisateur globale.

Dans de nombreux navigateurs (dont IE), placez la feuille de style en HTML Le bas du document empêchera la page de s'afficher progressivement. Ces navigateurs bloquent le processus de rendu pour éviter de redessiner les éléments de la page en raison de changements de style, laissant les utilisateurs regarder une page vierge.

HTMLLa documentation officielle décrit clairement que la feuille de style doit être placée à l'intérieur du HEAD de la page : "Contrairement à A, [LIEN] ne peut apparaître que dans la section HEAD d'un document, bien qu'il puisse apparaître un certain nombre de fois." (Contrairement à a balise, lien ne peut apparaître que dans la section HEAD, bien qu'elle puisse apparaître un certain nombre de fois) . Les écrans vides ou le contenu falsh sans style ne sont pas acceptables. La solution idéale est de suivre la documentation officielle du HTML et de placer la feuille de style dans le HEAD du HTMLdocument rubrique.

6.Mettez le script en bas

Catégorie  : javascript

le script bloquera les téléchargements parallèles, HTTP/1.1La documentation officielle recommande le nombre de composants à télécharger en parallèle sous chacun nom d'hôte du navigateur Pas plus de deux, si l'image provient de plusieurs noms d'hôte, le nombre de téléchargements parallèles peut être supérieur à deux. Si le script est en cours de téléchargement, le navigateur ne lancera aucune autre tâche de téléchargement, même sous un nom d'hôte différent.

Parfois, ce n'est pas facile de déplacer le script vers le bas. Par exemple, si le script est inséré dans le contenu de la page à l'aide de document.write , il n'y a aucun moyen de le déplacer vers le bas. Il peut également y avoir des problèmes de portée qui, dans la plupart des cas, peuvent être résolus.

Une suggestion courante consiste à utiliser un script différé (différé), avec DEFER Les scripts attribués sont censés ne pas contenir document.write et inviter le navigateur à leur dire qu'ils peuvent continuer le rendu. Malheureusement, Firefox ne prend pas en charge l'attribut DEFER . Dans IE le script peut être retardé mais pas comme prévu. Si le script peut être différé, on peut le mettre en bas de page et la page se chargera plus rapidement.

7.Évitez d'utiliser CSSexpression

catégorie : css

Utiliser des expressions CSS pour définir dynamiquement des propriétés CSS est un moyen puissant et dangereux. Pris en charge depuis IE5, mais obsolète depuis IE8. Par exemple, vous pouvez utiliser l'expression CSS pour définir la couleur d'arrière-plan pour qu'elle alterne selon l'heure :

Dans le code ci-dessus, la méthode expression peut accepter une expression JavaScript. La propriété CSS sera définie sur le résultat de l'expression. La méthode expression sera ignorée par les autres navigateurs, il est donc uniquement utile de trouver des moyens d'obtenir une expérience utilisateur multi-navigateurs cohérente avec IE .

Le plus gros problème avec les expressions est qu'elles sont souvent réévaluées, plus de fois qu'on ne le pense. Les expressions sont réévaluées non seulement lorsque la page est rendue et redimensionnée, mais également lorsque la page défile et même lorsque l'utilisateur déplace la souris sur la page. Ajoutez un compteur à l'expression CSS pour suivre quand et à quelle fréquence elle est recalculée, et déplacer la souris sur la page peut entraîner le recalcul de 10000 plusieurs fois. .calculer.

Une façon de réduire la réévaluation des expressions CSS consiste à utiliser des expressions ponctuelles, c'est-à-dire après que l'expression ait été évaluée pour la première fois. time Définissez simplement l'attribut style sur une valeur explicite et remplacez l'expression. Si vous devez définir dynamiquement les propriétés de style tout au long du cycle de vie de la page, vous pouvez utiliser des gestionnaires d'événements au lieu des expressions CSS. Si vous devez utiliser des expressions CSS, n'oubliez pas qu'elles peuvent être recalculées des milliers de fois, affectant les performances de la page entière.

8.Mettre JavaScript et CSSMettez-le dehors

Catégorie : javascript, css

Beaucoup de performance Les principes concernent tous la façon de gérer les composants externes, cependant, avant que ces problèmes ne surviennent, vous devez vous poser une question plus fondamentale : JavaScript et CSS devraient-ils être placé Vers un fichier externe ou directement sur la page ?

En fait, l'utilisation de fichiers externes peut rendre la page plus rapide, car JavaScript et CSSLe fichier sera mis en cache dans le navigateur. HTMLinline dans le documentJavaScript et CSS à chaque requête du Les documents HTML seront retéléchargés. Cela réduit le nombre de requêtes HTTP requises, mais augmente la taille du document HTML. En revanche, si JavaScript et CSS sont dans des fichiers externes et ont été mis en cache par le navigateur, alors on réussit Le Le document HTML a été réduit en taille sans augmenter le nombre de requêtes HTTP.

Le facteur clé est la relation entre la fréquence à laquelle les fichiers externes sont mis en cache et le nombre de demandes de pages. Bien que ce facteur soit difficile à quantifier, il peut être mesuré à l’aide de divers paramètres. La mise en cache des fichiers externes peut être un énorme avantage si l'utilisateur visite plusieurs pages par session, de sorte que les mêmes scripts et feuilles de style peuvent être réutilisés sur plusieurs pages.

De nombreux sites se situent au milieu du peloton en termes de métriques, et pour ces sites, la meilleure solution est généralement de combiner JavaScript CSS Déployé en tant que fichier externe. La seule exception concerne la priorité en ligne sur les pages d'accueil, telles que la page d'accueil de Yahoo! et Mon Yahoo!. Les pages d'accueil avec moins de visites par session constateront que le JavaScript et le CSS en ligne entraînent des temps de réponse plus rapides pour l'utilisateur final.

Pour un site typique, la page d'accueil est le début de nombreuses visites. Il existe de nombreuses techniques qui peuvent tirer parti de la réduction des requêtes

HTTP. L’effet est comparable aux avantages de l’utilisation de la mise en cache de fichiers externes. L'une de ces techniques consiste à utiliser du JavaScript et du CSS en ligne sur la page d'accueil, mais de charger dynamiquement des fichiers externes une fois la page chargée. De cette manière, les fichiers externes nécessaires aux pages suivantes ont été placés dans le cache du navigateur.

9.

RéduireDNSRecherche

Catégorie

 : Contenu

Le système de noms de domaine établit le nom d'hôte et l'

IP adresse Le mappage entre les noms et les numéros est comme le mappage entre les noms et les numéros dans un annuaire téléphonique. Lorsque vous entrez www.yahoo.com dans le navigateur, le navigateur contactera le résolveur DNS pour renvoyer le du serveur. IPadresse. Le DNS a un coût, il faut 20 à 120 millisecondes pour le regarder up L'adresse IP du nom d'hôte donné. Le navigateur ne peut rien télécharger à partir du nom d'hôte tant que la recherche DNS n'est pas terminée. Les recherches

DNS

sont mises en cache plus efficacement, soit par le

FAI (fournisseur d'accès Internet) de l'utilisateur, soit localement. Le réseau existe sur un serveur de mise en cache spécial, mais peut également être mis en cache sur les ordinateurs des utilisateurs individuels. Les informations DNS sont enregistrées dans le cache DNS du système d'exploitation (Microsoft Windows " DNSService Client"). La plupart des navigateurs ont leur propre cache indépendant du système d'exploitation. Tant que le navigateur conserve cet enregistrement dans son cache, il n'interrogera pas le système d'exploitation pour le DNS.

IEcache par défautRecherche DNS30 minutes, écrites en DnsCacheTimeout Paramètres du registre. Firefox met en cache 1 minutes, qui peuvent être définies à l'aide de network.dnsCacheExpiration élément de configuration. (Fasterfox a modifié la durée du cache à 1heureP.S. Fasterfox estFF)

Si le client Le cache DNS est vide (y compris le navigateur et le système d'exploitation), DNSLe nombre de recherches est égal au nombre de noms d'hôtes différents sur la page, y compris la page URL, images, fichiers de script, feuilles de style, objets Flash et autres noms d'hôtes dans les composants, la réduction de différents noms d'hôtes peut réduire Recherche DNS.

Réduire le nombre de noms d'hôtes différents réduit également le nombre de composants que la page peut télécharger en parallèle, évitant ainsi les recherches DNS et réduisant temps de réponse. La réduction du nombre de téléchargements parallèles augmente le temps de réponse. Mon principe est de disperser les composants sous 2 à 4 noms d'hôtes, ce qui revient à réduire au en même temps Un compromis entre la recherche DNS et l'autorisation de téléchargements simultanés élevés.

10.CompressionJavaScript et CSS

Catégorie : javascript, css

La compression signifie spécifiquement supprimer les éléments inutiles des caractères du code pour réduire la taille et ainsi charger plus rapidement. La minimisation du code signifie supprimer tous les commentaires et les espaces inutiles (espaces, nouvelles lignes et tabulation). Faire cela en JavaScript améliore la réactivité car le fichier à télécharger devient plus petit. Les deux outils de compression de code JavaScript les plus couramment utilisés sont JSMin et YUI Compressor , compresseur YUI peut également compresser CSS.

L'obfuscation est une mesure facultative d'optimisation du code source, qui est plus compliquée que la compression, de sorte que le processus d'obscurcissement est également plus susceptible de produire des bugs. Dans une enquête menée auprès des dix principaux sites Web aux États-Unis, la compression peut diminuer de 21 %, tandis que l'obfuscation peut diminuer de 25 %. Bien que l’obscurcissement fournisse un degré de réduction plus élevé, il est plus risqué que la compression.

En plus de compresser des scripts et des styles externes, les blocs 3f1c4e4b6b16bbbd69b2ee476dc4f83a et c9ccee2e6ea535a969eb3f532ad9fe89 Même avec le module gzip activé, la compression préalable peut réduire la taille de 5 % ou plus. JavaScript et CSS sont de plus en plus utilisés, donc la compression du code aura un bon effet.

11.

Éviter les redirections

Catégorie

:

Contenu

redirection avec les codes d'état

301

et 302, le Voici un en-tête HTTP avec 301 code d'état :

HTTP /1.1 301 Déplacé de façon permanente

Emplacement :

Type de contenu : text/html

Le navigateur passera automatiquement à

Emplacement

URL spécifiée par le domaine. Toutes les informations nécessaires à la redirection se trouvent dans l'en-tête HTTP, et le corps de la réponse est généralement vide. En fait, des en-têtes HTTP supplémentaires, tels que Expires et Cache-Control représentent également la redirection. De plus, il existe d'autres façons de sauter : refresh balise méta et JavaScript, mais si vous devez faire une redirection, c'est il est préférable d'utiliser le code d'état standard 3xxHTTP, principalement pour permettre au bouton de retour de fonctionner normalement.

Gardez à l'esprit que les redirections ralentissent l'expérience utilisateur, et que l'insertion de redirections entre l'utilisateur et le document

HTML

retarde tout sur la page , la page ne peut pas être rendue et le composant ne peut pas commencer le téléchargement tant que le document HTML n'est pas servi au navigateur.

Il existe une redirection courante qui gaspille énormément de ressources, et les développeurs

web

n'en sont généralement pas conscients, ce qui est URL manque une barre oblique à la fin. Par exemple, accéder à renverra une réponse 301 qui redirige vers ( Notez la barre oblique à la fin). Dans Apache vous pouvez utiliser Alias ​​​​, mod_rewrite ou Commande DirectorySlash pour annuler les redirections inutiles.

L'utilisation la plus courante de la redirection est de connecter l'ancien site au nouveau site. Elle peut également connecter différentes parties d'un même site et effectuer certains traitements en fonction des différentes situations de l'utilisateur (type de navigateur, utilisateur). type de compte, etc.) . La connexion de deux sites Web à l’aide de redirections est la plus simple et ne nécessite qu’une petite quantité de code supplémentaire. Bien que l’utilisation de redirections à ces moments-là réduise la complexité du développement pour les développeurs, elle réduit l’expérience utilisateur. Une alternative consiste à utiliser Alias ​​​​ et mod_rewrite , à condition que les deux chemins de code soient sur le même serveur. Si la redirection est utilisée car le nom de domaine change, vous pouvez créer un CNAME (créer un enregistrement DNS pointant vers un autre nom de domaine comme un alias) combiné avec la directive Alias ​​ ou la directive mod_rewrite .

12.Supprimer les scripts en double

Catégorie : javascript

Les pages contenant des fichiers de script en double affecteront les performances, ce qui n'est peut-être pas ce que vous pensez. Lors d'un examen des 10grandssites Web aux États-Unis, il a été constaté que seuls 2 les sites contenaient des scripts en double. Deux raisons principales augmentent les risques d'avoir des scripts en double sur une seule page : la taille de l'équipe et le nombre de scripts. Dans ce cas, les scripts en double créent des requêtes HTTP inutiles, exécutent du code JavaScript inutile et ont un impact sur les performances de la page.

IE rend les requêtes HTTP inutiles, tandis que Firefox Non. Dans IE, si un script externe non cacheable est introduit deux fois par la page, il générera deux HTTPDemande. Même si le script peut être mis en cache, il générera des requêtes HTTP supplémentaires lorsque l'utilisateur rechargera la page.

En plus de générer des requêtes HTTP dénuées de sens, évaluer le script plusieurs fois fait également perdre du temps. Parce que, que le script puisse être mis en cache ou non, le JavaScript redondant sera exécuté dans Firefox et IE >Code.

Une façon d'éviter d'introduire accidentellement deux fois le même script consiste à implémenter un module de gestion de script dans le système de modèles. La méthode typique pour introduire des scripts consiste à utiliser la balise SCRIPT dans la page HTML :

21363db31a13cbf9f6dcdf53a4fd77c72cacc6d41bbb37262a98f745aa00fbf0

Une alternative en PHP

consiste à créer un fichier appelé insertScript fonction :

<?php insertScript("menu.js?1.1.11") ?>

En plus d'empêcher l'introduction du même script plusieurs fois, cette fonction peut également résoudre d'autres scripts. problèmes liés, tels que les dépendances. Vérifiez et ajoutez le numéro de version au nom du fichier de script pour prendre en charge l'en-tête "permanent" expirationHTTP.

13.ConfigurationETags

Catégorie : Serveur

Les balises d'entité (ETags) sont un mécanisme utilisé par les serveurs et les navigateurs pour déterminer si les composants du cache du navigateur correspondent aux composants du serveur d'origine (les "entités" sont des composants : images, scripts, feuilles de style, etc.). L'ajout de ETags fournit un mécanisme de validation d'entité plus flexible que la date de dernière modification. Un ETag est une chaîne qui sert d'identifiant unique pour une version spécifique d'un composant. La seule contrainte de formatage est que la chaîne doit être placée entre guillemets, et le serveur d'origine spécifie le ETag du composant avec le ETag dans l'en-tête correspondant. :

HTTP/1.1 200 OK

Dernière modification : mar. 12 décembre 2006 03:03:59 GMT

ETag : "10c24bc-4ab-457e1c1f"

Content-Length : 12195

Ensuite, si le navigateur doit valider un composant, il utilise If-None- Match En-tête de demande pour transmettre ETag au serveur d'origine. Si les ETags correspondent avec succès, un code d'état 304 sera renvoyé, réduisant ainsi le nombre de 12195 corps de réponse en octets.

GET /i/yahoo.gif HTTP/1.1

Hébergeur : us.yimg.com

Si-Modifié-Depuis : Mar 12 décembre 2006 03:03:59 GMT

If-None-Match : "10c24bc-4ab-457e1c1f"

HTTP/1.1 304 non modifié

ETagsLe problème est qu'ils sont construits par un serveur spécifique, donc si le navigateur récupère le composant initial d'un serveur et souhaite ensuite valider le même composant sur un autre serveur, ETags Il est impossible de réussir une correspondance et l'utilisation d'un groupe de serveurs pour traiter les requêtes est très courante dans les sites Web. Par défaut, Apache et IIS intégreront les données dans ETag, pour grandement réduisez les chances de réussite des tests de validité sur un site multi-serveurs.

Apache 1.3 et 2.xETagLe le format est inode-size-timestamp . Même si un fichier donné peut se trouver dans le même répertoire sur plusieurs serveurs et que la taille du fichier, les autorisations d'accès, les horodatages, etc. sont tous identiques, son nœud i (Inode P.S., fichiers d'index sous UNIX) sont également différents selon les serveurs.

IIS5.0 et 6.0 ont également des problèmes similaires. Le format des ETags dans IIS est Filetimestamp:ChangeNumber , ChangeNumber est un compteur utilisé pour suivre les modifications de configuration IIS. Le ChangeNumber d'un site sur différents serveurs IIS ne peut pas être le même.

Le résultat final est Apache et IIS générés pour exactement le même composant ETags Il n'y a pas de correspondance entre navigateurs, si les ETags ne correspondent pas, l'utilisateur ne recevra pas la réponse 304 conçue pour les petits et des ETags rapides. Au lieu de cela, ils recevront une réponse 200normale contenant toutes les données du composant. Si le site est déployé sur un seul serveur, ce problème n'existe pas du tout. Mais si le site est déployé sur plusieurs serveurs et que vous prévoyez d'utiliser les ETagsApache ou IIS 🎜> configuration, les utilisateurs verront des pages lentes, une charge de serveur plus élevée, une plus grande consommation de bande passante et le proxy ne pourra pas mettre en cache efficacement le contenu de la page. Même si le composant possède un en-tête Expires HTTP "permanent", lorsque l'utilisateur clique pour recharger ou actualiser, une requête GET conditionnelle sera toujours émis.

Si vous ne souhaitez pas utiliser le modèle de vérification flexible fourni par ETags, il est préférable de mettre tous les Etag Supprimez tout, vous pouvez utiliser l'horodatage basé sur les composants Last-Modified HTTP vérification de l'en-tête et supprimer ETag pour réduire HTTPLa taille des en-têtes de réponse et des requêtes ultérieures. L'article du support Microsoft décrit comment supprimer les ETags. Dans Apache, vous pouvez simplement ajouter le code suivant au fichier de configuration Apache :

FileETag aucun

14.Rendre Ajax pouvant être mis en cache

Catégorie : Contenu

L'un des avantages d'Ajax

est qu'il peut fournir aux utilisateurs un retour instantané. Parce qu'il peut demander des informations de manière asynchrone au serveur backend. Cependant, avec Ajax il n'y a aucune garantie que l'utilisateur attend du JavaScript et du XMLLa période de retour des réponses ne sera pas très ennuyeuse. Dans de nombreuses applications, la capacité de l'utilisateur à attendre dépend de la manière dont Ajax est utilisé. Par exemple, dans un client de messagerie basé sur web, les utilisateurs continueront à rechercher AjaxDemandez de l'attention pour les résultats renvoyés. Il est important de se rappeler que « asynchrone » ne signifie pas « immédiat ».

Pour améliorer les performances, l'optimisation de ces réponses

Ajax

est cruciale. Le moyen le plus important d'améliorer les performances de Ajax est de rendre la réponse pouvant être mise en cache, comme en ajoutant Expires ou Cache-Control HTTP. Les règles supplémentaires suivantes s'appliquent à Ajax : Gzip

composant

减少DNS查找

压缩JavaScript

避免重定向

配置ETags

我们一起看看例子，一个Web 2.0的电子邮件客户端用了Ajax来下载用户的通讯录，以便实现自动完成功能。如果用户从上一次使用之后再没有修改过她的通讯录，而且Ajax响应是可缓存的，有尚未过期的Expires或者Cache-Control HTTP头，那么之前的通讯录就可以从缓存中读出。必须通知浏览器，应该继续使用之前缓存的通讯录响应，还是去请求一个新的。可以通过给通讯录的Ajax URL里添加一个表明用户通讯录最后修改时间的时间戳来实现，例如 &t=1190241612 。如果通讯录从上一次下载之后再没有被修改过，时间戳不变，通讯录就将从浏览器缓存中直接读出，从而避免一次额外的HTTP往返消耗。如果用户已经修改了通讯录，时间戳也可以确保新的URL不会匹配缓存的响应，浏览器将请求新的通讯录条目。

 

即使Ajax响应是动态创建的，而且可能只适用于单用户，它们也可以被缓存，而这样会让你的Web 2.0应用更快。

 

15.尽早清空缓冲区

 

分类: 服务器

 

当用户请求一个页面时，服务器需要用大约200到500毫秒来组装HTML页面，在这期间，浏览器闲等着数据到达。PHP中有一个 flush() 函数，允许给浏览器发送一部分已经准备完毕的HTML响应，以便浏览器可以在后台准备剩余部分的同时开始获取组件，好处主要体现在很忙的后台或者很“轻”的前端页面上（P.S. 也就是说，响应时耗主要在后台方面时最能体现优势）。

 

比较理想的清空缓冲区的位置是HEAD后面，因为HTML的HEAD部分通常更容易生成，并且允许引入任何CSS和JavaScript文件，这样就可以让浏览器在后台还在处理的时候就开始并行获取组件。

 

例如：

 

... <!-- css, js -->
    </head>
    <?php flush(); ?>
    <body>
      ... <!-- content -->

Yahoo!搜索 开创了这项技术，而且真实用户测试研究也证明了使用这种技术的诸多好处。

 

16.对Ajax用GET请求

 

分类: 服务器

 

L'équipe de messagerie

Yahoo! a découvert que lors de l'utilisation de XMLHttpRequest , la requête POST du navigateur passe par une procédure à deux étape du processus Le processus est mis en œuvre : envoyez d'abord l'en-tête HTTP, puis envoyez les données. Il est donc préférable d'utiliser la requête GET, qui nécessite uniquement d'envoyer un message TCP (sauf si cookieExceptionnellement nombreux). La longueur maximale de l'URL de IE est de 2K, donc si vous souhaitez envoyer Si les données dépassent 2K, GET

ne peut pas être utilisé. Un effet secondaire intéressant de la requête

POST est qu'aucune donnée n'est réellement envoyée, comme la requête GET . Comme décrit dans la documentation HTTP, la requête GET est utilisée pour récupérer des informations. Sa sémantique consiste donc simplement à demander des données avec la requête GET

, et non à envoyer des données qui doivent être stockées au serveur.

17.Chargement paresseux des composants

Catégorie :

Contenu

Vous pouvez regarder la page de plus près et vous demander : qu'est-ce qui est nécessaire pour afficher la page en premier lieu ? Le reste peut attendre.

JavaScript est idéal pour séparer avant et après l'événement onload. Par exemple, si vous disposez de code JavaScript

et d'une bibliothèque prenant en charge le glisser-déposer et l'animation, ceux-ci peuvent attendre, car les éléments glisser-déposer se produisent après l'initialisation de la page. rendu. Les autres sections qui peuvent être chargées paresseusement incluent le contenu masqué (contenu qui apparaît après une interaction) et les images réduites.

Des outils peuvent vous aider à réduire votre charge de travail : YUI Image Loader peut retarder le chargement des images réduites, et YUI Get L'utilitaire est un moyen simple d'introduire JS et CSS. Yahoo!La page d'accueil est un exemple. Vous pouvez ouvrir le panneau réseau de Firebug

et y regarder de plus près.

Il est préférable d'aligner les objectifs de performance avec d'autres bonnes pratiques de développement web, telles que « l'amélioration progressive ». Si le client prend en charge JavaScript, l'expérience utilisateur peut être améliorée, mais vous devez vous assurer que la page peut fonctionner correctement lorsqu'elle ne prend pas en charge JavaScript

. Ainsi, une fois que vous êtes sûr que votre page fonctionne correctement, vous pouvez l'améliorer avec des scripts à chargement différé pour prendre en charge certains effets sophistiqués tels que le glisser-déposer et les animations.

18.Composants préchargés

Catégorie :

Contenu

Le préchargement peut sembler être l'opposé du chargement paresseux, mais il a en réalité un objectif différent. En préchargeant les composants, vous pouvez utiliser pleinement le temps d'inactivité du navigateur pour demander des composants (images, styles et scripts) qui seront utilisés à l'avenir. Lorsque l'utilisateur accède à la page suivante, la plupart des composants sont déjà dans le cache, la page se chargera donc plus rapidement du point de vue de l'utilisateur.

Dans les applications réelles, il existe les types de préchargement suivants :

Inconditionnel Préchargement - Commencez le chargement dès que possible pour obtenir des composants supplémentaires. google.com est un bon exemple de préchargement d'images sprite. Cette image sprite ne le fait pas. Ce n'est pas la page d'accueil google.com qui est nécessaire, mais le contenu de la page de résultats de recherche.

Conditionnel Préchargement - Devinez où l'utilisateur sautera en fonction de ses actions et préchargez en conséquence. Après avoir tapé dans la zone de saisie de search.yahoo.com , vous pouvez voir comment ces composants supplémentaires doivent être chargés.

À l'avance Préchargé - Préchargez les nouveaux modèles avant leur déploiement. Nous entendons souvent après une refonte : « Ce nouveau site Web est bon, mais il est plus lent qu'avant. » Cela s'explique en partie par le fait que les pages précédentes visitées par les utilisateurs ont d'anciens caches, mais que les nouvelles sont dans un état de cache vide. Cet impact négatif peut être atténué en préchargeant certains composants avant le déploiement d'une nouvelle conception. L'ancien site peut utiliser le temps d'inactivité du navigateur pour demander les images et les scripts dont le nouveau site a besoin.

19.Réduire le nombre d'éléments DOM

Catégorie : Contenu

Une page complexe nécessite de télécharger plus d'octets et d'utiliser JavaScriptAccéder à DOM sera également plus lent. Par exemple, lorsque vous souhaitez ajouter un gestionnaire d'événements, parcourez les éléments 500DOM et 5000 Les éléments DOM sont différents.

Un grand nombre d'éléments DOM est le signe qu'il y a des balises non pertinentes sur la page qui doivent être nettoyées. Utilisez-vous des tableaux imbriqués pour la mise en page ? Ou avez-vous ajouté un tas de dc6dce4a544fdca2df29d5ac0ea9906b s pour résoudre le problème de mise en page ? Peut-être qu'un meilleur balisage sémantique devrait être utilisé.

Les utilitaires CSS YUI sont très utiles pour la mise en page : grids.cssPour la mise en page globale, fonts.css et reset.css peuvent être utilisés pour supprimer le format par défaut du navigateur. C'est une bonne occasion de commencer à faire le ménage et à réfléchir au balisage, par exemple en n'utilisant dc6dce4a544fdca2df29d5ac0ea9906b que lorsque cela a un sens sémantiquement, et non parce qu'il affiche une nouvelle ligne.

DOMLe nombre d'éléments est facile à tester, il suffit de taper dans la console de Firebug :

document.getElementsByTagName('*').length

Combien d'éléments DOM sont de trop ? Vous pouvez vous référer à d'autres pages similaires bien balisées, telles que Yahoo!La page d'accueil est une page assez chargée, mais il y en a moins de 700 (balises HTML).

20.Composants de séparation inter-domaines

Classification  : Contenu

Composants séparés pour maximiser les téléchargements parallèles, mais assurez-vous de n'utiliser que 2-4 domaines en raison du coût des recherches DNS. Par exemple, vous pouvez déployer du HTML et du contenu dynamique dans www.example.org , et séparer les composants statiques en static1.example.org et static2.example.org .

Pour plus d'informations, veuillez consulter les articles de Tenni Theurer et Patty Chi : Maximiser les téléchargements parallèles dans la voie de covoiturage

21.Utilisez le moins possibleiframe

Catégorie : Contenu

Utiliser iframeVous pouvez insérer un document HTML dans un document parent. L'important est de comprendre comment fonctionne l'iframe. fonctionne et l’utilise efficacement.

d5ba1642137c3f32f4f4493ae923989c Avantages de  :

Introduit du contenu tiers lent comme des logos et des publicités

Sandbox sécurisé

Script de téléchargement parallèle

d5ba1642137c3f32f4f4493ae923989c > Coûteux, même un iframe vierge

Bloque le chargement de la page

Non sémantique

22.

Élimine

404

Catégorie : Contenu

HTTPDemandes sont chers, il n'est pas nécessaire d'utiliser une requête HTTP

pour obtenir une réponse inutile (comme

404 Not Found), il ne fera que ralentir l’expérience utilisateur sans aucun avantage. Certains sites utilisent un 404 utile - "Vous voulez dire

xxx

?" bon pour l'expérience utilisateur, mais cela gaspille également les ressources du serveur (telles que les bases de données, etc.). Le pire, c'est que le JavaScript externe lié à a une erreur et le résultat est 404. Premièrement, ces téléchargements bloqueront les téléchargements parallèles. Deuxièmement, le navigateur essaiera d'analyser le corps de la réponse 404 car il s'agit d'un code JavaScript et devra en découvrir les parties. sont disponibles. 23.Donner

Cookie

Perdre du poids

Catégorie : cookie

Il existe de nombreuses raisons d'utiliser des cookies, telles que l'autorisation et la personnalisation . Les informations

HTTP

cookies sont échangées entre le serveur web et le navigateur. Il est important de garder le cookie aussi petit que possible afin de minimiser l'impact sur le temps de réponse des utilisateurs.

Pour plus d'informations, consultez les articles de Tenni Theurer et Patty Chi : Quand le cookie s'effrite 🎜> . Les principes empiriques pertinents peuvent être résumés comme suit :

Supprimer les

cookies inutiles

Garanticookies Aussi petit que possible pour minimiser l'impact sur le temps de réponse des utilisateurs

Veillez à définir le niveau de domaine approprié pour le cookie afin d'éviter d'affecter d'autres sous-domaines

Définissez une période de validité appropriée. Une période de validité antérieure ou aucune peut être supprimée plus rapidementcookie et améliorez le temps de réponse de l'utilisateur

Définissez une période de validité appropriée. 🎜> 24.Placer le composant sous un domaine qui ne contient pas de cookie

Catégorie

: cookie

Lorsque le navigateur envoie une demande d'image statique, le cookie est également envoyé ensemble, et le serveur n'a pas du tout besoin de ces cookies. Ils ne feront donc que générer un trafic réseau dénué de sens, et vous devez vous assurer que les demandes de composants statiques ne contiennent pas de cookies

. Vous pouvez créer un sous-domaine et y déployer tous les composants statiques.

Si le nom de domaine est www.example.org , vous pouvez déployer le composant statique sur statique. exemple.org . Cependant, si un cookieexample.org ou www.example.org 🎜>, alors toutes les demandes adressées à static.example.org contiendront ces cookies. A ce moment, vous pouvez acheter un nouveau nom de domaine, déployer tous les composants statiques et conserver le nouveau nom de domaine sans cookies. Yahoo! utilise yimg.com , YouTube est ytimg.com , Amazon est images-amazon.com et ainsi de suite.

Un autre avantage du déploiement de composants statiques sous un domaine qui ne contient pas de cookies est que certains proxys peuvent refuser la mise en cache Composant de cookie. Une chose à noter : si vous ne savez pas si vous devez utiliser example.org ou www.example.org comme page d'accueil , vous pouvez considérer cookies. Si vous omettez www, vous ne pouvez écrire cookie que dans *.example.org , donc pour des raisons de performances, il est préférable d'utiliser le sous-domaine www et d'écrire cookie dans ce sous-domaine.

25.Réduire DOMaccès

Catégorie : javascript

Utilisez JavaScript pour accéder au DOM l'élément est très lent, donc afin que la page réponde plus rapidement, vous devez :

Cache l'index de l'élément visité

Tout d'abordMettez à jour les nœuds "hors ligne" et ajoutez-les à l'arbre DOM

Évitez d'utiliser JavaScript pour corriger la mise en page issues

Pour plus d'informations, veuillez consulter l'article de YUIIn CinemaJulien Lecomte : Applications Ajax hautes performances

26.Utiliser des gestionnaires d'événements intelligents

Catégorie : javascript

Parfois, on a l'impression que la page n'est pas assez réactive car trop de gestionnaires d'événements fréquemment exécutés ont été ajoutés au DOM Sur différents éléments de l'arbre, c'est pourquoi il est recommandé d'utiliser la délégation d'événements. S'il y a 10 boutons dans un div , il ne doit être donné qu'au div conteneur Ajoutez un gestionnaire d'événements au lieu d'un pour chaque bouton. Les événements peuvent bouillonner, vous pouvez donc capturer l'événement et savoir quel bouton est la source de l'événement.

n'a pas besoin d'attendre l'événement onload pour traiter l'arborescence DOM , généralement seuls les éléments cibles sont accessibles dans l'arborescence DOM sans avoir à attendre que toutes les images soient téléchargées. Pensez à utiliser DOMContentLoaded au lieu de l'événement onload, mais pour le rendre disponible dans tous les navigateurs, utilisez YUI Outil d'événement , qui possède une méthode onAvailable .

Pour plus d'informations, veuillez consulter l'article de YUIAu cinémaJulien Lecomte : Applications Ajax hautes performances

27.Sélectionner2cdf5bf648cf2f33323966d7f58a7f3fRejeter @import

Catégorie : css

Une bonne pratique a été évoquée plus haut : afin d'obtenir un rendu progressif, le CSS doit être placé en haut.

Utilisez @import dans IE et utilisez 2cdf5bf648cf2f33323966d7f58a7f3f L'effet est le même, il est donc préférable de ne pas l'utiliser.

28.Évitez d'utiliser des filtres

Catégorie : css

IE

PropriétaireAlphaImageLoader le filtre peut être utilisé pour réparer IE7Il y a un problème avec les images PNG translucides dans les versions précédentes. Pendant le processus de chargement de l'image, ce filtre bloquera le rendu, gèlera le navigateur, augmentera la consommation de mémoire et sera appliqué à chaque élément, pas à chaque image, il y aura donc beaucoup de problèmes.

Le meilleur moyen est simplement de ne pas utiliser AlphaImageLoader et de rétrograder gracieusement vers IE qui est bien pris en charge dans >PNG8 photo à la place. Si vous devez utiliser AlphaImageLoader , vous devez utiliser le trait de soulignement hack : _filter à éviter Affecte les utilisateurs de IE7 et supérieur.

29.Optimiser les images

Catégorie : Photos

Une fois que le concepteur a pris les photos, il les télécharge sur via FTP Il y a quelques choses que nous pouvons faire avant le serveur web.

Vérifiez l'image GIF pour voir si le nombre de couleurs correspondant à la taille de la palette est utilisé dans l'image, utilisez imagemagick peut simplement vérifier :

identifier -verbose image.gif

si des images 4 couleurs sont utilisées 256 "emplacements" de couleurs dans la palette, alors il y a place à amélioration

Essayez d'utiliser GIFConvertir l'image en PNG et voyez si vous pouvez réduire la taille, c'est généralement le cas. Les développeurs étaient souvent réticents à utiliser des images PNG en raison de la prise en charge limitée du navigateur, mais cela appartient au passé. Le vrai problème est que les images PNG prennent entièrement en charge la transparence alpha, tandis que GIF images Il ne prend pas en charge les dégradés de transparence, donc tout ce que GIF peut faire, PNG peut le faire (sauf l'animation). La commande simple suivante rendra l'image PNG sûre à utiliser :

convertir image.gif image.png

"We The l'accent est : donnez une chance au

PNG »

avec pngcrush (ou autre PNG. Outil d'optimisation) traite toutes les images PNG, par exemple :

pngcrush image.png -rem alla -reduce -brute result .png

Utilisez jpegtran pour traiter toutes les images JPEG Cet outil prend en charge JPEG Des opérations non destructives sur les images, comme la rotation, peuvent également être utilisées pour supprimer des commentaires et autres informations inutiles (telles que EXIFInformationsP.S. Informations sur la photo numérique, distance focale, ouverture, etc.) : jpegtran -copy none -optimize -perfect src.jpg dest.jpg

30.

OptimisationSprite CSS

Catégorie

: Image

Dans

Sprite les images disposées horizontalement sont généralement plus petites que les fichiers finaux disposés verticalement

La combinaison de Sprite couleurs similaires dans l'image peut maintenir le numéro de couleur faible, idéalement 256couleurs ci-dessousPNG8

est "mobile friendly", ne laissez pas un trop grand vide dans l'image

Sprite. Bien que cela n'affecte pas dans une large mesure la taille du fichier image, cela peut économiser la mémoire consommée par l'agent utilisateur lors de la décompression de l'image dans une carte de pixels. 100 >1000×1000 l'image est 100 dix mille pixels. 31.Ne pas utiliser HTMLZoomer les images

Catégorie : Image

Ne l'utilisez pas simplement parce que vous pouvez définir la largeur et la hauteur dans

HTML Image inutilement grande. Si besoin

73ea57d2f2f5a7daf3c652d28e8be75c

Ensuite, l'image elle-même (mycat.jpg) devrait être

100x100px

au lieu de la réduire à

500x500px

Photos de . 32.Utilisez un petit favicon.ico(

P.S.

Icône Favoris) Catégorie : Photos

favicon.ico

est une image placée dans le répertoire racine du serveur. Cela causera beaucoup de problèmes, car même si vous l'ignorez, le navigateur la demandera automatiquement, il est donc préférable de ne pas le faire. donnez-lui une réponse

404 Not Found . Et tant qu'il est sur le même serveur, un

cookie

sera envoyé à chaque fois qu'il sera demandé. De plus, cette image interférera avec l'ordre de téléchargement, comme dans

IE , lorsque vous demandez des composants supplémentaires dans onload, le favicon sera téléchargé en premier . Afin d'atténuer les lacunes de favicon.ico, vous devez vous assurer :

Assez petit, de préférence inférieur à

1K

Définissez la période de validité appropriée

HTTP

en-tête (vous ne pouvez pas changez-le plus tard si vous souhaitez le renommer), il est généralement plus sûr de fixer la période de validité à quelques mois plus tard. Vous pouvez vous assurer que le changement est connu du navigateur en vérifiant la date de dernière modification du

favicon.ico

. Imagemagick

peut être utilisé pour gérer les petites icônes préférées

Assurez-vous que tous les composants sont plus petits. que 25K

Catégorie

: Mobile

这个限制是因为iPhone不能缓存大于25K的组件，注意这里指的是 未压缩的 大小。这就是为什么缩减内容本身也很重要，因为单纯的gzip可能不够。

 

更多信息请查看Wayne Shea和Tenni Theurer的文章： Performance Research, Part 5: iPhone Cacheability – Making it Stick

 

34.把组件打包到一个复合文档里

 

分类: 移动

 

把各个组件打包成一个像有附件的电子邮件一样的复合文档里，可以用一个HTTP请求获取多个组件（记住一点：HTTP请求是代价高昂的）。用这种方式的时候，要先检查用户代理是否支持（iPhone就不支持）。

 

35.避免图片src属性为空

 

分类: 服务器

 

Image with empty string src 属性是空字符串的图片很常见，主要以两种形式出现：

 

straight HTML

<img src=””>

JavaScript

var img = new Image();img.src = 
“”
;

 

这两种形式都会引起相同的问题：浏览器会向服务器发送另一个请求。

 

IE 向页面所在目录发起一个请求

Safari和Chrome 想当前页面本身发送一个请求

Firefox 3及更早版本与Safari和Chrome处理方式一样，但3.5解决了这个问题 [bug 444931] ，不会再发送请求了

Opera 遇到有空src属性的图片不做任何处理

为什么图片src属性为空不好？

 

意外发送大量的通信量对服务器来说是很伤的，尤其是在每天有几百万访问量页面的时候。

浪费服务器资源去生成一个根本不可能被看到的页面

可能会污染用户数据，如果追踪请求状态，要么通过cookie要么是其它方式，可能会破坏用户数据。即使图片请求并没有返回图片，整个HTTP头部也会被浏览器接受并读取，包括所有的cookie。虽然其余部分会被丢弃，但这可能已经造成破坏了。

La cause première du problème réside dans les différences dans la façon dont les différents navigateurs gèrent l'URI, qui est spécifié dans la RFC 3986 – Les Uniform Resource Identifiers sont clairement définis dans la documentation. Si URI est une chaîne vide, elle sera traitée comme un URI relatif et suivie 5.2Traitement de l'algorithme défini dans la section . La situation réelle est que Firefox, Safari et Chrome sont tous basés sur la documentation. Les spécifications répertoriées dans la section 5.4 gèrent les chaînes vides, mais IE ne les gère pas correctement. On dit que dans l'ancienne version du document de spécification RFC 2396 – Uniform Resource Identifiers (a été remplacé par RFC 3986Abandonné), donc à proprement parler, le navigateur gère correctement l'URI relative. Le problème est que, dans ce cas, la chaîne vide est clairement involontaire (P.S. plutôt qu'un URI relatif). La section

HTML5 4.8.2 concerne a1f02c36ba31691bcfe87b2722de723b tagsrc description de l'attribut, stipule que le navigateur n'enverra plus de requêtes supplémentaires :

L'attribut src doit être présent et doit contenir une URL valide faisant référence à une ressource d'image non interactive, éventuellement animée, qui n'est ni paginée ni scriptée. Si l'URI de base de l'élément est le même que celui du document ' s, alors l'attribut src'la valeur ne doit pas être la chaîne vide.（P.S. " L'attribut src doit exister, et il doit y avoir une URL faisant référence à des ressources d'animation ou d'image non interactives, qui ne peut pas être paginé ou contient un script. Si la base URI de l'élément est la même que l'adresse du document, alors la valeur du src l'attribut ne peut pas être une chaîne vide.")

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!