Expérience en optimisation WEB front-end

Avec l'avènement de l'ère WEB2.0, un développement sans précédent a été apporté au réseau. L'expérience utilisateur frontale devient de plus en plus importante pour compenser certaines des lacunes d'une mauvaise interaction utilisateur dans la structure B/S. Cependant, cela entraînera un problème, à savoir que cela augmentera la pression sur le client. Par exemple, en utilisant une grande quantité de code JS, tout le monde saura que le code JS s'exécute sur le client affectera l'efficacité de l'analyse de l'ensemble de la page Web dans le navigateur, ce qui peut également impliquer une augmentation du trafic client, donc si c'est le cas. du point de vue de la charge du serveur ou du point de vue de l'utilisateur, car il est particulièrement important d'optimiser le code client ! Cet article explique principalement les méthodes d'optimisation front-end WEB tant du point de vue interne qu'externe. J'espère que cela pourra donner aux lecteurs une certaine expérience et inspiration.

Tout d’abord, examinons les données de trafic http de http://yahoo.com via un graphique statistique Yahoo :

On constate que depuis la première requête du serveur jusqu'au chargement complet d'une page sur le client, la lecture du code HTML ne représente que 5% du temps de réponse total. Ce résultat s'applique à la grande majorité des sites Web de l'échantillon américain. sur les dix premiers sites Web, un seul en a plus de 5 % mais moins de 20 %. Les 80 % du temps restants sont utilisés pour lire d'autres contenus de la page Web, c'est-à-dire le front-end (le texte original est le front-end). -fin, la signification n'inclut pas le HTML. Le reste du code peut être constitué d'images, de scripts, de flash, de vidéos, de choses diverses). C’est la principale raison pour laquelle nous devrions nous concentrer sur ces éléments pour améliorer la vitesse d’affichage.

Il y a trois raisons principales pour lesquelles vous devriez commencer par le front-end :

1. Il y a ici un potentiel d’amélioration et d’amélioration. Si le volume peut être réduit de moitié, le temps de réponse peut être réduit de 40 %.
2. Améliorer le front-end nécessite moins de temps et de ressources que l’amélioration du back-end. (L'amélioration du backend implique de repenser le plan d'application, le code, de trouver des moyens d'optimiser le code, d'ajouter ou de modifier des configurations matérielles, des bases de données distribuées, etc.)
3. Notre règle d'or est la suivante : optimisez d'abord les performances du front-end, ces éléments consomment 80 % du temps de réponse côté utilisateur.

1. En dehors du code, nous avons les trois méthodes suivantes :

1. Utilisez la technologie CDN

Pour des méthodes spécifiques, vous pouvez les rechercher sur Google. (Le principe général semble être de déterminer la localisation du visiteur et le contenu accédé pour sélectionner le serveur le plus proche pour traiter la demande de l'utilisateur)

2. Ajoutez un en-tête expiré depuis longtemps

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

Les navigateurs utiliseront la mise en cache pour réduire le nombre de requêtes http afin d'accélérer le temps de chargement des pages. Si un long délai d'expiration est ajouté à l'en-tête de la page, le navigateur mettra toujours en cache les éléments de la page.
Cependant, cela entraînera un problème, c'est-à-dire que si les éléments de la page changent, le nom doit être modifié, sinon le client ne s'actualisera pas activement. Dans le groupe de travail Yahoo, le numéro de version est utilisé, par exemple Yahoo_2. 0.6.js

3.Compression Gzip

Gzip est aujourd'hui la méthode de compression la plus populaire et la plus efficace. Elle a été développée par GNU et standardisée par RFC1952.
(Gzip compresse les images, les CSS, les scripts, etc. côté serveur, puis les envoie au navigateur du client pour les décompresser. Cela peut augmenter la vitesse de transmission, mais la pression sur le serveur augmentera. Généralement, c'est plus approprié pour compresser certains éléments.