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