בשיעור הזה תלמדו איך לפרש את כל תעבורת הרשת באפליקציה לדוגמה שהיא קצת מורכבת. בסוף התרגיל, יהיו לכם הכישורים הדרושים כדי להבין מה נטען באפליקציית האינטרנט שלכם ומתי מתבצעת כל בקשה.
מעבר לחלונית 'רשת'
עוברים לחלונית Network (רשת) כדי לראות את תנועת הרשת של אפליקציית ההדגמה.
- מקישים על Control+Shift+J (או על Command+Option+J ב-Mac) כדי לפתוח את כלי הפיתוח.
- לוחצים על הכרטיסייה רשת.
- כדי לראות את תעבורת הרשת, טוענים מחדש את הדף.
בחלונית Network (רשת) מוצגים כל הנכסים שנטענו בגלל הניווט הראשוני:
איך לפרש את הרשומות
כל שורה בתנועת הרשת המתועדת מייצגת זוג של בקשה ותגובה.
השורה הראשונה, עם הסוג document, היא בקשת הניווט הראשונית ל-HTML של אפליקציית האינטרנט. זהו המקור של היררכיית מפל המים. כל הבקשות הבאות לנכסים נוספים (שנקראים משאבי משנה של המסמך הראשי) מגיעות מהמקור המקורי הזה.
השורות השנייה והשלישית, שבהן מוצג משאב משני של CSS stylesheet ומשאב משני של script שנטענים, הן בקשות תלויות שהופעלו על ידי המסמך הראשי.
אם בודקים מתי הבקשות האלה נשלחות, אפשר לראות בתרשים ה-Waterfall שהן לא מתחילות עד לשלב מאוחר מאוד בתהליך של מענה לבקשת הניווט.
כדי להציג את הדף המלא במהלך הניווט הראשוני, צריך את הבקשות למסמך ה-HTML, ל-CSS ול-JavaScript.
יצירת בקשות נוספות בזמן ריצה
כשלוח Network עדיין פתוח וההקלטה נמשכת, הגיע הזמן לדמות משהו שמשותף להרבה אפליקציות אינטרנט: בקשות API נוספות שמשמשות להוספת נתונים לדף אחרי שהניווט הראשוני מסתיים.
כדי להפעיל את הבקשות הנוספות האלה, לוחצים על Find Me באפליקציה ואז על Allow בחלון הקופץ שמופיע. הפעולה הזו תאפשר לאתר לגשת למיקום הנוכחי שלכם:
אחרי שאפליקציית האינטרנט מקבלת מיקום לעבודה, לחיצה על Find Nearby Wikipedia Entries (חיפוש ערכים בוויקיפדיה בקרבת מקום) גורמת לשליחה של כמה בקשות רשת נוספות. אמור להופיע משהו כזה:
הסבר על הרשומות החדשות
כמו קודם, כל שורה בתנועת הרשת המתועדת מייצגת צמד של בקשה ותגובה.
השורה הראשונה של הרשומות החדשות מייצגת בקשה עם סוג fetch, שמתאים לאופן שבו אפליקציית האינטרנט מבקשת נתונים מ-Wikipedia API.
כל השורות הבאות הן תמונות (png או jpeg) שמשויכות לערכים בוויקיפדיה. קשה לראות את זה בצילום המסך, אבל הערכים בעמודה Waterfall מגיעים ישירות מהתגובה של ה-API.
בכל הבקשות הנוספות האלה, הערך של when ישתנה בהתאם למשך הזמן שהדף היה פתוח לפני שלוחצים על Find Nearby Wikipedia Entries. הדבר הכי חשוב כאן הוא שהתנאי when מנותק מבקשת הניווט הראשונית. אפשר לראות את זה מהפער הגדול שמוצג בתצוגת רשימת הרשתות בתהליך בחירת הרשת, שמייצג תקופה שעברה בין הטעינה הראשונית לבין הזמן שבו מתבצעת הבקשה ל-API של ויקיפדיה.
בקשות שנשלחות אחרי הפסקה בניווט משויכות לקטגוריה 'בקשות בזמן ריצה', בניגוד לקבוצת הבקשות הראשונית שמשמשת להצגת הדף כשמנווטים אליו בפעם הראשונה.
סיכום
אחרי שסיימתם את השלבים ב-codelab הזה, אתם כבר מכירים את הכלים שבהם אפשר להשתמש כדי לנתח את הטעינה של כל אפליקציית אינטרנט.
החלונית Network (רשת) עוזרת לענות על השאלה מה נטען, באמצעות כתובות ה-URL בעמודה Name (שם) והנתונים בעמודה Type (סוג), וגם על השאלה מתי זה נטען, באמצעות התצוגה של תרשים המפל.
ראיתם גם שבקשות שדף אינטרנט שולח אפשר (בדרך כלל) לקבץ לאחת משתי קטגוריות:
- בקשות ראשוניות, שנשלחות מיד אחרי המעבר לדף חדש, עבור HTML, JavaScript, CSS (ועבור נכסים אחרים).
- בקשות בזמן ריצה שנוצרות כתוצאה מאינטראקציה של המשתמש עם הדף. התהליך הזה מתחיל בדרך כלל בבקשה ל-API, ואז ממשיך לכמה בקשות המשך על סמך נתוני ה-API שאוחזרו.