Auteur | vagues dans la navigation de plaisance

Zebian | Guo Rui

Internet il y a un principe bien connu de 8 secondes. Lorsque les utilisateurs accèdent à la page Web, si le temps de 8 secondes se sentira impatient, si vous prenez trop de temps à la charge, ils donneront l'accès . La plupart des utilisateurs veulent pouvoir à la page complète chargée en 2 secondes. En fait, plus d'une seconde par temps de chargement, vous serez perdu 7% des utilisateurs. 8 secondes 8 secondes ne sont pas précis, juste montre l'importance du temps de chargement des développeurs de sites Web. Comment pouvons-nous optimiser les performances de la page, augmenter la vitesse de chargement de la page?

Cet article est le principal problème à discuter, cependant, est un problème d'optimisation de la performance globale, il n'y a pas de réponse standard, vous voulez que tout indiqué, il est pas facile. Cet article se concentre sur certains des éléments de base, ce qui suit est mon résumé de l'optimisation des performances approche commune.

La compression et la consolidation des ressources

Ces aspects comprennent: compression html, css compresse, js compression et fichier fusion et confusion .

Les ressources peuvent être retirés du fichier compressé dans les caractères supplémentaires, tels que des retours chariot, des espaces. Vous écrivez du code dans l'éditeur lorsque l'indentation et les commentaires seront utilisés, ces méthodes seront sans aucun doute votre code concis et facile à lire, mais ils ajoutent aussi octets supplémentaires dans le document.

compression 1.html

compression code html est de compresser ces sens dans un fichier texte, mais les caractères ne sont pas affichés en HTML, y compris les espaces, les onglets, les sauts de ligne et ainsi de suite, il y a d'autres personnages importants, comme un commentaire HTML peut également être comprimé.

Comment la compression html:

• Utiliser les sites en ligne est comprimé (généralement pas au cours du développement);
• nodejs fournit des outils html-minifier;
• modèle backend rendu la compression du moteur.

compression de code 2.css

compression de code CSS est simplement le code invalide et suppression css fusion sémantique.

Comment css compress:

• Utiliser les sites en ligne est comprimé (généralement pas au cours du développement);
• Html-minifier aide de l'outil;
• Utilisez le nettoyage à la compression css css.

compression 3.js et confusion

js compression et la confusion qui comprend les sections suivantes:

• Supprimer des caractères non valides;
• Hors le commentaire;
• Optimisation et réduction des codes sémantiques;
• Code de protection (logique de code devient source de confusion, ce qui réduit la lisibilité du code, ce qui est très important).

Comment la compression de js et de la confusion:

• Utiliser les sites en ligne est comprimé (généralement pas au cours du développement);
• Html-minifier aide de l'outil;
• Utilisez uglifyjs2 de compression js.

En fait, la compression de compression et css confusion le taux de compression html est beaucoup gains de plus, alors que le code css code html et js beaucoup plus que le code par compression et js réduction css de compression apportant le trafic sera très évident. Donc, pour les grandes entreprises, html compression dispensable, mais js compression et la compression et css confusion doit avoir!

4. Fusion de fichiers

Comme on peut le voir sur la figure ne se confond pas la demande présente les inconvénients suivants:

• la demande d'insertion, une augmentation du retard de N-1 entre les fichiers et réseau;
• Affecté par problème de perte de paquets est plus grave;
• le mode keep-alive peut apparaître la situation, via un serveur proxy peut être déconnecté, ce qui signifie que l'Etat ne peut pas garder le keep-alive.

Js et la compression fusion peut réduire le css nombre de site Web demande http, mais le fichier combiné peut conduire à des problèmes: Le premier rendu de l'écran et la mise en cache des échecs .

Alors, comment faire face à ce problème? - la consolidation de la bibliothèque publique et de fusionner les différentes pages.

Comment les documents de fusion:

• Utilisez le site en ligne pour la fusion de fichiers;
• Utilisez la fusion de fichiers de mise en uvre (engouffreur, fis3).

code non-noyau est chargé de manière asynchrone chargé façon asynchrone

1, le chargement asynchrone de façon

le chargement asynchrone de trois façons --async et defer, pour créer un script dynamique.

mode async

• attribut async est de nouveaux attributs HTML5, vous avez besoin Chrome, FireFox, IE9 + support du navigateur;
• attribut async Précise Une fois le script est disponible, l'exécution asynchrone;
• attribut async applique uniquement à un script externe;
• Si plus d'un script, la méthode de script ne garantit pas l'ordre d'exécution.

< scénario type = "Text / javascript" src = "Xxx.js" async = "Async" > < / script >

façon defer

• Compatible avec tous les navigateurs;
• spécifie l'attribut Différer si à l'exécution du script retardée jusqu'à ce que la page se charge à ce jour;
• Si une pluralité de scripts, la méthode peut différer script fourni pour assurer que toutes les propriétés soient effectuées de manière séquentielle;
• Si le script ne modifie pas le contenu du document, les attributs de Defer peuvent être ajoutés à la balise de script, afin d'accélérer le traitement du document.

créer une balise de script dynamique

Avant de ne pas défini reportons et async, le chargement asynchrone est une manière dynamique pour créer un script, assurez-vous que la page est chargée et balise de script dans le DOM par la méthode window.onload.

Code spécifique, comme suit:

fonction addScriptTag (src) { var script = document.createElement ( 'Script' ); script.setAttribute ( « Tapez » , "Text / javascript" ); script.src = src; document.body.appendChild (script); } window.onload = fonction () { addScriptTag ( "js / index.js" ); }

2, le chargement asynchrone de différence

1) reporter HTML est exécutée uniquement après l'achèvement de l'analyse, si une pluralité d'réalisée séquentiellement dans l'ordre de chargement;

2) asynchrone est exécutée immédiatement après l'achèvement du chargement, si une pluralité d'ordre de chargement indépendant et l'ordre d'exécution;

Lorsque la ligne bleue représente la lecture du réseau, la ligne rouge représente le temps d'exécution, peut-être pour tous les scripts, la ligne verte représente l'analyse syntaxique HTML.

Utilisez le cache de votre navigateur

Pour les applications Web, la page en cache est d'améliorer les performances du serveur tout en réduisant la pression de l'arme.

Le type de cache du navigateur

1. forte tampon: demande d'envoi vers le serveur, la ressource est lue directement à partir du cache, la console de chrome d'option de réseau peut voir que la requête retourne un code d'état 200, et la taille d'affichage de la mémoire cache de disque ou à partir de la mémoire cache;

tête connexe:

Expire  : En-tête de réponse dans le délai d'expiration, le navigateur charge la ressource de nouveau si à ce moment arrive à expiration, le cache a frappé fort. Il est un temps absolu dans la chaîne horaire GMT, par exemple Expire: Jeu 21 janvier 201823:39:02 GMT

Cache-Control  : Ceci est un temps relatif, lorsque la configuration du cache, en secondes, représente une valeur numérique. Lorsque la valeur est définie sur max-age = 300, représente moins de 5 minutes de cette demande de retourner l'heure (le navigateur sera enregistré) pour charger à nouveau la ressource, il frappera la forte cache. Par exemple Cache-Control: max-age = 300,

bref résumé : En fait, ces deux très différentes, la différence est que le produit est http1.0 de ECHOUE Cache-Control est le produit de HTTP1.1, Les deux existent, la priorité Cache-Control que Expire ; Dans certains environnements ne prennent pas en charge HTTP1.1, Expire jouera utile. En fait, il est produit à jour Expires ce stade de son existence que d'une compatibilité écrite. Cache base solide pour déterminer si le cache de dépasser un certain temps ou si une certaine période de temps, sans tenir compte de savoir si le fichier côté serveur a été mis à jour, ce qui peut conduire les derniers fichiers de contenu ne sont pas chargés sur le côté serveur, Comment savons-nous que le contenu côté serveur que si le client a mis à jour il est arrivé ? À ce stade, nous devons négocier la politique de mise en cache.

2. négociation cache: l'envoi d'une requête au serveur, le serveur détermine si un cache frappé en-tête de demande de négociation en fonction de certains paramètres de la requête, et si un coup, le code d'état 304 est retourné et apporter un nouvel en-tête de réponse indique au navigateur de lire à partir du cache prendre des ressources, des consultations supplémentaires en cache doit être utilisé avec le cache de contrôle.

tête connexe:

Last-Modified et If-Modified-Since : Lorsque la première demande de ressources, le serveur fournira des ressources au client, la dernière fois que la ressource sera remplacée par: formulaire Ajouter de retour « GMT Last-Modified » ensemble sur un en-tête de l'entité cliente.

dernier - modifié : ven , 22 juillet 201601 : 47 : 00 GMT

Le client sera marqué comme une ressource sur ces informations, la prochaine fois à nouveau la demande, sera l'information incluse dans le paquet de demande ensemble pour amener le serveur à faire la vérification, réviser la ressource sur le serveur si la valeur du temps est le même délai de livraison et il indique que la ressource n'a pas été modifié, retour direct code d'état 304, est vide , Permettant ainsi de réduire la quantité de données transférées. Si les deux sont incompatibles temps, le serveur renvoie la ressource et renvoie un code d'état 200, et comme lorsque la première demande.

Cela garantit que le client de ne pas émettre des ressources en double, mais aussi de veiller à ce que lorsque le serveur change, le client peut obtenir les dernières ressources. Une réponse 304 est généralement beaucoup plus petite qu'une ressource statique, économisant ainsi la bande passante réseau.

Cependant, modifié en dernier, il y a quelques inconvénients:

. certain serveur ne peut pas obtenir un temps de modification précise;

. temps de modification de fichier a été modifié, mais le contenu du fichier n'a pas changé;

Puisque, selon la date de modification du fichier pour déterminer si le cache est encore insuffisant, il peut être utilisé directement pour déterminer si la politique de cache basée sur la modification du contenu du fichier? --ETag et If-None-Match

ETag et If-None-Match : Etag est la dernière fois que la ressource est chargée, le serveur renvoie l'en-tête de réponse, est un identifiant unique pour la ressource, tant que le changement des ressources, eTag se régénérer. La prochaine fois que le navigateur envoie une requête pour charger la ressource sur le serveur, sera retourné une fois Etag dans la valeur d'en-tête de la demande dans le If-None-Match, seul le serveur a besoin de comparer le client If-None-Match est venu avec son propre serveur que ce soit sur la ressource ETAG cohérente, il peut être une bonne ressource pour déterminer si ont été modifiés les termes du client relative.

Si le serveur ne correspond pas à la ETag, retournez alors directement à l'emballage sous forme de GET régulière 200 nouvelles ressources (y compris bien sûr la nouvelle ETag) au client, si ETag est compatible, puis retourné informer directement le client 304 directement vous pouvez utiliser le cache local.

Comparaison entre : Tout d'abord la précision, Etag supérieure de dernière modification . temps de dernière modification en quelques secondes, si un fichier est modifié à plusieurs reprises dans une seconde, puis leur fait la dernière modification ne se reflète pas les changements, mais chaque fois Etag changé pour assurer l'exactitude, si elle est l'équilibrage de charge serveurs, chaque serveur génère la dernière modification est également incompatible. Dans la deuxième performance, Etag inférieure à la dernière modification , Dernière modification seulement après tout le temps d'enregistrement, et nécessite un serveur Etag une valeur de hachage calculée par l'algorithme. Sur la troisième priorité, les serveurs prioritaires vérifier Etag

mécanisme de mise en cache

Contraint de négocier la priorité de cache cache, si le cache forcé (Expires et Cache-Control) entrée en vigueur de l'utilisation directe du cache, si l'entrée de cache en vigueur des consultations (dernière modification / If-Modified-Since et Etag / If-None-Match) serveur cache de consultation pour décider d'utiliser le cache, le cache si la négociation échoue, l'échec de la demande au nom du cache, récupérer les résultats de la requête, puis stocké dans le cache du navigateur, 304 est retourné en effet, continuer à utiliser le cache .

Le processus principal est la suivante:

L'impact du comportement des utilisateurs sur le cache du navigateur

• barre d'adresse d'accès, des liens à sauter est un comportement utilisateur normal, déclenche le mécanisme de cache du navigateur;
• F5 navigateur de rafraîchissement fourni max-age = 0, sauter cache forte détermination, la détermination de la négocie cache;
• ctrl + F5 Actualiser, sauter le cache et fort cache de négociation, en tirant directement les ressources du serveur.

Utilisez CDN

Grande applications Web poursuite de la vitesse et ne pas se limiter à simplement en utilisant le cache du navigateur, le cache du navigateur comme toujours juste pour améliorer la vitesse d'accès au secondaire, pour accélérer la première visite, nous avons besoin d'optimiser le niveau du réseau, des moyens les plus courants est accélération CDN (content Delivery Network, le réseau de distribution de contenu).

Par la mise en cache des ressources statiques (par exemple, javascript, css, images, etc.) de l'utilisateur à la fin du nud CDN aux mêmes opérateurs de réseaux, non seulement d'améliorer la vitesse d'accès de l'utilisateur, mais aussi d'économiser la consommation de bande passante du serveur, réduisez la charge.

l'accélération CDN est comment le faire?

En fait, cela est un des fournisseurs de services CDN dans toutes les provinces du pays pour déployer les nuds de calcul, cache CDN pour accélérer le contenu du site au bord du réseau, l'utilisateur aura accès à différentes zones de leurs propres nuds CDN sur la même ligne de réseau récemment, lorsque la demande atteint nud CDN après que le nud déterminera leur cache contenu est valide, si elle est valide, la réponse immédiate est mis en mémoire cache le contenu à l'utilisateur, accélérant ainsi le temps de réponse. Si le cache nud CDN échoue, il sera basé sur la configuration du service à notre source de contenu pour les dernières ressources du serveur en réponse à l'utilisateur et le contenu mis en cache en réponse à l'accès ultérieur de l'utilisateur.

Ainsi, dans une région aussi longtemps en tant qu'utilisateur de ressources de charge, mettre en place un cache CDN, les autres utilisateurs suivi de la région peuvent bénéficier de cette .

pré-résolution DNS

Une autre ressource est des techniques d'optimisation des performances préchargées, nous pouvons utiliser la technologie pour certaines ressources à l'avance pour informer le navigateur peut être utilisé à l'avenir. Pour dire le navigateur via futur pré-résolution DNS, nous pouvons obtenir des ressources à partir d'une URL particulière, lorsque le navigateur pour réellement utiliser une ressource dans le domaine la résolution DNS peut être complétée le plus rapidement possible. Par exemple, dans l'avenir, nous pouvons obtenir une image ou des ressources audio à partir example.com, vous pouvez ajouter la balise suivante en haut du document:

< lien rel = "Dns-prefetch" href = "//Example.com" >

Lorsque nous demandons une ressource de l'URL, vous ne avez plus besoin d'attendre que le processus de résolution DNS. Cette technique est particulièrement utile pour l'utilisation des ressources tiers. Une simple ligne de code peut indiquer au navigateur qui est pré-résolution DNS compatible, ce qui signifie que lorsque le navigateur demande une véritable ressource dans ce domaine, la résolution DNS est terminée, économisant ainsi un temps précieux.

Notez également que, Le navigateur permettra automatiquement une balise href DNS préchargement, de sorte que le nom de domaine contient une étiquette n'a pas besoin de configurer manuellement le lien dans la tête. Mais cela ne fonctionne pas en HTTPS, méta besoin de forcer la fonction d'ouverture . La raison de cette limitation est d'empêcher que des tiers puissent selon DNS préchargement déduisent afficher le nom d'hôte HTTPS de liens hypertextes page.

La phrase suivante est une action obligatoire pour ouvrir une résolution de nom de l'étiquette:

< méta http-equiv = "X-dns-prefetch-commande" content = "On" > Auteur: des vagues dans la navigation de plaisance, diplômé, axé sur la fin de l'avant, les opérations de fin d'avant ont un artisan numéro personnel public, pour créer une série d'articles de haute qualité pour les ingénieurs de niveau junior pour absorber rapidement.