[vue] À propos de l'optimisation des performances

Préface

La partie optimisation des performances examine principalement la compréhension du programmeur de l'optimisation des performances des sites Web.
Comment faire du bon travail dans l'optimisation des performances, quelles opérations poseront des problèmes d'optimisation des performances, quels sont les indicateurs d'optimisation des performances, etc., tous méritent l'attention du programmeur

1. Compréhension de la reconstruction

Le refactoring de site Web fait référence au comportement consistant à simplifier la structure, à ajouter de la lisibilité et à maintenir la cohérence sur le front-end du site Web sans changer le comportement externe. En d'autres termes, sans changer l'interface utilisateur, optimisez le site Web pour maintenir une interface utilisateur cohérente tout en se développant.

Pour les sites Web traditionnels, la refactorisation comprend généralement les aspects suivants:

• Changez la disposition du tableau en DIV + CSS.
• Rendez le frontal du site Web compatible avec les navigateurs modernes.
• Optimiser la plate-forme mobile.
• Optimiser pour les moteurs de recherche.

La refactorisation approfondie du site Web doit prendre en compte les aspects suivants:

• Réduire le couplage entre les codes
• Gardez le code flexible.
• Écrivez le code en stricte conformité avec les spécifications.
• Concevez une API extensible.
• Remplacez l'ancien framework et le langage (tel que VB)
• Améliorez l'expérience utilisateur.
• Optimisez la vitesse.
• Compressez les ressources frontales telles que JavaScript, CSS et images (généralement résolues par le serveur).
• Optimiser les performances du programme (telles que la lecture et l'écriture de données).
• Utilisez CDN pour accélérer le chargement des ressources.
• Optimiser le DOM JavaScript.
• Fichiers cache du serveur HTTP.

2. S'il y a un grand nombre d'images sur une page (grand site de commerce électronique) et que la page se charge très lentement, quelles méthodes peut-on utiliser pour optimiser le chargement de ces images pour améliorer l'expérience utilisateur?

• Pour le chargement paresseux des images, vous pouvez ajouter un événement de barre de défilement à la page pour déterminer si l'image se trouve dans la zone visible ou est sur le point d'entrer dans la zone visible, et charger en premier.

• S'il s'agit d'un diaporama, d'un fichier d'album, etc., la technologie de préchargement d'image peut être utilisée, et l'image précédente et l'image suivante de l'image actuellement affichée sont téléchargées en premier.

• Si l'image est une image CSS, vous pouvez utiliser CSS Sprite, SVG sprite, Icon font, Base64 et d'autres technologies.

• Si l'image est trop grande, vous pouvez utiliser une image spécialement codée. Lors du chargement, une toute petite vignette sera chargée en premier pour améliorer l'expérience utilisateur. Par exemple, en utilisant l'image au format Webp de Google, la taille de l'image au format WebP est 40% plus petite que l'image au format JPEG avec la même qualité.

• Si la zone d'affichage de l'image est plus petite que la taille réelle de l'image, l'image doit être compressée côté serveur en fonction des besoins de l'entreprise. Une fois l'image compressée, la taille de l'image sera la même que l'image affichée.

3. Problèmes d'optimisation des performances.

Les performances peuvent être optimisées aux niveaux suivants:

• Utilisation du cache: mettez en cache Ajax, utilisez CDN , cache de fichiers JavaScript et CSS externe, ajoutez l'en- tête Expires , configurez Etag côté serveur , réduisez les recherches DNS, etc.
• Nombre de demandes: combinez des styles et des scripts, utilisez des sprites d'image CSS, chargez des ressources d'image en dehors du premier écran initial à la demande et retardez le chargement des ressources statiques.
• Demande de bande passante: Compressez les fichiers, ouvrez GZIP.
• Code CSS: évitez d'utiliser des expressions CSS, des sélecteurs avancés et des sélecteurs génériques.
• Code JavaScript: utilisez des tables de hachage pour optimiser la recherche, utilisez moins de variables globales, utilisez innerHTML au lieu d'opérations DOM, réduisez le nombre d'opérations DOM, optimisez les performances JavaScript, utilisez setTimeout pour éviter la perte de réponse de page, mettez en cache les résultats de la recherche de nœuds DOM, évitez d'utiliser avec (avec créera votre propre portée, augmentez la longueur de la chaîne de portées), fusionnez plusieurs déclarations de variables.
• Code HTML: évitez les attributs src vides tels que les images et les iFrames. Si l'attribut src est vide, la page actuelle sera rechargée, ce qui affectera la vitesse et l'efficacité. Essayez d'éviter d'écrire l'attribut Style dans la balise HTML.

4. Comment optimiser les performances du terminal mobile?

• Essayez d'utiliser des animations CSS3 et activez l'accélération matérielle.
• Utilisez des événements tactiles plutôt que des événements de clic, le cas échéant.
• Évitez d'utiliser des effets d'ombre dégradés CSS3.
• Vous pouvez utiliser transform: translateZ (0) pour activer l'accélération matérielle.
• N'abusez pas de Float. Float a une quantité relativement importante de calculs lors du rendu, alors utilisez-le le moins possible.
• N'abusez pas des polices Web. Les polices Web doivent être téléchargées, analysées et redessinées sur la page en cours, alors utilisez-les le moins possible.
• Utilisez raisonnablement l'animation requestAnimation Frame au lieu de setTimeout.
• Utilisez correctement les propriétés CSS (transitions CSS3, transformations CSS3 3D, opacité, canevas, WebGL , vidéo) pour déclencher le rendu GPU. Une utilisation excessive augmentera la consommation électrique du téléphone.

5. Comment optimiser les fichiers du site Internet?

Les fichiers peuvent être fusionnés et compressés pour minimiser les fichiers; CDN peut être utilisé pour héberger des fichiers, permettant aux utilisateurs d'y accéder plus rapidement; plusieurs noms de domaine peuvent être utilisés pour mettre en cache des fichiers statiques.

Six, plusieurs façons de raccourcir le temps de chargement de la page.

La méthode spécifique est la suivante.

(1) Optimiser les images

(2) Choisissez le format de stockage d'image (par exemple, GIF fournit moins de couleurs, ce qui peut être utilisé dans certains endroits où les exigences de couleur ne sont pas élevées)

(3) Optimiser le CSS (compresser et fusionner le CSS)

(4) Ajouter une barre oblique après l'URL

(5) Marquez la hauteur et la largeur de l'image (si le navigateur ne trouve pas ces deux paramètres, il doit calculer la taille lors du téléchargement de l'image. S'il y a beaucoup d'images, le navigateur doit constamment ajuster la page. Ce n'est pas n'affecte que la vitesse, mais affecte également l'expérience de navigation Lorsque le navigateur connaît les paramètres de hauteur et de largeur, même si l'image ne peut pas être affichée temporairement, l'espace pour l'image sera libéré sur la page, puis continuer à charger le contenu suivant , optimisant ainsi le temps de chargement et améliorant l'expérience de navigation).

Septièmement, améliorer les performances frontales du site Web

La carte de sprite fusionne pour réduire les requêtes HTTP; compresser les fichiers HTML, CSS et JavaScript; utiliser CDN pour héberger des fichiers statiques; utiliser le cache de stockage local et le cache d'application Mainfest.

8. Méthodes pour optimiser les performances

(1) Réduisez le nombre de requêtes HTTP, contrôlez la taille du sprite CSS, du code source JavaScript et CSS et des images, et utilisez la page Web Gzip, l'hébergement CDN, la mise en cache de données et le serveur d'images

(2) Grâce au modèle JavaScript et aux données du front-end, réduisez le gaspillage de bande passante causé par les balises HTML, enregistrez les résultats de la requête Ajax avec des variables dans le front-end, et chaque fois que les variables locales sont manipulées, aucune demande n'est requise, ce qui réduit le nombre de demandes.

(3) Utilisez innerHTML au lieu d'opérations DOM pour réduire le nombre d'opérations DOM et optimiser les performances JavaScript.

(4) Lorsque de nombreux styles doivent être définis, définissez le nom de classe au lieu d'utiliser directement le style.

(5) Utilisez moins de variables globales, mettez en cache les résultats de la recherche de nœuds DOM et réduisez les opérations de lecture d'E / S

(6) Évitez d'utiliser des expressions CSS, également appelées propriétés dynamiques,

(7) Préchargez l'image, placez la feuille de style en haut, placez le script en bas et ajoutez un horodatage.

(8) Évitez d'utiliser des tableaux dans la mise en page principale de la page. Les tableaux ne seront pas affichés tant que le contenu n'est pas complètement téléchargé. La vitesse d'affichage est plus lente que la mise en page DIV + CSS.

Neuf, listez quelques méthodes d'optimisation des performances Web

(1) Compresser le code source et les images (JavaScript utilise une compression obscurcie, CSS effectue une compression ordinaire, les images JPG sont compressées à 50% ~ 70% selon la qualité spécifique, et les images PNG sont compressées de 24 couleurs à 8 couleurs pour supprimer certains PNG informations de format, etc.).

(2) Choisissez le format d'image approprié (le nombre de couleurs est principalement au format JPG, mais rarement au format PNG. Si le serveur peut juger que le navigateur prend en charge WebP, utilisez le format WebP ou SVG).

(3) Consolider les ressources statiques (réduire les requêtes HTTP)

(4) Combinez plusieurs CSS en un seul CSS et combinez des images en images Sprite.

(5) Activez la compression Gzip côté serveur (très efficace pour les ressources texte).

(6) Utilisez CDN (cache partagé pour les bibliothèques publiques).

(7) Prolongez la durée du cache des ressources statiques.

(8) Mettez CSS en tête de page et mettez du code JavaScript en bas de page (afin d'éviter de bloquer le rendu de la page et de faire apparaître la page vierge pendant longtemps)

10. Pour CSS, comment optimiser les performances?

(1) Utilisez correctement l'attribut d'affichage, l'attribut d'affichage affectera le rendu de la page, faites donc attention aux aspects suivants.

	display:inline后不应该再使用 width、 height、 margin、 padding和float 。
	display:inline- block后不应该再使用 float。
	display:block后不应该再使用 vertical-align。 
	display:table后不应该再使用 margin或者float。

(2) N'abusez pas du flotteur.

(3) Ne déclarez pas trop de taille de police.

(4) Lorsque la valeur est 0, aucune unité n'est requise.

(5) Normaliser divers préfixes de navigateur et prêter attention aux aspects suivants.

	浏览器无前缀应放在最后。
	CSS动画只用（ -webkit-无前缀）两种即可。
	其他前缀包括 -webkit-、-moz-、-ms-、无前缀（ Opera浏览器改用 blink内核，所以-0-被淘汰）

(6) Évitez de faire ressembler les sélecteurs à des expressions régulières. Les sélecteurs avancés ne sont pas faciles à lire et prennent beaucoup de temps à exécuter.

(7) Essayez d'utiliser des sélecteurs d'id et de classe pour définir des styles (évitez d'utiliser l'attribut style pour définir des styles en ligne)

(8) Essayez d'utiliser l'animation CSS3.

(9) Réduisez le redessinage et la redistribution.

11. Comment optimiser les performances pour HTML?

(1) Pour le chargement de ressources, le chargement à la demande et le chargement asynchrone

(2) La ressource chargée pour la première fois ne dépasse pas 1024 Ko, c'est-à-dire que plus elle est petite, mieux c'est.

(3) Compressez les fichiers HTML, CSS et JavaScript.

(4) Réduisez les nœuds DOM.

(5) Évitez les src vides (les src vides entraîneront des requêtes invalides dans certains navigateurs).

(6) Évitez les erreurs de demande 30 *, 40 *, 50 *

(7) Ajoutez Favicon.ico. Si l'icône ico n'est pas définie, l'icône par défaut provoquera l'envoi d'une requête 404 ou 500.

12. Comment optimiser les performances de JavaScript?

La méthode spécifique est la suivante.

(1) Sélection et calcul du cache DOM.

(2) Essayez d'utiliser le mode de délégation d'événements pour éviter les événements de liaison par lots.

(3) Utilisez touchstart et touchend au lieu de cliquer.

(4) Utilisez raisonnablement l'animation requestAnimationFrame au lieu de setTimeOut.

(5) Utilisez l'animation de canevas de manière appropriée.

(6) Essayez d'éviter de modifier la vue dans les événements à haute fréquence (tels que les événements TouchMove, Scroll), ce qui entraînera plusieurs rendus.

13. Comment optimiser le côté serveur?

La méthode spécifique est la suivante.

(1) Activez la compression Gzip.

(2) Prolongez la durée du cache des ressources, définissez raisonnablement l'heure d'expiration de la ressource et définissez l'heure d'expiration de certaines ressources statiques qui ne sont pas mises à jour pendant une longue période.

(3) Réduisez la taille des informations d'en-tête de cookie. Plus les informations d'en-tête sont volumineuses, plus la vitesse de transmission des ressources est lente.

(4) Les images ou les fichiers CSS et JavaScript peuvent être accélérés par CDN.

14. Comment optimiser l'interface côté serveur?

La méthode spécifique est la suivante.

(1) Fusion d'interface: si une page doit demander plus de deux interfaces de données, il est recommandé de les fusionner en une seule pour réduire le nombre de requêtes HTTP.

(2) Réduisez la quantité de données: supprimez les données inutiles des données renvoyées par l'interface.

(3) Données mises en cache: après la première demande de chargement, les données sont mises en cache; pour les non-premières demandes, les dernières données demandées sont utilisées en premier, ce qui peut améliorer la vitesse de réponse des non-premières demandes.

15. Comment optimiser l'exécution des scripts?

Une mauvaise gestion des scripts bloquera le chargement et le rendu de la page, soyez donc prudent lorsque vous l'utilisez.

(1) Écrivez du CSS en tête de page, et écrivez des programmes JavaScript en fin de page ou dans des opérations asynchrones.

(2) Évitez les src vides pour les images et les iFrames, etc. Un src vide rechargera la page actuelle, affectant la vitesse et l'efficacité.

(3) Essayez d'éviter de réinitialiser la taille de l'image. La réinitialisation de la taille de l'image fait référence à la réinitialisation de la taille de l'image plusieurs fois dans la page, les fichiers CSS, JavaScript, etc.

(4) Essayez d'éviter d'utiliser DataURL pour les images. Les images DataURL n'utilisent pas l'algorithme de compression d'image, le fichier devient plus volumineux et doit être rendu après le décodage, le chargement est lent et prend du temps.

16. Comment optimiser le rendu?

La méthode spécifique est la suivante.

(1) En définissant la balise Meta Viewport via HTML, Viewport peut accélérer le rendu de la page, comme indiqué dans le code suivant.
<meta name="viewport" content="width=device=width,initial-scale=1">
(2) Réduisez le nombre de nœuds DOM. Trop de nœuds DOM affecteront le rendu de la page, donc le nombre de nœuds DOM doit être réduit autant que possible.

(3) Utilisez l'animation CSS3 autant que possible, utilisez raisonnablement l'animation requestAnimationFrame au lieu de setTimeout et utilisez l'animation de canevas de manière appropriée (animation CSS pour moins de 5 éléments et animation de canevas pour plus de 5 éléments (webGL peut être utilisé dans iOS 8) ).

(4) Optimiser Touchmove pour les événements à haute fréquence, les événements de défilement peuvent provoquer plusieurs rendus.

Utilisez requestAnimationFrame pour surveiller les modifications d'image afin de pouvoir effectuer le rendu au bon moment, augmenter l'intervalle de temps pour répondre aux modifications et réduire le nombre de rafraîchissements.

Utilisez le mode de limitation (basé sur la limitation des opérations ou sur la limitation du temps) pour réduire le nombre de déclencheurs.

(5) Améliorez la vitesse du GPU et utilisez les propriétés en CSS (transitions CSS3, transitions CSS3 3D, Opacity, Canvas, WebGL, Video) pour déclencher le rendu GPU.

17. Comment configurer le cache DNS?

Après avoir entré l'URL dans la barre d'adresse du navigateur, le navigateur doit d'abord interroger l'adresse IP du serveur correspondant au nom de domaine (nom d'hôte), ce qui prend généralement entre 20 et 120 ms.

Avant que la requête DNS ne soit terminée, le navigateur ne peut pas reconnaître l'adresse IP du serveur, il ne télécharge donc aucune donnée. Sur la base de considérations de performances, les opérateurs FAI, les routeurs LAN, les systèmes d'exploitation et les clients (navigateurs) auront tous des mécanismes de mise en cache DNS correspondants.

(1) IE met en cache pendant 30 minutes, ce qui peut être défini via l'élément DnsCacheTimeout dans le registre.

(2) Firefox est mixé pendant 1 min et configuré via network.dnsCacheExpiration.

(3) Dans Chrome, cliquez successivement sur "Paramètres" → "Options" → "Options avancées" et cochez l'option "Utiliser le DNS pré-récupéré pour améliorer la vitesse de chargement de la page Web" pour configurer la durée du cache.

18. Quand une panne d'accès aux ressources se produira-t-elle?

Au cours du processus de développement, il a été constaté que de nombreux développeurs n'avaient pas défini l'icône et que le répertoire racine du serveur ne stockait pas le Favicon.ico par défaut, ce qui a provoqué l'apparition de la requête 404. Habituellement ouvert Favicon.ico dans la vue Web de l'application, ce Favicon.ico ne sera pas chargé, mais de nombreuses pages peuvent être partagées.

Si l'utilisateur ouvre Favicon. Ico dans le navigateur, la récupération échouera. En règle générale, essayez de vous assurer que l'icône existe par défaut, que le fichier est aussi petit que possible et définissez un délai d'expiration du cache plus long. En outre, vous devez nettoyer rapidement les ressources dont les caches ont expiré et entraînent l'échec de la demande de découverte.

19. Comment optimiser les performances de jQuery?

La méthode d'optimisation est la suivante.

(1) Utilisez la dernière version de la bibliothèque jQuery.

Chaque nouvelle version de la bibliothèque JQuery corrigera les bogues et certaines optimisations de la version précédente, et contiendra également quelques innovations, il est donc recommandé d'utiliser la dernière version de la bibliothèque jQuery pour améliorer les performances. Cependant, il convient de noter qu'après avoir changé la version, n'oubliez pas de tester le code, après tout, il n'est parfois pas totalement rétrocompatible.

(2) Utilisez le sélecteur approprié.

jQuery fournit une sélection très riche de sélecteurs. Le sélecteur est la fonction la plus couramment utilisée par les développeurs, mais l'utilisation de sélecteurs différents peut également entraîner des problèmes de performances. Il est recommandé d'utiliser des sélecteurs simples, tels que les sélecteurs i, les sélecteurs de classe et de ne pas imbriquer les sélecteurs i.

(3) Utilisez des objets jQuery comme un tableau.

Le résultat obtenu à l'aide du sélecteur jQuery est un objet jQuery. Cependant, la bibliothèque jQuery vous donnera l'impression d'utiliser un tableau avec un index et une longueur définis. En termes de performances, il est recommandé d'utiliser une simple boucle for ou while au lieu de $. Each () pour rendre le code plus rapide.

(4) Chaque événement JavaScript (tel qu'un clic, un survol de la souris, etc.) remontera jusqu'au nœud parent. Lorsque vous devez lier la même fonction de rappel à plusieurs éléments, il est recommandé d'utiliser le mode de délégation d'événements.

(5) Utilisez join () pour concaténer des chaînes.

Utilisez join () pour concaténer de longues chaînes au lieu d'utiliser "+" pour concaténer des chaînes. Cela permet d'optimiser les performances, en particulier lorsqu'il s'agit de longues chaînes.

(6) Utilisez raisonnablement l'attribut data en HTML5.

L'attribut data en HTML5 permet d'insérer des données, en particulier l'échange de données entre les frontaux et les back-ends; la méthode data () de jQuery peut utiliser efficacement les attributs HTML5 pour obtenir automatiquement des données.

20. Quelles méthodes peuvent améliorer l'expérience d'animation CSS3 du terminal mobile?

(1) Utilisez autant que possible les capacités matérielles, telles que l'utilisation de la déformation 3D pour activer l'accélération GPU, comme le code suivant.

-webkit-transform: translate 3d(0, 0, 0);
-moz-transform : translate3d(0,0, 0);
-ms-transform : translate 3d(0,0,0);
transform: translate3d(0,0,0)；

La fluidité de l'animation d'un élément se déplaçant 500X vers la droite via translate3d sera nettement meilleure que le mouvement d'animation obtenu à l'aide de la propriété left, car la propriété d'animation CSS déclenchera la redistribution, le redessinage et la réorganisation de la page entière. Paint est généralement celui qui consomme le plus de performances. Évitez d'utiliser les propriétés d'animation CSS qui déclenchent la peinture autant que possible.

S'il y a un scintillement pendant l'exécution de l'animation (généralement au début de l'animation), il peut être géré comme suit.

-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden；
-ms-backface-visibility:hidden ;
backface-visibility:hidden；
-webkit-perspective：1000；
-moz-perspective：1000；
-ms-perspective：1000；
perspective：1000;

(2) Utilisez le moins possible les ombres rectangulaires et les dégradés. Ils affectent souvent gravement les performances de la page, surtout lorsqu'ils sont utilisés dans un élément en même temps.

(3) Gardez les éléments d'animation hors du flux de documents autant que possible pour réduire le réarrangement, comme indiqué dans le code suivant.

position:fixed；
position:absolute;