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 <script> et <span style="font-family: 宋体"></span><style> Même avec le module <span style="font-family: Calibri"></span>gzip<span style="font-family: 宋体"></span> activé, la compression préalable peut réduire la taille de <span style="font-family: Calibri"></span>5 %<span style="font-family: 宋体"></span> ou plus. <span style="font-family: Calibri"></span>JavaScript<span style="font-family: 宋体"></span> et <span style="font-family: Calibri"></span>CSS<span style="font-family: 宋体"></span> sont de plus en plus utilisés, donc la compression du code aura un bon effet. <span style="font-family: Calibri"></span><span style="font-family: 宋体"> </span></p> <p>11.</p>Éviter les redirections<p><strong><span style="font-family: 宋体"></span> </strong></p> <p>Catégorie</p> : <p>Contenu<span style="font-family: 宋体"></span><span style="font-family: 宋体"> </span></p> <p> redirection avec les codes d'état </p>301<p> et <span style="font-family: 宋体"></span>302<span style="font-family: 宋体"></span>, le Voici un en-tête <span style="font-family: Calibri"></span>HTTP<span style="font-family: 宋体"></span> avec <span style="font-family: Calibri"></span>301<span style="font-family: 宋体"></span> code d'état : <span style="font-family: Calibri"></span><span style="font-family: 宋体"> </span></p>HTTP /1.1 301 Déplacé de façon permanente<p></p> Emplacement :<p></p> Type de contenu : text/html<p></p> <p>Le navigateur passera automatiquement à </p> Emplacement <p><span style="font-family: 宋体"></span>URL<span style="font-family: 宋体"></span> spécifiée par le domaine. Toutes les informations nécessaires à la redirection se trouvent dans l'en-tête <span style="font-family: Calibri"></span>HTTP<span style="font-family: 宋体"></span>, et le corps de la réponse est généralement vide. En fait, des en-têtes <span style="font-family: Calibri"></span>HTTP <span style="font-family: 宋体"></span> supplémentaires, tels que <span style="font-family: Calibri"></span>Expires <span style="font-family: 宋体"></span> et <span style="font-family: Calibri"></span>Cache-Control <span style="font-family: 宋体"></span> représentent également la redirection. De plus, il existe d'autres façons de sauter : <span style="font-family: Calibri"></span>refresh<span style="font-family: 宋体"></span> balise méta et <span style="font-family: Calibri"></span>JavaScript<span style="font-family: 宋体"></span>, mais si vous devez faire une redirection, c'est il est préférable d'utiliser le code d'état standard <span style="font-family: Calibri"></span>3xxHTTP<span style="font-family: 宋体"></span>, principalement pour permettre au bouton de retour de fonctionner normalement. <span style="font-family: Calibri"></span><span style="font-family: 宋体"> </span></p> <p>Gardez à l'esprit que les redirections ralentissent l'expérience utilisateur, et que l'insertion de redirections entre l'utilisateur et le document </p>HTML<p> 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 <span style="font-family: 宋体"></span>HTML<span style="font-family: 宋体"></span> n'est pas servi au navigateur. <span style="font-family: Calibri"></span><span style="font-family: 宋体"> </span></p> <p>Il existe une redirection courante qui gaspille énormément de ressources, et les développeurs </p>web<p> n'en sont généralement pas conscients, ce qui est <span style="font-family: 宋体"></span>URL<span style="font-family: 宋体"></span> manque une barre oblique à la fin. Par exemple, accéder à <span style="font-family: Calibri"></span> <span style="font-family: 宋体"></span> renverra une réponse <span style="font-family: Calibri"></span>301<span style="font-family: 宋体"></span> qui redirige vers <span style="font-family: Calibri"></span> <span style="font-family: 宋体"></span> ( Notez la barre oblique à la fin). Dans <span style="font-family: Calibri"></span>Apache<span style="font-family: 宋体"></span> vous pouvez utiliser <span style="font-family: Calibri"></span>Alias ​​​​<span style="font-family: 宋体"></span>, <span style="font-family: Calibri"></span>mod_rewrite <span style="font-family: 宋体"></span> ou <span style="font-family: Calibri"> Commande </span>DirectorySlash <span style="font-family: 宋体"></span> pour annuler les redirections inutiles. <span style="font-family: Calibri"></span><span style="font-family: 宋体"> </span></p> <p><span style="font-family: 宋体">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 </span> Alias ​​​​<span style="font-family: 宋体"> et </span><span style="font-family: Calibri">mod_rewrite </span><span style="font-family: 宋体">, à 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 </span><span style="font-family: Calibri">CNAME</span><span style="font-family: 宋体"> (créer un enregistrement </span><span style="font-family: Calibri">DNS</span><span style="font-family: 宋体"> pointant vers un autre nom de domaine comme un alias) combiné avec la directive </span><span style="font-family: Calibri">Alias ​​</span><span style="font-family: 宋体"> ou la directive </span><span style="font-family: Calibri">mod_rewrite </span><span style="font-family: 宋体">. </span></p> <p> </p> <p><strong>12.<span style="font-family: 宋体">Supprimer les scripts en double</span></strong></p> <p> </p> <p><span style="font-family: 宋体">Catégorie</span> : javascript</p> <p> </p> <p><span style="font-family: 宋体">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 </span>10<span style="font-family: 宋体">grands</span><span style="font-family: Calibri">sites Web</span><span style="font-family: 宋体"> aux États-Unis, il a été constaté que seuls </span><span style="font-family: Calibri">2</span><span style="font-family: 宋体"> 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 </span><span style="font-family: Calibri">HTTP</span><span style="font-family: 宋体"> inutiles, exécutent du code </span><span style="font-family: Calibri">JavaScript</span><span style="font-family: 宋体"> inutile et ont un impact sur les performances de la page. </span></p> <p> </p> <p>IE<span style="font-family: 宋体"> rend les requêtes </span><span style="font-family: Calibri">HTTP</span><span style="font-family: 宋体"> inutiles, tandis que </span><span style="font-family: Calibri">Firefox</span> <span style="font-family: 宋体"> Non. Dans </span><span style="font-family: Calibri">IE</span><span style="font-family: 宋体">, si un script externe non cacheable est introduit deux fois par la page, il générera deux </span><span style="font-family: Calibri">HTTP</span>Demande. Même si le script peut être mis en cache, il générera des requêtes <span style="font-family: 宋体"></span>HTTP<span style="font-family: Calibri"></span> supplémentaires lorsque l'utilisateur rechargera la page. <span style="font-family: 宋体"></span></p> <p></p> <p> En plus de générer des requêtes <span style="font-family: 宋体">HTTP</span> 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 <span style="font-family: 宋体"></span>JavaScript<span style="font-family: Calibri"> redondant sera exécuté dans </span><span style="font-family: 宋体">Firefox</span><span style="font-family: Calibri"> et </span><span style="font-family: 宋体">IE</span> <span style="font-family: Calibri"> ></span>Code. <span style="font-family: 宋体"></span></p> <p></p> <p>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 <span style="font-family: 宋体"></span>SCRIPT<span style="font-family: 宋体"></span> dans la page <span style="font-family: Calibri">HTML</span> : <span style="font-family: 宋体"></span></p> <p></p> <script type="text/javascript" src="menu_1.0.17.js?1.1.11"></script>

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 ETags< par défaut de Apache 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 XML<🎜 asynchrones. >La 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 Ajax< afin de trouver des e-mails correspondant à leurs critères de recherche. . 🎜>Demandez 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

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

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<🎜 Éléments > (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.