תוסף מיוחד ל-Chrome לדיבאג
React Developer Tools - Profiler
Reload and start profiling, ממתינים כמה שניות ועוצרים. אפשר גם Start recording ו-Stop recording סביב פעולה ספציפית, כמו כניסה לדף Support.Flame Graph מציג את הקומפוננטות כלהבה הפוכה, ו-Ranked Chart מציג מהגרוע לטוב מבחינת זמן. כך רואים מה לקח הכי הרבה זמן. בדוגמה הקומפוננטה Audio לקחה הכי הרבה זמן, ובהקלטה אחרת Styled Button לקח 26 מילי-שניות, מה שנחשב הרבה. המרצה מעיר שיש ל-Styled Components הרבה עבודה מאחורי הקלעים ושאינו נגדם.Highlight updates when components render מסמנת ריבוע סביב כל קומפוננטה שמרונדרת בזמן אמת. כך רואים שהשעון מרנדר בכל שנייה, ושבהקלדה או בלחיצה על Set Seller Item מרונדרת הקומפוננטה כולה.Record why each component rendered while profiling מציגה סיבה לכל רינדור. אצל השעון הסיבה היתה Hook 1 changed.Save profile שומר את הנתונים כקובץ JSON, ו-Load profile טוען אותו. אפשר להשוות לפרופיל אחר או לשלוח למתכנת אחר.פרקי ההרצאה: תוסף מיוחד ל-Chrome לדיבאג React Developer Tools - Profiler
תמלול ההרצאה: תוסף מיוחד ל-Chrome לדיבאג React Developer Tools - Profiler
הטקסט המלא של הדקות הראשונות בהרצאה «תוסף מיוחד ל-Chrome לדיבאג React Developer Tools - Profiler» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אנחנו מגיעים לחלונית הפרופיילר. פרופיילר מאפשר לנו לבדוק את הפרפורמנס של האתר שלנו. קודם כל, אם אנחנו מרפרשים בצורה כזאת, שום דבר לא קורה.
הפרופיילר לא באמת עובד, לא באמת עושה שום דבר. מה שאנחנו צריכים לעשות זה ללחוץ על ה-reload and start profiling.
בואו נלחץ עליו, נחכה כמה שניות שהאתר יחשוב ונעצור אותו. הדבר הראשון שאנחנו צריכים להתבונן בו בכלי הזה שנקרא פרופיילר זה על החלונית הקטנה הזאת.
אנחנו רואים פה 1 עד 6 וזה בעצם סייקלים של ריאקט, סייקלים פנימיים שריאקט מבצעת בתהליך של האתר. ואנחנו רואים שיש פה 6 סייקלים שהתרחשו ואם אתם רואים פה בקטן אנחנו כאילו מצביעים על הסייקל הגבוה הזה והחצים יכולים להזיז אותנו לסייקל הבא, הבא, הבא והבא.
ועוד פעם חזרה, בואו נבין מה זה. זה בעצם הפעולות הפנימיות שריאקט ביצעה בפעילות הפנימית שלה, מה שנקרא, לדוגמה עדכון ה-UI ועוד כל מיני תהליכים פנימיים.
אז אנחנו רואים כרגע שיש פה שישה סייקלים שהתבצעו בזמן הזה שאנחנו הקלטנו, וכאשר אנחנו נמצאים בסייקל הראשון אנחנו רואים שהיו פה המון פעולות, וזה בעצם הרנדרינג שהתבצעו על הקומפוננטות השונות.
יכולים לבחור ולראות כאן רנדר דעת כמה זמן זה לקח לו. יש פה גם צבעים והצבעים הם חשובים ירוק זה אומר שזה מצב טוב ככל שהוא יותר ויותר צהוב זה פחות טוב וגם אם הוא היה ממש ממש גרוע מבחינת זמנים הוא היה אדום.
אורייט אבל למה יש לנו פה כל כך הרבה סייקלים בואו רגע נעבור לסייקל הבא ונראה שיש לנו פה אפורים ואפור זה אומר did not render אתם רואים הוא כותב לי את זה בחלונית השחורה.
אז מה קרה כאן שהוא לא did render כאילו אם הוא לא ביצע שום דבר למה היה לנו את כל הסייקל הזה כי יש לנו פה את הצהוב והצהוב זה הקלוק הקלוק כן התרנדר לכן זה מבחינת ריאפט היה סייקל נוסף שבזמן הזה היא הייתה צריכה לעדכן את ה-UI אבל רק את הקומפוננטה הזאת היא מאוד יעילה היא לא מתקנת את כל
אדום ומרנדרת את כל אדום. מה שהיא צריכה באותו רגע. בואו נעבור לסייקל הבא, וכל הסייקלים האמת האחרי זה, זה רק אותו שעון שאנחנו רואים שפשוט רינדר את עצמו. אלה הסייקלים, אלה הפעולות שהתבצעו.
יש לנו כאן אפשרות לצפות בכל הפעולות האלה בשני סוגים של גרפים. יש לנו את הגרף הזה שנקרא Flame Graph, גרף להבה, כי אם תסתכלו על זה למטה זה כאילו להבה הפוכה כזאת.
אז כל הדבר הזה נראה כמו להבה הפוכה, וזה מה שהוא מציג. אם אני לוחץ על מישהו אני רואה אותו, אני יכול להגדיל אותו ולראות יותר נתונים עליו ולהחזיר את זה בחזרה.
והנה לנו את הגרף הזה שנקרא Ranked Chart שמראה לנו את אותו דבר אבל שימו לב לצבעים הוא מראה לנו את זה מהכי גרוע להכי טוב מבחינת רינדור, מבחינת זמנים.
כאן אנחנו יכולים בעצם להתבונן ולהגיד רגע רגע האודיו לקח לו הכי הרבה זמן אוקיי אולי משהו לא בסדר באאודיו אולי אנחנו יכולים לשפר את הפרפורמנס שלו, אולי יש שם איזה טעינה של משהו שלוקח לו הרבה זמן וזה ממש עוזר לנו מבחינת ההבנה של הפרפורמנס
של האתר שלנו. חוץ מהרפרש הזה אנחנו יכולים גם להקליט פעולות, אז בואו רגע ננקה את המסך, נלחץ על סטארט ריקורדינג וניגש לספורט וסטופ ריקורדינג.
כמה סייקלים היו לנו פה? היו לנו פה שני סייקלים אנחנו רואים, קלוק שהזדנב לו שמה והנה הסייקל האמיתי של התאנה של הסאפורט רציתי רק לטעון את הסאפורט הקלוק סתם נכנס כאן אני לא רוצה להתייחס אליו אז אנחנו יכולים כמובן להציג את זה בפליים ואנחנו יכולים להציג את זה ברנקט וכאן