[NEW] Eviter les temps de blocages par des traitements javascript trop longs

[ACTLEM]

Discussion: #243

Tâches:

• Créer le fichier BP_4020_fr.md
• Ecrire le titre
• Ecrire la description
• Définir la règle de validation avec son seuil de conformité
• Définir la difficulté de mise en oeuvre (sur 5, 5 = facile, 1 = difficile)
• Définir le niveau d'impact écologique (sur 5, 5 = fort, 1 = faible)
• Calculer le degré de priorité (sur 5, 5 = prioritaire, 1 = non prioritaire) via la formule ARRONDI.SUP(((MEO*IMPACT)/25)*5;0)

Les éléments suivants sont facultatifs:

• Ajout d'exemples
• Ajout d'une solution alternative

[Fred-artwai]

Titre : Eviter les temps de blocages par des traitements javascript trop longs

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), ainsi que l’exécution de son code CSS et Javascript. Or l'exécution du code Javascript peut occuper les processeur 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ée à la puissance du processeur (notamment sur mobile)

Ces deux aspects peuvent mener à un renouvellement du terminal utilisateur.

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

Conformité : Mesurer le Total Blocking Time, TBT de vos pages et assurez-vous qu'il soit en dessous des 200 ms. 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. La mesure peut s'effectuer avec LightHouse ou Web Page Test.

Difficulté de mise en oeuvre : 3