ಮಾರ್ಗದರ್ಶಿಗಳು · 03
ಕಾರ್ಯಕ್ಷಮತೆ
ವೆಬ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳ ವೆಚ್ಚ, ಈ build ನಲ್ಲಿ ಅಳೆದದ್ದು, ಮತ್ತು ಸಂಖ್ಯೆಗಳನ್ನು ಮತ್ತೆ ಪಡೆಯುವುದು ಹೇಗೆ.
ಅಳತೆಗಳು
2026-09-28 ರಂದು Chrome 153.0.8010.52 (headless, Playwright) ನಿಂದ ಅಳೆಯಲಾಗಿದೆ. ಪ್ರತಿ ಬ್ರೌಸರ್ ಸಂಖ್ಯೆ ಮೂರು ಓಟಗಳಲ್ಲಿ ಅತಿದೊಡ್ಡದು.
| ಏನು | ಹೇಗೆ ಅಳೆಯಲಾಗುತ್ತದೆ | ಫಲಿತಾಂಶ |
|---|---|---|
| ಪ್ಯಾಕೇಜ್ ಗಾತ್ರ | ಸಂಪೂರ್ಣ ವೆಬ್ ಪ್ರವೇಶ (ಎಲ್ಲ 16 export ಗಳು) esbuild ನಿಂದ bundle ಮತ್ತು minify, React external, gzip ಮಟ್ಟ 9 | 28.0 KB (84.3 KB minify ಮಾಡಲಾಗಿದೆ) |
| ಒಂದು ಕಾಂಪೊನೆಂಟ್ | MotionNumber ಮಾತ್ರ import ಮಾಡಲಾಗಿದೆ, ಅದೇ bundling | 18.6 KB |
| JS frame callback ಗಳು | MotionNumber, MotionHeight ಮತ್ತು MotionHighlight ಒಟ್ಟಿಗೆ ಬದಲಾಗುವಾಗ (12 ಅನಿಮೇಶನ್‌ಗಳು ನಡೆಯುತ್ತಿವೆ) 1.2 ಸೆಕೆಂಡ್ ಪುಟದಲ್ಲಿನ requestAnimationFrame ಕಾಲ್‌ಗಳು | 0 |
| ಪ್ರತಿ ಬದಲಾವಣೆಗೆ React commit ಗಳು | 10 ಮೌಲ್ಯ ಬದಲಾವಣೆಗಳಿಗೆ, ಪ್ರತಿಯೊಂದೂ ಮುಗಿಯಲು ಬಿಟ್ಟು, MotionNumber ಸುತ್ತಲಿನ Profiler commit ಗಳು | 10 ಬದಲಾವಣೆಗಳಿಗೆ 10 |
| ಸ್ಟ್ರೀಮಿಂಗ್ | ಒಮ್ಮೆಲೇ ಬಂದ 3000 ಅಕ್ಷರಗಳನ್ನು MotionStream ತೆರೆದುಕೊಳ್ಳುವಾಗ (ಸುಮಾರು 4081 ms) Profiler commit ಗಳು | 11 |
| ಅಡಚಣೆಗಳು | 5 ms ಅಂತರದಲ್ಲಿ 200 ಹೊಸ ಮೌಲ್ಯಗಳು, ನಂತರ ವಿರಾಮ: ಪುಟದಲ್ಲಿ ಉಳಿದ ಅನಿಮೇಶನ್‌ಗಳು ಮತ್ತು ಅಂತಿಮ ಪಠ್ಯ ನಿಖರವೇ | 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 Animations API ಗೆ, ವಿಶ್ಲೇಷಣಾತ್ಮಕವಾಗಿ ಮಾದರಿ ಮಾಡಿದ spring ಗಳೊಂದಿಗೆ, ಒಪ್ಪಿಸಲಾಗುತ್ತದೆ.
- ಪ್ರತಿ ಫ್ರೇಮ್‌ಗೆ React ರೆಂಡರ್ ಇಲ್ಲ: ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಚಲಿಸುವಾಗ ಅಲ್ಲ, ನಿಮ್ಮ ಡೇಟಾ ಬದಲಾದಾಗ ರೆಂಡರ್ ಆಗುತ್ತವೆ.
- ಸ್ಟ್ರೀಮ್ ಪಠ್ಯ ನೇರವಾಗಿ ಪುಟಕ್ಕೆ ಸೇರಿ, ಸೆಕೆಂಡಿಗೆ ಕೆಲವೇ ಬಾರಿ React state ಗೆ ಸೇರುತ್ತದೆ.
- ಪ್ರತಿ ಕಾಂಪೊನೆಂಟ್ ಸ್ವತಂತ್ರ: ವೃಕ್ಷವನ್ನು ಮತ್ತೆ ರೆಂಡರ್ ಮಾಡುವ Provider ಅಥವಾ ಜಾಗತಿಕ store ಇಲ್ಲ.
ಮಿತಿಗಳು
MotionStream ಪಠ್ಯ ತೆರೆದುಕೊಳ್ಳುವಾಗ animation frame ಲೂಪ್ ಬಳಸುತ್ತದೆ; ಪ್ರತಿ ಫ್ರೇಮ್‌ನಲ್ಲೂ ಕೆಲಸ ಬೇಕಾದ ಏಕೈಕ ಕಾಂಪೊನೆಂಟ್ ಇದು. React Native ನಲ್ಲಿ ಅಗಲ ಮತ್ತು ಎತ್ತರ ಬದಲಾವಣೆಗಳು ಲೇಔಟ್ ಆದ್ದರಿಂದ JS driver ಮೇಲೆ ನಡೆಯುತ್ತವೆ. ಅಳತೆಗಳು ಒಂದು ಯಂತ್ರ ಮತ್ತು ಒಂದು ಬ್ರೌಸರ್ ಅನ್ನು ವಿವರಿಸುತ್ತವೆ, ಹೀಗಾಗಿ ನಿಮ್ಮ ಸಂಖ್ಯೆಗಳು ಭಿನ್ನವಾಗಿರುತ್ತವೆ.
ಮತ್ತೆ ಪಡೆಯಿರಿ
ಸಂಖ್ಯೆಗಳು ವೆಬ್‌ಸೈಟ್ ರೆಪೊಸಿಟರಿಯ ಒಂದು script ನಿಂದ ಬರುತ್ತವೆ. ಅದು ಪ್ಯಾಕೇಜ್ bundle ಮಾಡಿ, ಇನ್‌ಸ್ಟಾಲ್ ಆದ Chrome ಅನ್ನು ವಿಂಡೋ ಇಲ್ಲದೆ ತೆರೆದು, ಪ್ರತಿ ಸನ್ನಿವೇಶವನ್ನು ಮೂರು ಬಾರಿ ನಡೆಸಿ, ಈ ಪುಟ ಓದುವ ಫಲಿತಾಂಶಗಳನ್ನು ಬರೆಯುತ್ತದೆ.
node scripts/measure-chorus.mjs