Comment optimiser les performances dans Vue.js ? 9 conseils à partager

Comment optimiser les performances dans Vue.js ? L'article suivant partagera avec vous neuf conseils pour l'optimisation des performances de Vue.js. J'espère qu'il sera utile à tout le monde !

(Partage de vidéos d'apprentissage : tutoriel vuejs)

01 Composants fonctionnels

**Principe : ****Composants fonctionnels**Par rapport aux composants ordinaires, il n'a pas d'état (pas de données réactives) ni d'instance (pas de contexte). Nous pouvons considérer un composant fonctionnel comme une fonction dans le composant. Le paramètre d'entrée est le contexte de rendu et la valeur de retour est le code HTML rendu. Précisément parce que les composants fonctionnels simplifient de nombreux traitements tels que la réactivité et les fonctions de hook, les performances de rendu seront améliorées dans une certaine mesure.

Scénarios applicables :

1. Composants d'affichage purs qui ne nécessitent pas de données réactives ni de logique de traitement

2. Composants de haut niveau utilisés pour marquer ou fournir des fonctions de base

3. en boucle (v-for) Élément

02 Séparation des composants enfants

**Principe : **Dans le code avant l'optimisation, chaque fois que le nombre transmis par les accessoires change, il sera restitué pendant le. processus de rendu La fonction lourde sera à nouveau appelée pour effectuer des opérations gourmandes en performances. La logique du code optimisé consiste à encapsuler des opérations complexes dans des sous-composants. Étant donné que les mises à jour de Vue se font au niveau de la granularité du composant, lorsque le numéro entrant change, le composant parent sera restitué et le sous-composant ne dépend pas du numéro car il. ne dépend pas du nombre. Ne sera pas restitué. Le nombre de calculs effectués est réduit et les performances sont naturellement améliorées.

**Autre : **En fait, les propriétés calculées peuvent également être utilisées pour optimiser ici (les dépendances externes ne seront pas recalculées s'il n'y a pas de modifications, et le coût des sous-composants de rendu supplémentaires est économisé)

03 Variables locales

**Principe : **En comparant le code avant et après, vous pouvez constater que la différence est la suivante : le code avant optimisation fait directement référence à this.base à chaque fois lors du calcul, tandis que le code après optimisation utilise le variable locale base pour calculer this.base Après la mise en cache, les variables locales sont appelées dans les calculs ultérieurs. Pourquoi y a-t-il une différence de performances si évidente ? La raison en est qu'à chaque accès à this.base, puisque this.base est une propriété calculée, un morceau de code logique sera exécuté pour voir si les dépendances existantes ont changé. Si elles ont changé, elles seront recalculées. , la dernière valeur calculée sera renvoyée. La consommation de performances de ce type de logique de calcul peut ne pas être évidente lorsqu'elle n'est appelée que quelques fois, mais si elle est trop exécutée (similaire à l'exemple où 300 composants sont mis à jour par image, et chaque composant appelle this.base multiple fois dans une mise à jour), il y aura alors une différence de performances relativement importante.

04 Réutiliser DOM avec v-show

Principe :

• Méthode d'implémentation : v-si ajoute ou supprime dynamiquement des éléments DOM dans l'arborescence DOM, v-show contrôle la visibilité en définissant l'attribut de style d'affichage de l'élément DOM.

• Processus de compilation : v-ifswitching a un processus de compilation et de déchargement partiel. Pendant le processus de commutation, les écouteurs d'événements internes et les sous-composants sont correctement détruits et reconstruits.v-show n'est qu'une simple commutation basée sur CSS.

• Conditions de compilation : v-if est paresseux, si la condition initiale est fausse, ne faites rien, ne démarrez la compilation partielle que lorsque la condition devient vraie pour la première fois, v-show est dans n'importe quelle condition est compilé, puis mis en cache, et les éléments DOM sont préservés.

• Consommation de performances : v-if a un coût de commutation plus élevé, v-show a un coût de rendu initial plus élevé.

• Scénarios d'utilisation : v-if convient aux situations où les conditions sont peu susceptibles de changer, v-show convient aux situations où les conditions changent fréquemment.

05 Keep-alive

**Principe : **Dans des scénarios non optimisés, chaque fois que nous cliquons sur le bouton pour changer de vue de routage, le composant sera re -rendu et le composant de rendu Il passera par l'initialisation du composant, le rendu, le correctif et d'autres processus. Si le composant est complexe ou profondément imbriqué, l'ensemble du rendu prendra beaucoup de temps. Après avoir utilisé KeepAlive, le vnode et le DOM du composant enveloppé par KeepAlive seront mis en cache après le premier rendu, puis la prochaine fois que le composant sera à nouveau rendu, le vnode et le DOM correspondants seront obtenus directement à partir du cache. Ensuite, pour le rendu, il n'est pas nécessaire de passer par une série de processus tels que l'initialisation des composants, le rendu et le correctif, etc., ce qui réduit le temps d'exécution du script et offre de meilleures performances.

Mais l'utilisation du composant KeepAlive n'est pas sans coût, car il occupera plus de mémoire pour la mise en cache. Il s'agit d'une application typique des idées d'optimisation espace-temps.

06 Fonctionnalités différées

Le deferMixin est le suivant :

**Principe : **L'idée principale de Defer est de diviser un rendu d'un composant en plusieurs fois. La variable displayPriority est conservée en interne et est incrémentée pendant chaque image de rendu via requestAnimationFrame, jusqu'à compter. Ensuite, au sein du composant utilisant le mixin Defer, vous pouvez utiliser v-if="defer(xxx)" pour contrôler le rendu de certains blocs lorsque la displayPriority est augmentée à xxx.

Lorsque le rendu de vos composants prend du temps, c'est une bonne idée d'utiliser Deferred pour le rendu progressif. Cela peut éviter que le rendu ne soit bloqué en raison d'une exécution trop longue de JS.

07 Time Slicing

**Principe : **L'utilisation du time slicing peut éviter de soumettre trop de données à la fois, le temps d'exécution interne de Js est trop long, bloquant le processus de l'interface utilisateur et provoquant la page bloquée.

**Autre : **Lors de l'exécution d'un traitement de tâche fastidieux, nous ajoutons généralement un effet de chargement, mais grâce à la comparaison avant et après l'optimisation, nous pouvons constater qu'avant l'optimisation, JS fonctionnait depuis longtemps, bloquant l'interface utilisateur. processus, donc le chargement ne sera pas affiché après l'optimisation, puisque la tâche fastidieuse est divisée en plusieurs tranches de temps pour la soumission, le temps d'exécution unique de JS est raccourci et l'animation de chargement a également une chance d'être rendue.

08 Données non réactives

**Principe : **Lors de la soumission de données en interne, les données nouvellement soumises seront définies comme réactives par défaut si la sous-propriété du. object est un objet, il rendra également récursivement les sous-propriétés réactives. Par conséquent, lorsque trop de données sont soumises, l’ensemble du processus prend beaucoup de temps. Après l'optimisation, l'indicateur d'attribut configurable dans data est manuellement modifié en false, de sorte que le tableau d'attributs d'objet obtenu en interne via Object.keys(obj) ignorera les données et que l'attribut data ne sera pas défini comme réactif, car les données pointent vers un objet. , ce qui réduira également la logique de réponse récursive, ce qui équivaut à réduire la perte de performances de cette partie. Plus la quantité de données est importante, plus l’effet de cette optimisation sera évident.

La différence entre le paramètre configurable et l'utilisation directe d'Object.freeze est la suivante :

**configurable: false** est utilisé pour empêcher la modification et la suppression des indicateurs d'attribut, mais permet de modifier la valeur de l'objet

 ;

**Object.freeze(obj)**禁止添加/删除/更改属性。为所有现有的属性设置 configurable: false, writable: false.

// configurable: false

let user = {
  name: "John"
};

Object.defineProperty(user, "name", {
  configurable: false
});

user.name = "Pete"; // 正常工作
delete user.name; // Error

// Object.freeze(obj)

let user = {
  name: "John"
};

Object.freeze(user);

user.name = "Pete";
console.log(user.name); // "John"复制代码

09 Défilement virtuel

**Principe : **Le défilement virtuel est implémenté en rendant uniquement le DOM dans la plage de vue. Les performances seront naturellement bien meilleures lors du rendu de moins de contenu. Le composant de défilement virtuel est également écrit par Guillaume Chau. Les étudiants intéressés peuvent étudier son implémentation du code source. Le principe de base est de surveiller les événements de défilement, de mettre à jour dynamiquement les éléments DOM qui doivent être affichés et de calculer leur déplacement dans le. voir. Le composant de défilement virtuel n'est pas sans coût, car il doit être calculé en temps réel pendant le processus de défilement, il y aura donc un certain coût d'exécution du script. Par conséquent, si la quantité de données dans la liste n'est pas très importante, il nous suffit d'utiliser le défilement ordinaire

Cet article est reproduit à partir de : https://juejin.cn/post/7084809333740929061

(Vidéo d'apprentissage partage : développement web front-end )

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!