web-dev-qa-db-fra.com

Temps d'inactivité et autres dans Chrome Outils de développement. Pourquoi le navigateur est-il inactif pendant si longtemps?

Qu'est-ce qui est inclus dans les temps "Inactif" et "Autres" dans l'onglet Résumé de la chronologie dans Chrome Outils de développement?

enter image description here

Qu'est-ce qui cause tant d'inaction?

Pourquoi cela se produit-il?

Comment réduire ces délais? C'est possible?

Pourquoi le navigateur est-il inactif pendant si longtemps (dans le contexte du temps d'inactivité)?

Au début de plus de 1,8 seconde, rien ne se passe:

enter image description here

Au milieu, le "ralenti" et l '"autre" occupent environ 0,3 seconde:

enter image description here

Au bout de près de 3 secondes, rien ne se passe:

enter image description here

Dans cet exemple, nous avons près de cinq secondes de navigateur d'inactivité ...

19
simhumileco

Consultez ce sujet

Le ralenti est juste ça, rien ne se passait donc rien à craindre pour autant que je sache.

L'autre est "l'activité non instrumentée". Ce qui est actuellement impossible à décomposer. Donc, vous ne pouvez pas analyser ce qui se passait là-bas à partir des DevTools.

1
Hristo Enev

J'ai trouvé une partie de la réponse sur le blog d'Addy Osmani :

En mode Cadre, les barres verticales ombrées correspondent aux styles de recalcul, de composition, etc. Les zones transparentes de chaque barre verticale correspondent au temps d'inactivité, au moins, inactif sur la partie de votre page. Par exemple, supposons que votre première image prenne 15 ms à exécuter et la suivante prend 30 ms. Une situation courante est que les images sont synchronisées au taux de rafraîchissement et dans ce cas, la deuxième image a pris un peu plus de 15 ms pour être rendue. Ici, la trame 3 a manqué la "vraie" trame matérielle et a été rendue sur la trame suivante, par conséquent, la longueur de la deuxième trame a été effectivement doublée.

Mais cela n'épuise pas le sujet.

Exemple à partir duquel le graphique inclus dans la question n'a pas utilisé de cadres.

Je ne sais toujours pas comment raccourcir le temps, et ce qui est caché sous "Autre".

1
simhumileco

L'utilisation du bouton Démarrer le profilage et le rechargement de la page au lieu du bouton Enregistrer donnera les résultats que nous attendons, car il arrête l'enregistrement après la page pour terminer le chargement, réduisant idle.

1
sdlins