Éviter les temps de blocages par des traitements javascript trop longs

Ce que dit le référentiel

Un navigateur comporte un processus qui transforme le code en une page web. Il doit accomplir plusieurs tâches avant de pouvoir afficher la page :

• l’analyse du script HTML
• la construction de la structure et du contenu d’une page web (DOM)
• l’exécution de son code CSS et JavaScript.

Or l'exécution du code JavaScript peut occuper les processeurs du terminal à plus de 90% ce qui bloque les autres traitements voir les interactions avec l'utilisateur. Mais surtout cela sollicite fortement le terminal ce qui conduit à deux choses :

• une consommation excessive qui impacte directement le cycle de recharge de la batterie
• le blocage du thread principal, qui dégrade l'expérience utilisateur, et qui peut être corrélé à la puissance du processeur (notamment sur mobile)

Ces deux aspects peuvent mener à un renouvellement du terminal utilisateur à cause d'une obsolescence perçue.

Pour éviter cela, préférer découper vos JavaScript en petites tâches exécutées au moment requis et non pas avant.

Notre avis

Le streaming des server components React permet de diviser le rendu en plusieurs morceaux petits et indépendants. Cette approche permet d'envoyer et de rendre le contenu HTML au fur et à mesure, dès que chaque partie est prête, réduisant ainsi les temps de blocage pour l'utilisateur.

En utilisant cette méthodologie, le navigateur peut analyser et construire le DOM progressivement sans attendre que tout le JavaScript soit exécuté. Cette technique divise le traitement en tâches plus petites, améliorant la réactivité et la consommation énergétique des appareils. Cela prolonge la durée de vie des terminaux et évite une obsolescence prématurée.