Et javascript

Optimiser le code pour améliorer les performances

JavaScript est un langage de script très populaire qui peut obtenir diverses interactivités et effets dynamiques dans les pages Web. À mesure que les applications Web et les applications mobiles continuent d'évoluer, le code JavaScript doit également être continuellement optimisé pour améliorer les performances. Cet article explorera les méthodes d'optimisation du code JavaScript.

1. Réduire les opérations DOM

DOM (Document Object Model) est l'une des API les plus couramment utilisées en JavaScript pour rechercher et modifier des éléments sur des pages Web. Cependant, des opérations DOM fréquentes peuvent réduire les performances de votre site Web car elles prennent du temps. Pour réduire les opérations DOM, vous pouvez utiliser des variables pour stocker des éléments DOM et les utiliser en cas de besoin au lieu d'utiliser des fonctions telles que querySelector() ou getElementById().

Par exemple, si vous devez utiliser le même élément à plusieurs endroits, vous pouvez utiliser le code suivant :

const myElement = document.querySelector('.my-element');

De cette façon, chaque fois que vous devez utiliser l'élément, il vous suffit d'appeler la variable myElement sans avoir à le faire réinterrogez le DOM.

2. Évitez les variables globales

Une variable globale est une variable définie dans la portée globale et accessible de n'importe où. Cependant, les variables globales peuvent facilement être mal attribuées ou accidentellement remplacées dans JavaScript, ce qui entraîne un code encombré et des performances réduites. Pour éviter les variables globales, vous pouvez encapsuler votre code à l'aide d'IIFE (expression de fonction immédiatement exécutée) ou d'un outil modulaire comme Webpack ou Rollup. Cela limitera la portée de la variable et l'empêchera d'être modifiée de manière incorrecte par un autre code.

3. Mettre en cache les résultats des calculs répétés

Certains calculs en JavaScript peuvent devoir être effectués à plusieurs endroits. Cela serait très inefficace s’il fallait recalculer chaque fois qu’un calcul était nécessaire. La mise en cache des résultats de calculs répétés peut améliorer considérablement les performances du code JavaScript.

Par exemple, si vous avez une fonction qui doit effectuer des calculs répétés, vous pouvez utiliser une fermeture pour mettre en cache les résultats :

function heavyCalculation() {
    let result;

    return function() {
        if (!result) {
            result = performHeavyCalculation();
        }

        return result;
    };
}

De cette façon, la fonction n'effectuera le calcul qu'au premier appel et stockera le résultat dans un variable. Chaque fois qu'il est appelé, il renvoie les résultats mis en cache au lieu de recalculer.

4. Utilisez la technologie de limitation et d'anti-secousse

Lorsque l'utilisateur effectue un grand nombre d'opérations sur la page Web, comme faire défiler la page, redimensionner la fenêtre ou saisir du texte dans le champ de recherche, des événements seront déclenchés en continu. . Dans ce cas, l’utilisation de techniques de limitation et d’anti-rebond peut contribuer à réduire le nombre d’événements, améliorant ainsi les performances. Ces techniques peuvent également réduire le bégaiement et le scintillement de la page.

La limitation consiste à fusionner un grand nombre d'événements en un seul événement dans un intervalle de temps fixe. Anti-shake signifie que dans une période de temps spécifiée, la fonction de réponse aux événements ne sera exécutée que lorsque l'utilisateur cessera de fonctionner. La limitation et l'anti-secousse peuvent être obtenus à l'aide de bibliothèques telles que Lodash.

5. Utilisez de nouvelles fonctionnalités basées sur ES6

ES6 (ECMAScript 6) est la dernière version de JavaScript qui introduit de nombreuses nouvelles fonctionnalités. Ces fonctionnalités peuvent rendre le code plus simple et plus élégant tout en améliorant les performances du code JavaScript. Voici quelques-unes des nouvelles fonctionnalités d'ES6 :

Fonctions fléchées : rendez les définitions de fonctions plus concises sans créer de nouvelles étendues.

const myFunction = (a, b) => a + b;

Littéraux de modèle : utilisez des backticks pour créer des chaînes multilignes et des chaînes interpolées.

const myString = `Hello, ${name}`;

Déstructuration : Affectation de la valeur d'un tableau ou d'un objet à une variable.

const [first, second] = myArray;

let et const : utilisés pour définir des variables avec une portée au niveau du bloc.

let myVariable = 0;
const myConstant = 'hello';

6. Utilisez Web Workers

JavaScript est un langage monothread, ce qui signifie qu'il ne peut effectuer qu'une seule opération à la fois. Lorsque vous effectuez des calculs lourds ou traitez de grands ensembles de données, cela peut entraîner le blocage du thread de l'interface utilisateur et donner l'impression que le navigateur est tombé en panne. Pour résoudre ce problème, des Web Workers peuvent être utilisés.

Les Web Workers sont des scripts JavaScript qui s'exécutent en arrière-plan et peuvent aider à découpler les calculs et les tâches complexes du fil de l'interface utilisateur. De cette façon, le thread de l’interface utilisateur ne sera pas bloqué et les performances de l’application Web seront améliorées.

Résumé

L'optimisation du code JavaScript est une partie importante de l'optimisation des performances des applications Web. Cet article présente certaines techniques courantes d'optimisation du code JavaScript, notamment la réduction des opérations DOM, l'évitement des variables globales, la mise en cache des résultats de calculs répétés, l'utilisation de techniques de limitation et d'anti-secousse, l'utilisation des nouvelles fonctionnalités d'ES6 et l'utilisation de Web Workers. Lorsque nous utilisons ces techniques pour optimiser le code JavaScript, nous pouvons rendre nos applications plus efficaces tout en offrant une meilleure expérience utilisateur.

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!