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

Identifiants

Catégories

Indications

Description

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.

Exemple

Le Total Blocking Time (TBT) mesure le temps total occupé par des « Long Tasks » (Tâches longues) durant l’activité principale du thread JavaScript. Une Long Task est un traitement qui dure plus de 50ms et qui monopolise le navigateur web. Il faut s’assurer que le TBT soit en dessous des 200 ms. La mesure peut s’effectuer avec LightHouse ou Web Page Test.

Principe de validation