WebHU - Programozási kérdések és válaszok

Hogyan nézhető meg a CPU és GPU használat animációnként? [másolat]

Helyzet:
Van egy webhelyem több jQuery, Javascript és CSS animációval. Ezek az animációk lelassítják és időnként akadozik a webhelyem.

Kérdés:
Hogyan láthatom a cpu- és GPU-használatot adott animációnként a webhelyemen? Tudom, hogyan kell látni a webhely teljes használatát, de nem egy egyedi animációt.

Mit próbáltam?

  • Google Dev Tools
  • Firefox fejlesztői eszközök
  • Console.profile / Console.profileend
javascript animation jquery css
22.02.2016

  • Nincsenek böngészőalapú eszközök a JS/CSS CPU-használatának nyomon követésére. Leginkább azért, mert a jó, jól optimalizált kód soha nem érheti el a CPU szűk keresztmetszetét. Csak annyit tehet, hogy használja a Feladatkezelő teljesítmény lapját 22.02.2016
  • A Chrome-ban van egy Feladatkezelő a CPU-használathoz és a JS-memóriához 22.02.2016

Válaszok:


1

A Chrome Devben számos eszköz található, amelyek segíthetnek. Az animáció elemzésekor meg kell vizsgálnia egy adott képkockára vagy kerettartományra vonatkozó információkat.

Javaslom ebből a dokumentumból kiindulni:

https://developer.chrome.com/devtools/docs/timeline

Fontolja meg a következők értékelését:

  • Keretek mód, amely az oldal megjelenítési teljesítményét mutatja.
  • Idővonal felvételek elemzése

Firefoxban használhatja a frame-rate értéket a szűk keresztmetszetek jelzőjeként, különösen az animációval kapcsolatos problémák esetén. Ezekről az eszközökről itt olvashat bővebben:

https://developer.mozilla.org/en-US/docs/Tools/Performance/Frame_rate

Azt is láthatja, hogy mennyi GPU időt töltöttek az egyes képkockák összeállításával a Firefox beépített profiljában:, további információkat itt talál:

https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Profiling_with_the_Built-in_Profiler

22.02.2016
  • Megtekintheti a teljes alkalmazás CPU- és memóriahasználati szintjét, ha a Feladatkezelőt a Chrome/More Tools vagy Shift + Esc közül választja (de ezt valószínűleg már tudja). 22.02.2016
    • Új anyagok
    A rádiógomb ellenőrzött eseményének használata a jQueryben
    Ebben a cikkben látni fogjuk, hogyan kell dolgozni a jquery választógombbal ellenőrzött eseményeivel. A választógombok HTML gombok, amelyek segítenek kiválasztani egyetlen értéket egy csoportból...
    Körkörös függőségek megoldása terraformban adatforrásokkal – lépésről lépésre
    Mi az a körkörös függőségek Dolgozzunk egy egyszerű eseten, amikor az SQS-sor és az S3-vödör közötti körkörös függőség problémája van egy egymástól függő címkeérték miatt. provider..
    Miért érdemes elkezdeni a kódolást 2023-ban?
    01100011 01101111 01100100 01100101 — beep boop beep boop Világunk folyamatosan fejlődik a technológia körül, és naponta fejlesztenek új technológiákat a valós problémák megoldására. Amint..
    🎙 Random Noise #2  – Örökbefogadás és hit
    az analitika íratlan világának gondozása Szeretné, hogy ezek a frissítések a postaládájába kerüljenek? Iratkozzon fel itt . "Ha önvezető autókat gyártanak, akkor mi miért ne..
    A legrosszabb politika és prediktív modellek májátültetésre jelöltek számára az Egyesült Államokban
    A máj (vagy óangolul lifer) az emberi test legnehezebb belső szervére utal, amely csendesen működik a nap 24 órájában. Mit csinál a máj? 500 feladatot hajt végre a szervezet egészségének..
    5 webhely, amely 2022-ben fejleszti front-end fejlesztői készségeit
    Frontendmentor.io A tényleges projektek létrehozásával a Frontendmentor.io segítséget nyújt a front-end kódolási képességeinek fejlesztésében. A kódolást azután kezdheti meg, hogy..
    Mikor kell használni a Type-t az interfészhez képest a TypeScriptben?
    A TypeScript a JavaScript gépelt szuperkészlete, amely statikus gépelést ad a nyelvhez. Ez megkönnyíti a robusztus és karbantartható kód írását azáltal, hogy a hibákat a fordítási időben..