Concepts JavaScript que nous connaissons parfaitement pour des pages Web plus rapides

Alors que la plupart d'entre nous écrivons du code React ou d'autres codes TypeScript de haut niveau de nos jours, il arrive encore que vous deviez vous aventurer dans la région sombre et sombre de la console F12 et du runtime JavaScript dans le navigateur.

Dans cet article, je vais aborder certains concepts clés que vous devez comprendre et qui peuvent et vous aideront très probablement à créer des pages beaucoup plus rapides.

1) ? Boucle d'événement

JavaScript est monothread, ce qui signifie que le langage lui-même ne peut effectuer qu'une seule tâche à la fois. Pour contourner cette limitation, les navigateurs proposent un mécanisme de « boucle d'événements ».

Par exemple, lorsque vous utilisez la fonction "setInterval", le navigateur maintient une minuterie en arrière-plan et lorsque l'intervalle a expiré, la fonction de rappel est alors poussée sur la boucle d'événements.

Pendant ce temps, tout code JavaScript qui n'utilise pas d'API de navigateur asynchrone s'exécutera simplement de haut en bas l'un après l'autre. Lorsque le thread principal ne fait aucun travail, le navigateur extrait alors une tâche de la boucle d'événements et l'exécute.

2) ? Travailleurs d'arrière-plan

Lorsque vous traitez des opérations intensives qui prennent du temps à s'exécuter, disons 500 ms, vous ne voulez certainement pas l'exécuter sur le thread principal car cela ralentirait l'interface utilisateur.

C'est là que les web Workers s'avèrent utiles ; Les Web Workers s'exécutent sur un thread distinct du thread principal du navigateur, de sorte que les tâches exécutées ici n'affecteront pas la vitesse de chargement de vos pages.

Un bon cas d'utilisation serait par exemple : lorsque vous disposez de données de séries chronologiques pour des graphiques complexes contenant des milliers d'enregistrements à analyser et sur lesquels effectuer des calculs. Vous pouvez simplement afficher un chargeur et effectuer les calculs du graphique dans un Web Worker, puis mettre à jour le DOM une fois qu'il est prêt.

3) ⏸️ Retarder les choses non essentielles

Étant donné que JavaScript est monothread, vous devez attendre autant que possible pour libérer votre thread principal. Ainsi, le meilleur point de départ est les éléments essentiels du Web, qui sont des mesures de référencement essentielles pour vous aider à identifier le code lent qui peut être retardé.

Vous pouvez ensuite utiliser des écouteurs d'événements tels que scroll, load, DOMContentLoaded, etc... pour retarder l'exécution du code.

Habituellement, ceci est utilisé pour retarder le suivi des pages, charger des widgets sous le pli, charger des graphiques et effectuer d'autres appels d'API qui se situent en dessous du pli principal.

Exemple :

document.addEventListener('DOMContentLoaded',function() {
 // Slow code here.
});

ℹ️ DOMContentLoaded : attendra que l'intégralité du document HTML soit analysé en premier, y compris les scripts JS asynchrones, mais n'attendra pas les ressources externes telles que les images, les fichiers CSS, les iframes, etc. L'événement "load" est similaire sauf qu'il attend que tout se charge, y compris les CSS, les iframes et les images.

Une autre API Web pratique est Intersection Observer. Cela vous permet de déclencher du code en fonction de la visibilité des éléments, ce qui est très utile pour minimiser les appels d'API lorsque l'utilisateur fait défiler un certain élément DOM (pensez à une pagination infinie).

4) ?️ Toile hors écran

Semblable aux Web Workers, vous pouvez transférer des opérations intensives liées au canevas sur leur propre thread en tant que tâche en arrière-plan, à l'aide d'une API de navigateur connue sous le nom de "OffscreenCanvas".

Ceci est utile pour les visualisations en temps réel, la manipulation d'images, les jeux, le montage vidéo, etc...

5) ⏳ Exécutez des tâches lorsque le navigateur n'est pas occupé

Très similaire à la boucle d'événements, sauf que les tâches exécutées avec "requestIdleCallback" ont une très faible priorité et ne s'exécuteront donc que lorsque le navigateur est inactif.

C'est idéal pour exécuter des tâches non critiques telles que la journalisation et la mise en cache pour un accès hors ligne dans une PWA.

? MDN Web Docs [Bonus - ressource utile]

https://developer.mozilla.org/en-US/
Je sais que vous utilisez probablement Claude ou un LLM pour cela, mais les hallucinations de l'IA sont un problème et vous donneront parfois des informations erronées, il est donc toujours agréable d'avoir un guide de référence écrit solide auquel vous pouvez faire confiance.

MDN est open source et géré par Mozilla, c'est sans conteste la meilleure ressource Web pour en savoir plus sur les différentes API des navigateurs JavaScript, CSS et HTML. Je l'ai fréquemment utilisé tout au long de ma carrière et je le fais encore aujourd'hui.

PS : pour des tutoriels et des guides plus approfondis sur le développement Web, l'IA, Linux, vous pouvez consulter mon blog à l'adresse : KevinCoder

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!