Techniques d'optimisation JavaScript éprouvées pour améliorer les performances-js tutoriel-php.cn

roven JavaScript Optimization Techniques to Boost Performance

En tant qu'auteur à succès, je vous invite à explorer mes livres sur Amazon. N'oubliez pas de me suivre sur Medium et de montrer votre soutien. Merci! Votre soutien compte pour le monde !

L'optimisation JavaScript est cruciale pour améliorer les performances des applications et l'expérience utilisateur. J'ai mis en œuvre diverses techniques pour augmenter la vitesse d'exécution du code dans mes projets. Voici six méthodes efficaces que j'ai trouvées particulièrement utiles :

La mémorisation est une technique puissante que j'utilise souvent pour mettre en cache les résultats de fonctions coûteuses. En stockant le résultat d’opérations coûteuses, nous pouvons éviter les calculs redondants et améliorer considérablement les performances. Voici un exemple de la façon dont j'implémente la mémorisation :

function memoize(fn) {
  const cache = new Map();
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      return cache.get(key);
    }
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

const expensiveFunction = (n) => {
  // Simulate an expensive calculation
  let result = 0;
  for (let i = 0; i < n; i++) {
    for (let j = 0; j < n; j++) {
      result += i * j;
    }
  }
  return result;
};

const memoizedExpensiveFunction = memoize(expensiveFunction);

console.time('First call');
console.log(memoizedExpensiveFunction(1000));
console.timeEnd('First call');

console.time('Second call');
console.log(memoizedExpensiveFunction(1000));
console.timeEnd('Second call');

Copier après la connexion

Dans cet exemple, le premier appel à la fonction mémorisée prendra plus de temps, mais les appels suivants avec les mêmes arguments seront beaucoup plus rapides à mesure que le résultat sera récupéré du cache.

L'anti-rebond et la limitation sont des techniques que j'utilise pour contrôler le taux d'exécution des fonctions, en particulier pour les opérations gourmandes en performances. L'anti-rebond garantit qu'une fonction n'est appelée qu'après un certain laps de temps depuis sa dernière invocation, tandis que la limitation limite le nombre de fois qu'une fonction peut être appelée sur une période spécifique.

Voici comment j'implémente l'anti-rebond :

function debounce(func, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

const expensiveOperation = () => {
  console.log('Performing expensive operation...');
};

const debouncedOperation = debounce(expensiveOperation, 300);

// Simulate rapid function calls
for (let i = 0; i < 5; i++) {
  debouncedOperation();
}

Copier après la connexion

Et voici un exemple de limitation :

function throttle(func, limit) {
  let inThrottle;
  return function(...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

const scrollHandler = () => {
  console.log('Handling scroll event...');
};

const throttledScrollHandler = throttle(scrollHandler, 100);

window.addEventListener('scroll', throttledScrollHandler);

Copier après la connexion

Ces techniques sont particulièrement utiles pour gérer des événements tels que le défilement ou le redimensionnement, où des appels de fonction excessifs peuvent entraîner des problèmes de performances.

Quand il s'agit de créer des objets et des tableaux, je préfère toujours utiliser la notation littérale plutôt que les constructeurs. Cette approche est non seulement plus concise mais aussi plus rapide en termes d’exécution. Voici une comparaison :

// Slower
const obj1 = new Object();
obj1.name = 'John';
obj1.age = 30;

const arr1 = new Array();
arr1.push(1, 2, 3);

// Faster
const obj2 = { name: 'John', age: 30 };
const arr2 = [1, 2, 3];

Copier après la connexion

La notation littérale est plus efficace car elle crée l'objet ou le tableau en une seule opération, alors que l'approche constructeur nécessite plusieurs étapes.

Les variables globales peuvent avoir un impact significatif sur les performances en raison de l'augmentation des temps de recherche. Je fais un effort conscient pour minimiser leur utilisation dans mon code. Au lieu de cela, j'encapsule des variables dans des fonctions ou des modules pour améliorer la vitesse d'exécution. Voici un exemple de la façon dont je refactorise le code pour éviter les variables globales :

// Avoid this
let counter = 0;
function incrementCounter() {
  counter++;
  console.log(counter);
}

// Prefer this
function createCounter() {
  let counter = 0;
  return function() {
    counter++;
    console.log(counter);
  };
}

const incrementCounter = createCounter();
incrementCounter();
incrementCounter();

Copier après la connexion

En utilisant des fermetures, nous pouvons maintenir l'état sans compter sur des variables globales, ce qui conduit à une exécution de code plus rapide et plus prévisible.

L'optimisation des boucles est un autre domaine sur lequel je me concentre pour améliorer les performances. Je préfère utiliser les boucles for...of pour les tableaux et les boucles for...in pour les objets. Ces constructions sont généralement plus rapides et plus lisibles que les boucles for traditionnelles. De plus, j'essaie d'éviter le chaînage inutile de méthodes de tableau, car cela peut créer des tableaux intermédiaires et avoir un impact sur les performances. Voici un exemple d'utilisation optimisée de la boucle :

function memoize(fn) {
  const cache = new Map();
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      return cache.get(key);
    }
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

const expensiveFunction = (n) => {
  // Simulate an expensive calculation
  let result = 0;
  for (let i = 0; i < n; i++) {
    for (let j = 0; j < n; j++) {
      result += i * j;
    }
  }
  return result;
};

const memoizedExpensiveFunction = memoize(expensiveFunction);

console.time('First call');
console.log(memoizedExpensiveFunction(1000));
console.timeEnd('First call');

console.time('Second call');
console.log(memoizedExpensiveFunction(1000));
console.timeEnd('Second call');

Copier après la connexion

Quand il s'agit d'accéder aux variables dans les fonctions, j'ai découvert que l'utilisation de variables locales au lieu de propriétés d'objet peut conduire à une exécution plus rapide. En effet, les recherches de variables locales sont généralement plus rapides que les recherches de propriétés sur les objets. Voici un exemple de la façon dont j'optimise le code en utilisant cette technique :

function debounce(func, delay) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

const expensiveOperation = () => {
  console.log('Performing expensive operation...');
};

const debouncedOperation = debounce(expensiveOperation, 300);

// Simulate rapid function calls
for (let i = 0; i < 5; i++) {
  debouncedOperation();
}

Copier après la connexion

Dans cet exemple, la mise en cache de la propriété de l'objet dans une variable locale conduit à une exécution plus rapide, notamment dans les boucles ou les fonctions fréquemment appelées.

Ces techniques d'optimisation ont considérablement amélioré les performances de mes applications JavaScript. Cependant, il est important de noter qu’une optimisation prématurée peut conduire à un code trop complexe. Je recommande toujours de profiler et de mesurer les performances avant d'appliquer ces techniques pour m'assurer qu'elles résolvent les véritables goulots d'étranglement dans votre application.

En plus de ces techniques d'optimisation de base, j'ai trouvé plusieurs autres pratiques qui contribuent à une exécution plus rapide de JavaScript :

Utiliser le mode strict : l'ajout de « use strict » au début de vos scripts ou fonctions peut aider à détecter les erreurs plus tôt et à empêcher l'utilisation de certaines fonctionnalités sujettes aux erreurs, améliorant ainsi potentiellement les performances.
Évitez les manipulations inutiles du DOM : minimiser les interactions directes du DOM et les mises à jour groupées du DOM peuvent améliorer considérablement les performances, en particulier dans les applications Web complexes.
Tirer parti des Web Workers : pour les tâches gourmandes en calcul qui ne nécessitent pas d'accès au DOM, les Web Workers peuvent décharger le traitement vers les threads d'arrière-plan, gardant ainsi le thread principal réactif.
Optimiser les paramètres de fonction : lorsqu'une fonction n'utilise pas le mot-clé « this », envisagez d'utiliser des fonctions fléchées pour une légère amélioration des performances.
Utilisez des structures de données appropriées : choisir la bonne structure de données (par exemple, définir pour des valeurs uniques, mapper pour des paires clé-valeur) peut conduire à des algorithmes plus efficaces et à de meilleures performances.
Tirer parti de la mise en cache du navigateur : une configuration correcte des en-têtes de cache peut réduire la charge du serveur et améliorer la réactivité des applications pour les utilisateurs récurrents.
Réduire la taille des fichiers JavaScript : utilisez des techniques de minification et de compression pour réduire la taille de vos fichiers JavaScript, ce qui accélère les temps de téléchargement et d'analyse.
Évitez les appels de fonction inutiles : refactorisez le code pour éliminer les appels de fonction redondants, en particulier dans les boucles ou les chemins de code fréquemment exécutés.
Utiliser des littéraux de modèles pour la concaténation de chaînes : les littéraux de modèles sont souvent plus efficaces que les méthodes traditionnelles de concaténation de chaînes.
Exploitez les fonctionnalités JavaScript modernes : utilisez des fonctionnalités telles que la déstructuration, les opérateurs de propagation et le chaînage facultatif pour un code plus concis et potentiellement plus rapide.

Voici un exemple qui combine plusieurs de ces techniques d'optimisation supplémentaires :

function memoize(fn) {
  const cache = new Map();
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      return cache.get(key);
    }
    const result = fn.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

const expensiveFunction = (n) => {
  // Simulate an expensive calculation
  let result = 0;
  for (let i = 0; i < n; i++) {
    for (let j = 0; j < n; j++) {
      result += i * j;
    }
  }
  return result;
};

const memoizedExpensiveFunction = memoize(expensiveFunction);

console.time('First call');
console.log(memoizedExpensiveFunction(1000));
console.timeEnd('First call');

console.time('Second call');
console.log(memoizedExpensiveFunction(1000));
console.timeEnd('Second call');

Copier après la connexion

Dans cet exemple, nous utilisons le mode strict, exploitant les structures de données appropriées (Set et Map), optimisant les paramètres de fonction avec des fonctions fléchées, utilisant des littéraux de modèle pour la concaténation de chaînes et démontrant l'utilisation de fonctionnalités JavaScript modernes telles que la déstructuration. Nous montrons également comment configurer un Web Worker pour décharger des calculs lourds.

N'oubliez pas que la clé d'une optimisation efficace est de se concentrer sur les domaines qui apporteront les améliorations de performances les plus significatives. Profilez toujours votre code et identifiez les véritables goulots d'étranglement avant d'appliquer des techniques d'optimisation. Dans de nombreux cas, écrire du code propre et lisible est plus important que les micro-optimisations qui ne peuvent apporter que des avantages marginaux.

Alors que vous continuez à travailler sur l'optimisation de votre code JavaScript, gardez à l'esprit que les implémentations du moteur JavaScript et du navigateur évoluent constamment. Ce qui pourrait être une optimisation aujourd’hui pourrait devenir inutile, voire contre-productif, à l’avenir. Restez informé des dernières bonnes pratiques et testez toujours vos optimisations dans des scénarios réels.

Enfin, n'oubliez pas l'importance de la performance perçue. Bien que ces techniques se concentrent sur la vitesse d'exécution réelle, des facteurs tels que le chargement progressif, les écrans squelettes et les mises à jour optimistes de l'interface utilisateur peuvent améliorer considérablement la perception de l'utilisateur de la vitesse et de la réactivité de votre application.

En appliquant systématiquement ces techniques d'optimisation et en restant attentif aux performances tout au long du processus de développement, vous pouvez créer des applications JavaScript plus rapides et plus efficaces qui offrent une excellente expérience utilisateur.

101 livres

101 Books est une société d'édition basée sur l'IA cofondée par l'auteur Aarav Joshi. En tirant parti de la technologie avancée de l'IA, nous maintenons nos coûts de publication incroyablement bas (certains livres coûtent aussi peu que 4 $), ce qui rend des connaissances de qualité accessibles à tous.

Découvrez notre livre Golang Clean Code disponible sur Amazon.

Restez à l'écoute des mises à jour et des nouvelles passionnantes. Lorsque vous achetez des livres, recherchez Aarav Joshi pour trouver plus de nos titres. Utilisez le lien fourni pour profiter de réductions spéciales !