JavaScript performance
JavaScript teljesítmény: bundle méret, parse/compile, long task, code splitting, hydration és miért számít a kevesebb kliensmunka az INP-nél.
Röviden
A JavaScript költsége nem áll meg a letöltött kilobyte-nál. A böngészőnek parse-olnia, fordítania és futtatnia is kell a kódot, miközben a main thread a felhasználói interakciók és rendering jelentős részét is kiszolgálja.
Mit jelent a javascript performance?
A JavaScript költsége nem áll meg a letöltött kilobyte-nál. A böngészőnek parse-olnia, fordítania és futtatnia is kell a kódot, miközben a main thread a felhasználói interakciók és rendering jelentős részét is kiszolgálja.
Main thread és feladatok
Call stack
main()
Microtask queue
Promise.then
Task queue
setTimeout
Kimenet
–
Hogyan működik a gyakorlatban?
Nagy initial bundle, drága hydration, túl sok third-party script és hosszú szinkron task mind növelheti a blocking időt. Code splitting, server-side munka, kevesebb dependency és task yielding csökkentheti a kliens terhelést.
- Route-szintű és component-szintű code splitting eltérő lehetőséget ad.
- Tree shaking csak statikusan elemezhető, megfelelően csomagolt moduloknál hatékony.
- Third-party scriptet is a te oldalad main threadje futtat.
- Long task feldarabolása javíthatja az input válaszkészségét.
Gyakorlati fejlesztői szemlélet
Bundle analyzer mellett performance trace-et is nézz. Egy 20 kB library lehet drágább, ha sok CPU-t futtat, mint egy 50 kB adatcsomag; a byte csak egy dimenzió.
Gyakori hibák és félreértések
- Minificationt teljes JS optimalizálásnak gondolni.
- Minden komponenst klienskomponenssé tenni egyszerűségből.
- Third-party script teljes költségét a szolgáltató marketingoldala alapján becsülni.
Források és szabványok
A technikai részletekhez elsődleges szabványokat és karbantartott hivatalos dokumentációt használok. Frameworkök, böngészők és webes API-k idővel változhatnak, ezért implementálás előtt mindig ellenőrizd az aktuális dokumentációt is.
Kapcsolódó ByBence Academy