כמה ניסויים על ביצועים וקומפוננטות בריאקט
חבר שואל - באיזו מידה החלוקה לקומפוננטות בריאקט ובחירת האפקטים משפיעה על זמן טעינת העמוד? ואיך אני יכול למצוא קומפוננטות בעייתיות?
התשובה שבהחלט יש קשר, יש כמה דברים שמאוד כדאי להיזהר מהם וגם כלי הפיתוח יכולים לתת תמונה לא רעה של מה קורה וכמה זמן זה לוקח. נתחיל בטאב Performance של כלי הפיתוח של כרום. טאב זה מציג תקציר של מה עשה הדפדפן ובצהוב הוא מציג כמה זמן הדפדפן בילה בהרצת סקריפטים. בשביל המשחק כתבתי תוכנית שנראית בערך כך:
import { useState, useLayoutEffect, memo, useEffect } from 'react'
import './App.css'
const Text = function Text() {
return <p>Hello World</p>
}
function App() {
return (
<div>
{new Array(10000).fill(0).map((_, i) => <Text key={i} />)}
</div>
)
}
export default App
וניסיתי לבדוק מה קורה כשאני מוסיף או מוריד פקודות מהקומפוננטה. אלה כמה תוצאות שראיתי אצלי על המחשב:
תוספת useEffect ריק בתוך הקומפוננטה מעלה בערך פי 1.5 את זמן ביצוע הסקריפט.
ירידה מ 10,000 קומפוננטות טקסט ל 1,000 קומפוננטות טקסט מתורגמת לזמן ריצת סקריפט פי 5 יותר מהיר.
העברת הפיסקה לתוך גוף הלולאה (כלומר מחיקה לגמרי של קומפוננטת Text) מאיצה את זמן הריצה שוב פי 5, כלומר אותו אפקט כמו לרדת לעשירית מכמות הקומפוננטות.
הוספת memo לקומפוננטה מאטה קצת את זמן הריצה.
הוספת state לקומפוננטה כמעט ולא משפיעה על זמן הריצה.
את כל הבדיקות הרצתי בלי StrictMode כדי לא לבלבל אבל כן במצב פיתוח. התוצאות במצב פרודקשן עשויות להיות קצת שונות, למרות שהעקרונות הבסיסיים כנראה יישמרו:
אפקטים צריכים לרוץ אחרי Mount ובכל עדכון ולכן בעלי השפעה משמעותית על זמן הרצת הסקריפט בדפדפן. כדאי לשים לב במיוחד לאפקט שמופעל על קומפוננטה שמופיעה הרבה פעמים על המסך.
קומפוננטות דורשות משמעותית יותר משאבים מ DOM Elements. לפעמים שווה לאחד כמה קומפוננטות כדי לשפר ביצועים (בהנחה ששתיהן מושפעות מאותו State).
בשביל לזהות איזה קומפוננטות עשויות להיות בעייתיות בעמוד שלכם תוכלו להתקין את כלי הפיתוח של ריאקט ולמצוא שם את טאב Profiler שלהם. בטאב זה יש כפתור הקלטה. בשביל המשחק תוכלו להקליט את עליית העמוד שלכם ותוכלו לראות איזה קומפוננטות שם לוקחות הכי הרבה זמן מעבד בעלייה (תצטרכו להריץ את הדפדפן על גירסת פיתוח של האתר).