Contexte du problème
Après avoir développé une page, comment rendre la page plus rapide et meilleure est ce qui distingue le niveau technique d'un programmeur et un facteur important indicateur du champ de vision. Ainsi lors de l’entretien, l’intervieweur vous posera toujours une question, comment optimiser les performances ?
Qu'est-ce que l'optimisation des performances ?
D'un point de vue front-end, l'optimisation des performances peut être divisée en deux directions. Du point de vue de l'utilisateur, l'un est que la page se charge rapidement et l'autre est qu'elle est fluide à utiliser. Par conséquent, nous pouvons explorer l’optimisation des performances dans deux directions : le temps de chargement des pages et l’efficacité de leur exécution.
(Partage gratuit du didacticiel vidéo d'apprentissage : Tutoriel vidéo php)
Combien de temps faut-il entre l'ouverture du navigateur et la fin du rendu de la page
Analyse du navigateur->Cache de requête->Requête DNS->Établir le lien->Le serveur traite la requête->Le serveur envoie une réponse->Le client reçoit la page-> Analyser HTML-> Construire l'arborescence de rendu->Commencer à afficher le contenu (temps d'écran blanc)->Le contenu du premier écran est chargé (temps de premier écran)->Interactif utilisateur (DOMContentLoaded)->Chargement terminé (chargement), si nous voulons charger Pour optimiser le temps, nous devons réfléchir et résumer chaque étape ici, et éviter de les reconstituer un peu ici et là.
Surveillance du temps de chargement des pages
Avant d'optimiser ces liens, nous devons savoir combien de temps est passé à surveiller ces liens.
Vous pouvez obtenir de nombreuses données liées au chargement des pages. Les plus couramment utilisés sont
Temps de résolution DNS : domainLookupEnd - domainLookupStart
Temps d'établissement de la connexion TCP : connectEnd - connectStart
Temps d'écran blanc : r
esponseStart - navigationStartdom
Durée de réalisation du rendu : domContentLoadedEventEnd - navigationStart
Durée de chargement de la page : loadEventEnd - navigationStart
Si vous n'utilisez pas cette API, vous pouvez utiliser l'heure renvoyée par le rendu du serveur, ou sautez via le routage SPA L'heure est le point de départ et les événements tels que domContentLoaded et load sont enregistrés comme point final. Ou accédez directement à Google Analytics.
Points clés pour l'optimisation de la partie serveur
La partie backend peut optimiser le cache, le temps de requête DNS, le temps de liaison, le temps de traitement des demandes, le temps de réponse, etc.
Le temps de requête DNS peut être optimisé à l'aide du préchargement httpdns ou DNS, de la convergence des noms de domaine et d'autres moyens.
L'établissement d'une connexion se concentre sur les connexions longues et la réutilisation des liens, le maintien en vie, les interrogations longues, le http-straming, le websocket ou d'autres protocoles que vous avez écrits vous-même. Il est préférable d'utiliser http2 directement. Afin d'optimiser le processus de liaison, le front-end doit également utiliser le CDN, les images de sprite, la fusion de code et d'autres méthodes pour les ressources.
De nombreux points peuvent être optimisés dans le traitement des requêtes du serveur. Il convient de noter que lorsque le terminal mobile accède à la page PC et doit accéder à la page mobile, utilisez le saut 302 côté serveur et faites-le. ne le faites pas sur le front-end. Il existe également la possibilité d'activer hsts, ce qui oblige le navigateur à utiliser https pour les visites ultérieures, réduisant ainsi les sauts http inutiles vers https. Cela peut également empêcher les attaques de suppression SSL et améliorer la sécurité.
Lorsque le serveur envoie une réponse, vous pouvez utiliser Transfer-Encoding=chunked pour renvoyer des réponses plusieurs fois. Pour des opérations spécifiques, interrogez bigpipe. Il existe également des moyens de réduire la taille des cookies, etc.
Articles et tutoriels connexes recommandés : Tutoriel php
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!