Οδηγοί · 03
Απόδοση
Τι κοστίζουν τα components στο web, μετρημένο σε αυτή την έκδοση, και πώς αναπαράγονται οι αριθμοί.
Μετρήσεις
Μετρήθηκε στις 2026-09-28 με Chrome 153.0.8010.52 (headless, Playwright). Κάθε νούμερο προγράμματος περιήγησης είναι το μεγαλύτερο από τρεις εκτελέσεις.
| Τι | Πώς μετριέται | Αποτέλεσμα |
|---|---|---|
| Μέγεθος πακέτου | Ολόκληρο το σημείο εισόδου web (και τα 16 exports) πακεταρισμένο και συμπιεσμένο με esbuild, React εξωτερικό, gzip επιπέδου 9 | 28.0 KB (84.3 KB συμπιεσμένο) |
| Ένα component | Μόνο το MotionNumber εισηγμένο, ίδιο πακετάρισμα | 18.6 KB |
| Callbacks καρέ JS | Κλήσεις requestAnimationFrame στη σελίδα επί 1,2 s ενώ τα MotionNumber, MotionHeight και MotionHighlight αλλάζουν μαζί (12 κινήσεις σε εξέλιξη) | 0 |
| React commits ανά αλλαγή | Commits του Profiler γύρω από το MotionNumber για 10 αλλαγές τιμής, η καθεμία αφήνεται να ολοκληρωθεί | 10 για 10 αλλαγές |
| Ροή | Commits του Profiler ενώ το MotionStream εμφανίζει 3000 χαρακτήρες που έφτασαν μονομιάς (περίπου 4081 ms) | 11 |
| Διακοπές | 200 νέες τιμές με απόσταση 5 ms, μετά παύση: κινήσεις που απέμειναν στη σελίδα και αν το τελικό κείμενο είναι ακριβές | Απέμειναν 0, ακριβές κείμενο |
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
Γιατί είναι γρήγορο
Τέσσερις σχεδιαστικές επιλογές κρατούν το κόστος χαμηλά.
- Καμία βιβλιοθήκη κίνησης στο web: η κίνηση παραδίδεται στο Web Animations API του προγράμματος περιήγησης, με ελατήρια αναλυτικής δειγματοληψίας.
- Καμία απόδοση React ανά καρέ: τα components αποδίδονται όταν αλλάζουν τα δεδομένα σας, όχι ενώ κινούνται.
- Το κείμενο σε ροή προστίθεται απευθείας στη σελίδα και ενσωματώνεται στην κατάσταση του React μόνο λίγες φορές το δευτερόλεπτο.
- Κάθε component στέκεται μόνο του: δεν υπάρχει provider που ξαναποδίδει το δέντρο ούτε καθολικό store.
Όρια
Το MotionStream χρησιμοποιεί βρόχο animation frame όσο εμφανίζει κείμενο· είναι το μόνο component που χρειάζεται δουλειά σε κάθε καρέ. Στο React Native οι αλλαγές πλάτους και ύψους τρέχουν στον JS driver επειδή είναι διάταξη. Οι μετρήσεις περιγράφουν ένα μηχάνημα και ένα πρόγραμμα περιήγησης, οπότε οι δικοί σας αριθμοί θα διαφέρουν.
Αναπαραγωγή
Τα νούμερα προέρχονται από ένα script στο αποθετήριο του ιστότοπου. Πακετάρει τη βιβλιοθήκη, ανοίγει το εγκατεστημένο Chrome χωρίς παράθυρο, εκτελεί κάθε σενάριο τρεις φορές και γράφει τα αποτελέσματα που διαβάζει αυτή η σελίδα.
node scripts/measure-chorus.mjs