Tâche (s) différée (s) à exécution longue pour améliorer le lissage du défilement

Question

J'examinais ma page et j'ai reçu cet avertissement:

Tâche (s) différée (s) à exécution longue différée pour améliorer la fluidité du défilement. Voir crbug.com/574343

J'ai aussi vu:

Blink a reporté une tâche afin de rendre le défilement plus fluide. Vos tâches de minuterie devraient prendre moins de 50 ms pour éviter cela. Veuillez consulter https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/rail et https://crbug.com/574343#c4 pour plus d'informations.

Qu'est-ce que c'est?

Answer 1

Cela se produit lorsque Blink (le moteur de rendu de Chrome) décide de retarder l'exécution d'un minuteur (comme une fonction transmise à requestAnimationFrame, setTimeout ou setInterval) car ces fonctions prennent généralement> 50 ms pour exécuter et il y a une entrée tactile de l'utilisateur. C'est fait pour donner la priorité à la gestion des entrées de l'utilisateur (comme les parchemins et les tapotements) au-dessus de ce que fait le site.

Si vous avez rencontré ce message, il est probable que vos utilisateurs auront un comportement similaire. Voici comment reproduire ce scénario:

1. Avoir du javascript de longue durée qui est déclenché via des minuteries
2. Être sur mobile (ou l'émuler avec le mode appareil DevTools)
3. Avoir une entrée tactile, le défilement du doigt vers le bas sur l'écran est le plus fiable. Taper ou faire défiler la page peut également la déclencher, mais il est moins probable et plus difficile à reproduire.
4. Les expérimentaux de devtools CPU throttling feront que le JS prenne plus de temps et vous donnera une meilleure chance de le voir.

La méthode pour comment résoudre est directement issue du problème référencé dans le message de console affiché dans le commentaire 40:

1. Enregistrez une chronologie sur la page qui déclenche le message de la console concernant le report.
2. Sélectionnez l'intégralité de la chronologie et ouvrez le volet "Journal des événements" situé en bas de la fenêtre.
3. Entrez "Timer Fired" dans le champ de texte du filtre. (Voir image en bas)
4. Recherchez les minuteurs dans la liste dont le "Temps total" dépasse 50 millisecondes. Ce sont les problématiques. (Notez que les minuteries dépassant 10 millisecondes peuvent également déclencher ce message dans les cas où le navigateur traite un geste de l'utilisateur.)

Vous voulez que ces fonctions s'exécutent plus rapidement ou moins fréquemment.