Przewodniki · 03
Wydajność
Ile kosztują komponenty sieciowe, zmierzone na tym buildzie, i jak odtworzyć te liczby.
Pomiary
Zmierzone 2026-09-28 z Chrome 153.0.8010.52 (headless, Playwright). Każda liczba z przeglądarki to największa z trzech prób.
| Co | Jak jest mierzone | Wynik |
|---|---|---|
| Rozmiar pakietu | Cały punkt wejścia dla sieci (wszystkie 16 eksportów) spakowany i zminifikowany przez esbuild, React zewnętrzny, gzip poziom 9 | 28.0 KB (84.3 KB po minifikacji) |
| Jeden komponent | Zaimportowany tylko MotionNumber, to samo pakowanie | 18.6 KB |
| Callbacki klatek JS | Wywołania requestAnimationFrame na stronie przez 1,2 s, gdy MotionNumber, MotionHeight i MotionHighlight zmieniają się razem (12 animacji w toku) | 0 |
| Zatwierdzenia React na zmianę | Zatwierdzenia Profiler wokół MotionNumber dla 10 zmian wartości, każda doprowadzona do końca | 10 na 10 zmian |
| Strumieniowanie | Zatwierdzenia Profiler, gdy MotionStream odsłania 3000 znaków, które przyszły naraz (około 4081 ms) | 11 |
| Przerwania | 200 nowych wartości co 5 ms, potem pauza: animacje pozostałe na stronie i czy tekst końcowy jest dokładny | Pozostało 0, tekst dokładny |
2026-09-28 · @kkwaenggwari/animated-chorus@0.1.0 · Chrome 153.0.8010.52 (headless, Playwright) · Windows_NT 10.0.22631 · Intel(R) Core(TM) i7-14700K
Dlaczego to jest szybkie
Cztery decyzje projektowe utrzymują niski koszt.
- Brak biblioteki animacji w sieci: ruch jest przekazywany do Web Animations API przeglądarki, ze sprężynami próbkowanymi analitycznie.
- Brak renderu React w każdej klatce: komponenty renderują się, gdy zmieniają się twoje dane, a nie w trakcie ruchu.
- Tekst strumieniowany jest dopisywany bezpośrednio do strony i wtapiany w stan React tylko kilka razy na sekundę.
- Każdy komponent jest samodzielny: nie ma providera, który ponownie renderuje drzewo, ani globalnego magazynu.
Ograniczenia
MotionStream używa pętli animation frame, gdy odsłania tekst; to jedyny komponent, który potrzebuje pracy w każdej klatce. W React Native zmiany szerokości i wysokości działają na sterowniku JS, bo to układ. Pomiary opisują jedną maszynę i jedną przeglądarkę, więc twoje liczby będą inne.
Odtwórz
Liczby pochodzą ze skryptu w repozytorium strony. Pakuje on pakiet, otwiera zainstalowany Chrome bez okna, uruchamia każdy scenariusz trzy razy i zapisuje wyniki, które czyta ta strona.
node scripts/measure-chorus.mjs