Points de connaissances liés à l'optimisation des performances des sites Web

Les performances du site Web mentionnées dans cet article font référence à la vitesse de réponse du site Web, qui correspond également à la compréhension que la plupart des gens ont de la performance d'un site Web : un site Web avec un accès rapide a de bonnes performances, au contraire, plus la vitesse d'accès est lente. , plus les performances du site Web sont mauvaises. Les méthodes d'optimisation résumées dans cet article sont des méthodes macroscopiques au niveau de l'ingénierie et n'incluent pas les méthodes microscopiques au niveau de la syntaxe du langage. Par exemple, l'optimisation de la syntaxe de JS et CSS Cette partie affecte également les performances du site Web, mais l'optimisation du langage. le niveau de syntaxe est plus important. Cela dépend du niveau de programmation du développeur.

Quel type de site Web répond rapidement ? En fait, il est facile de penser que plus le site Web charge les ressources rapidement, plus le site Web répond rapidement ; moins le site Web a besoin de ressources pour charger, plus le site Web répond rapidement. Cela correspond aux deux axes majeurs de l’optimisation des performances des sites Web : la mise en cache des ressources et la fusion et la compression des ressources. Une fois que le navigateur a terminé le chargement des ressources, il doit analyser davantage les ressources avant de restituer la page Web finale. Par conséquent, le mécanisme d'analyse du navigateur constitue également une orientation pour l'optimisation des performances du site Web. Diverses méthodes d'optimisation peuvent être classées dans ces trois directions générales.

1. Mise en cache des ressources

1.1 Utilisez CDN

pour séparer les ressources statiques du site Web, telles que le HTML statique, l'image, le style CSS, le script JS, etc. , et déployer les ressources statiques. L'utilisation de CDN peut considérablement accélérer le chargement de ces ressources.

1.2 Utiliser le mécanisme de mise en cache HTTP

La mise en cache HTTP mettra en cache localement les ressources chargées par le navigateur lors du prochain chargement, tant que les ressources mises en cache n'ont pas expiré, les ressources locales peuvent être utilisées. directement, réduisant le nombre de requêtes HTTP et accélérant le chargement des ressources. La méthode spécifique consiste à définir le paramètre Cache-Control dans l'en-tête HTTP. HTTP 1.0 utilise deux paramètres, Pragma et Expires, pour la mise en cache, mais leur utilisation n'est plus recommandée.

2. Fusion et compression des ressources

2.1 Réduire les requêtes HTTP

Utilisez une requête HTTP pour charger un fichier de 10 Mo et divisez le fichier en 10 fichiers de 1 M. Le fichier est chargé en parallèle avec 10 requêtes HTTP. Quelle méthode peut terminer le chargement plus rapidement ? Puisqu’il est mentionné que la réduction des requêtes HTTP peut améliorer la vitesse de réponse du site Web, la conclusion semble être que l’utilisation d’une seule requête HTTP est plus rapide. En fait, la bonne réponse est : pas nécessairement !

J'ai fait une petite expérience : il y a deux fichiers html, index1.html et index2.html, index1.html utilise une balise

• Une analyse approfondie du composant de groupe de liste Bootstrap
• Explication détaillée du currying de la fonction JavaScript
• Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
• Angularjs intègre l'interface utilisateur WeChat (weui)
• Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript