Optimiser l'exécution JavaScript

JavaScript déclenche souvent des changements visuels. Parfois, cela passe directement par des manipulations de style, et parfois ce sont des calculs qui entraînent des changements visuels, comme la recherche ou le tri des données. Les codes JavaScript dont le délai est incorrect ou dont l'exécution est longue sont souvent à l'origine de problèmes de performances. Vous devez chercher à minimiser son impact lorsque vous le pouvez.

JavaScript déclenche souvent des changements visuels. Parfois, c’est directement par des manipulations de style, et parfois ce sont des calculs qui entraîner des changements visuels, comme la recherche ou le tri des données. Le code n'est pas à l'heure ou JavaScript de longue durée est une cause fréquente de problèmes de performances. Vous devez chercher à minimiser son impact lorsque vous le pouvez.

Le profilage des performances JavaScript n'est rien d'autre qu'un art, car le code JavaScript que vous écrivez rien de mieux que le code qui est réellement exécuté. Les navigateurs récents utilisent les compilateurs JIT et toutes les manières d'optimisations et d'astuces pour une exécution aussi rapide que possible. modifie considérablement la dynamique du code.

Cela dit, vous pouvez tout à fait faire certaines choses pour faciliter l'exécution de vos applications avec JavaScript.

Résumé

  • Évitez de définir "setTimeout" ou "setInterval" pour les mises à jour visuelles. utilisez toujours requestAnimationFrame à la place.
  • Déplacez le code JavaScript de longue durée du thread principal vers les Web Workers.
  • Utilisez des microtâches pour effectuer des modifications DOM sur plusieurs cadres.
  • Utilisez la timeline et le Profileur JavaScript des outils pour les développeurs Chrome pour évaluer l'impact de JavaScript.

Utiliser requestAnimationFrame pour les modifications visuelles

Lorsque des changements visuels se produisent à l'écran, vous devez effectuer votre travail au bon moment pour navigateur, qui se trouve juste au début du cadre. Le seul moyen de garantir que votre code JavaScript qui s'exécutera au début d'un frame consiste à utiliser requestAnimationFrame.

/**
    * If run as a requestAnimationFrame callback, this
    * will be run at the start of the frame.
    */
function updateScreen(time) {
    // Make visual updates here.
}

requestAnimationFrame(updateScreen);

Les frameworks ou les exemples peuvent utiliser setTimeout ou setInterval pour effectuer des modifications visuelles telles que des animations, Le problème est que le rappel s'exécutera à un moment donné de l'image, peut-être juste à la fin, ce qui peut souvent nous amener à manquer un frame, ce qui entraîne des à-coups.

setTimeout entraînant l'omission d'un frame par le navigateur.

En fait, jQuery utilisait auparavant setTimeout pour son comportement animate. Elle a été modifiée pour utiliser requestAnimationFrame dans la version 3. Si vous utilisez une ancienne version de jQuery, vous pouvez corrigez-les pour qu'elles utilisent requestAnimationFrame ; ce qui est fortement conseillé.

Réduire la complexité ou utiliser des Web Workers

JavaScript s'exécute sur le thread principal du navigateur, juste à côté des calculs de style, de la mise en page et, souvent, la peinture. Si votre JavaScript s'exécute pendant une longue période, il bloquera ces autres tâches, pouvant entraîner le manque d’images.

Vous devez faire preuve de tactique quant au moment et à la durée d'exécution du JavaScript. Par exemple, si vous vous trouvez dans un l'animation d'un défilement, dans l'idéal, votre code JavaScript doit de 3-4 ms. Passé ce délai, vous risquez de prendre trop de temps. Si vous êtes inactif vous pouvez vous permettre d'être plus détendu vis-à-vis du temps passé.

Dans de nombreux cas, vous pouvez déplacer le travail de calcul pur Web Workers si, par exemple, il ne nécessite pas d'accès DOM. la manipulation ou le balayage de données, comme le tri ou la recherche, sont souvent adaptés à ce modèle, tout comme le chargement et la génération de modèles.

var dataSortWorker = new Worker("sort-worker.js");
dataSortWorker.postMesssage(dataToSort);

// The main thread is now free to continue working on other things...

dataSortWorker.addEventListener('message', function(evt) {
    var sortedData = evt.data;
    // Update data on screen...
});

Toutes les tâches ne peuvent pas être adaptées à ce modèle: les Web Workers ne disposent pas d'un accès DOM. Lorsque votre travail doit se trouver sur le thread principal, envisagez une approche par lot, dans laquelle vous segmentez la tâche la plus importante en microtâches, chacune ne prenant pas plus de quelques millisecondes, et s'exécute à l'intérieur de gestionnaires requestAnimationFrame sur chaque frame.

Cette approche a des conséquences sur l'expérience utilisateur et l'interface utilisateur, et vous devrez vous assurer que l'utilisateur sait qu'une tâche est en cours de traitement, soit à l'aide d'un indicateur de progression ou d'activité. Dans tous les cas, cette approche permet de garder le thread principal de votre application libre et de rester réactif les interactions des utilisateurs.

Connaître la valeur "Taxe sur les frames" de votre JavaScript

Lorsque vous évaluez un framework, une bibliothèque ou votre propre code, il est important d'évaluer le coût d'exécution du code JavaScript frame par frame. C'est ce qui est particulièrement important lorsque vous réalisez des animations critiques avec des transitions ou des défilements.

Le panneau "Performances" des outils pour les développeurs Chrome constitue le meilleur moyen de mesurer Coût de JavaScript. En général, vous obtenez des enregistrements de bas niveau comme ceci:

Enregistrement des performances dans les outils pour les développeurs Chrome

La section Main fournit un graphique de flammes des appels JavaScript, qui vous permet peut analyser exactement quelles fonctions ont été appelées et combien de temps chacune a pris.

Grâce à ces informations, vous pouvez évaluer l'impact sur les performances dans votre application, puis commencez à rechercher et à corriger les zones cliquables l'exécution de fonctions prend trop de temps. Comme indiqué précédemment, vous devez rechercher supprimer le code JavaScript de longue durée ou, si cela n'est pas possible, le déplacer à un Web Worker, ce qui libère le thread principal pour continuer à effectuer d'autres tâches.

Consultez Premiers pas avec l'analyse des performances d'exécution pour savoir comment utiliser le panneau "Performances".

Évitez de micro-optimiser votre code JavaScript.

Il peut être intéressant de savoir qu'un navigateur peut exécuter une version d'une chose 100 fois plus vite une autre chose, comme le fait de demander l'offsetTop d'un élément est plus rapide que de calculer getBoundingClientRect(), mais il est presque toujours vrai que vous n'appelez que des fonctions telles que un petit nombre de fois par image. C'est donc un effort inutile de se concentrer sur cet aspect pour améliorer les performances de JavaScript. Vous ne gagnez généralement que quelques fractions de millisecondes.

Si vous créez un jeu ou une application gourmande en ressources de calcul, vous serez probablement une exception. à ces conseils, car vous allez généralement intégrer beaucoup de calculs dans une seule image, Dans ce cas, tout aide.

Pour résumer, les micro-optimisations sont plus médiocres, car elles ne sont généralement pas mises en correspondance avec type d'application que vous créez.