Idle-Zeit im Frame-Rendering in Chrome DevTools

Question

Bei der Suche nach Web-Render-Optimierung habe ich auf vielen beliebten Websites ein seltsames Render-Verhalten festgestellt. Ein großer Teil der Frame-Renderzeit ist ein leerer Bereich ohne Operationen. Example from Apple promo page

Das einzige, was in diesem Zeitraum funktioniert, ist eine GPU. Ich konnte keinen Grund für dieses Verhalten finden. Was könnte der Grund für dieses Problem sein und wie kann ich die Renderzeit solcher Frames in meinen Projekten verbessern?

Answer 1

Dies ist Leerlaufzeit, die Zeit, wenn der Browser auf der CPU oder GPU wartet, um etwas zu verarbeiten. Es wird im Kreisdiagramm in der Dokumentationsseite How to Use the Timeline Tool angezeigt.

Ich kann keine gute Erklärung im offiziellen Dokument finden, aber ich habe gerade etwas an anderer Stelle:

Die transparenten Bereiche jeder vertikalen Balken entsprechen Zeit in den Ruhezustand, zumindest im Leerlauf auf dem Teil deine Seite. Angenommen, Ihr erster Frame dauert 15 ms und der nächste dauert 30 ms. Eine häufige Situation ist, dass Frames mit der Aktualisierungsrate synchronisiert werden, und in diesem Fall dauerte das zweite Frame etwas länger als 15 ms zum Rendern. Hier verfehlte der Rahmen 3 den "echten" Hardwarerahmen und wurde bei dem nächsten Rahmen gerendert, und somit wurde die Länge des zweiten Rahmens effektiv verdoppelt.

Quelle:Improving Web App Performance With the Chrome DevTools Timeline and Profiles

Ich werde das so passieren auf jemanden Thread Ich kenne die Dokumentation für Google schreibt. Sie könnten dieses Thema besser behandeln.