Un tour-t-up JS avancé sur les conseils et astuces d'optimisation des performances

Pour optimiser les performances JavaScript, concentrez-vous sur l'optimisation, la mémorisation et le chargement paresseux. 1. Optimiser le rendu en utilisant le débouchement pour retarder l'exécution de la fonction jusqu'à une pause dans des événements comme la frappe et la gaz pour limiter la fréquence à laquelle une fonction s'exécute lors d'événements fréquents comme le défilement. 2. Utilisez la mémorisation pour mettre en cache les résultats de fonctions pures coûteuses, telles que des calculs lourds ou des transformations de données, avec des outils comme UseMemo et Usecallback dans React, mais évitez la surutilisation en raison des compromis de la mémoire. 3. Implémentez le chargement paresseux pour le code et les données, différant des composants, des itinéraires ou des actifs non critiques comme les images jusqu'à ce que les importations dynamiques, react.lazy () et les attributs de chargement natif du navigateur, améliorent la vitesse de charge initiale et l'expérience utilisateur globale.

En ce qui concerne l'optimisation des performances JavaScript, il n'y a pas de solution unique. Mais il existe des pratiques solides qui peuvent améliorer considérablement la vitesse à laquelle votre application fonctionne et ressent. La clé est de se concentrer sur ce que les utilisateurs éprouvent réellement - pas seulement l'élégance du code.

1. Optimiser le rendu avec débouchant et accélérateur

Les redevances inutiles sont un coupable commun dans les applications JS lentes. Surtout lorsque vous traitez avec des événements de défilement, de redimensionnement ou d'entrée, vous ne voulez pas que chaque petit changement déclenche immédiatement un appel de fonction.

Débouncez l'exécution jusqu'à ce qu'une certaine période de temps soit passée sans que l'événement soit déclenché à nouveau. Pensez aux entrées de recherche: vous ne souhaitez envoyer la demande qu'une fois que l'utilisateur cesse de taper, pas sur chaque frappe.

L'accélération , en revanche, limite la fréquence à laquelle une fonction peut fonctionner. Par exemple, les gestionnaires de Scroll ne devaient avoir besoin de mettre à jour que toutes les 100 ms au lieu de chaque pixel défilé.

Voici une idée rapide de la façon dont ils fonctionnent:

• Débouncez: attendez des pauses dans l'activité
• Accélération: limiter les appels de fonction au fil du temps

Vous pouvez utiliser les implémentations de Lodash ou rouler le vôtre. Quoi qu'il en soit, ces outils aident à réduire la charge de travail lors d'événements à haute fréquence.

2. Utilisez la mémorisation pour éviter de répéter le travail

Si une fonction est appelée plusieurs fois avec les mêmes entrées, pourquoi ne pas mettre en cache le résultat? C'est la mémorisation en un mot. Il fonctionne mieux pour les fonctions pures - celles qui renvoient toujours la même sortie compte tenu des mêmes arguments.

Par exemple, si vous calculez les nombres de Fibonacci ou les chaînes de formatage à plusieurs reprises, une version mémorisée peut économiser du temps de calcul.

Dans React, useMemo et useCallback aident cela en sautant des récalculs coûteux à moins que les dépendances ne changent. Faites juste attention à ne pas les utiliser - parfois les frais généraux n'en valent pas la peine à moins que les calculs ne soient vraiment lourds.

Quelques cas où la mémorisation aide:

• Calculs lourds (par exemple, opérations mathématiques)
• Transformations de données coûteuses
• Composant rendant les optimisations dans les grandes listes

Mais n'oubliez pas: la mémoire échange de la mémoire contre la vitesse. Donc, si vous mettez en cache des tonnes d'entrées uniques, il pourrait se retourner contre lui.

3. Code de chargement paresseux et données

Le chargement de tout d'avance rend les pages plus lourdes qu'elles ne doivent l'être. Le chargement paresseux vous permet de charger des parties de votre application selon les besoins.

Ceci est particulièrement utile pour:

• Grands composants qui ne sont pas visibles tout de suite
• Les voies ou les pages accessibles moins fréquemment
• Des actifs comme des images ou des vidéos sous le pli

Avec des importations dynamiques ( import() ) et des outils comme WebPack ou Vite, la division de votre code en morceaux devient simple. Dans React, vous pouvez combiner React.lazy() avec Suspense pour gérer les états de chargement gracieusement.

Encore mieux, certains bundlers divisent automatiquement votre code en fonction des instructions d'importation. Vous obtenez donc des charges initiales plus rapides et des interactions plus lisses plus tard.

Et il ne s'agit pas seulement de JavaScript - des images de chargement paresseuses avec loading="lazy" ou différer des scripts non critiques contribue également à une application plus rapide.

C'est le cœur du réglage pratique des performances JS. Ces techniques ne nécessitent pas de réécriture de l'ensemble de votre application, mais elles font une différence notable. Si vous commencez à mesurer avec des outils de développement du navigateur, vous verrez où chacun de ces correspond le mieux.

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!