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