החלונית 'רשת' בכלי הפיתוח שבדפדפן עוזרת לזהות מהם המשאבים נטען ומתי הם נטענים. כל שורה בחלונית 'רשת' תואמת כתובת URL ספציפית שאפליקציית האינטרנט שלך טענה.
חשוב לדעת מה טוענים
כדי ללמוד את אסטרטגיות השמירה במטמון שמתאימות לאפליקציית האינטרנט שלכם מקבל טיפול מה בדיוק בטעינה. כשאתם בונים אתר אינטרנט אמין הרשת יכולה להיות כפופה לכל מיני סוגים של כוחות אפלים. צריך: להבין את נקודות החולשה של הרשת, אם אתם מקווים להתמודד איתן אפליקציה.
אתם עשויים לחשוב שכבר יש לכם מושג די טוב לגבי התוכן נטענת. אם אתם משתמשים רק בפיזור קטן של HTML סטטי, ייתכן שזה נכון גם ב-JavaScript, ב-CSS ובקובצי תמונה. אבל ברגע שמתחילים לשלב משאבים של צד שלישי שמתארחים ברשתות להעברת תוכן, באמצעות בהתאם לבקשות API דינמיות ותגובות שנוצרו על ידי השרת, התמונה הופכת במהירות Murkier.
אסטרטגיית שמירה במטמון שמתאימה לכמה קובצי CSS קטנים, סביר להניח שלא תצליח למשל מאות תמונות גדולות.
קבלת עדכון על טעינה
חלק נוסף מתמונת הטעינה הכוללת הוא כשהכול נטען.
בקשות מסוימות לרשת, כמו בקשת ניווט ל-HTML הראשוני, מבוצעים ללא תנאי ברגע שמשתמש מבקר בדף נתון כתובת URL. ה-HTML הזה עשוי להכיל הפניות בתוך הקוד אל CSS או JavaScript קריטיים. שחייבים גם להיטען כדי להציג את הדף האינטראקטיבי. האלה הבקשות נמצאות בנתיב הטעינה הקריטי שלכם. אתם צריכים לפעול באופן אגרסיבי לשמור אותן במטמון כדי שיהיו מהירים באופן מהימן.
יכול להיות שמשאבים אחרים, כמו בקשות API או נכסים בטעינה מדורגת, לא עוד לפני שכל הטעינה הראשונית תסתיים. אם המיקום הבקשות האלה מתרחשות רק לאחר רצף מסוים של אינטראקציות משתמש, יכול להיות שבסופו של דבר תוצג בקשה לקבוצה שונה של משאבים בביקורים מרובים באותו הדף. אסטרטגיה פחות אגרסיבית של שמירה במטמון מתאימים בדרך כלל לתוכן שזיהיתם מחוץ נתיב טעינה קריטי.
העמודות 'שם' ו'סוג' עוזרות
העמודות 'שם' ו'סוג' עוזרות לספק תמונה משמעותית של מה נטען. התשובה ל"מה נטען?" בדוגמה שלמעלה הוא כולל ארבע כתובות URL, שכל אחת מהן מייצגת סוג ייחודי של תוכן.
השם מייצג את כתובת ה-URL שהדפדפן ביקש, אבל אפשר לראות רק
את החלק האחרון בנתיב של כתובת ה-URL. לדוגמה, אם
https://example.com/main.css נטען, ובסופו של דבר יוצג לך רק main.css
שרשומים בקטע 'שם'.
התווים האחרונים בנתיב של כתובת ה-URL, אחרי
(למשל, 'css') נקראים 'הסיומת של כתובת ה-URL'.
בדרך כלל, התוסף של כתובת ה-URL מראה מה סוג המשאב המבוקש
וממפה ישירות למידע שמוצג בעמודה 'סוג'. לדוגמה,
v2.html הוא מסמך, ו-main.css הוא גיליון סגנונות.
העמודה 'Waterfall' עוזרת במקרים שבהם
בוחנים את עמודת ה-Waterfall, מתחילים מהחלק העליון וממשיכים למטה. האורך של כל עמודה מייצג את משך הזמן הכולל שהוקדש לטעינה בכל משאב. איך אפשר להבחין בין בקשה שמבוצעת בתור חלק מנתיב הטעינה הקריטי ובקשה שמופעלת באופן דינמי, הרבה אחרי שהטעינה הראשונית של הדף הושלמה?
הבקשה הראשונה ב-Waterfall תמיד תהיה למסמך ה-HTML,
לדוגמה, v2.html. כל הבקשות הבאות יעברו זרימה (למשל
Waterfall!) מבקשת הניווט הראשונית הזו, על סמך תמונות, סקריפטים
ומעצב את ההפניות למסמך ה-HTML.
לפי רשימת ה-Waterfall, מיד אחרי סיום טעינת הבקשות על ידי v2.html,
של הנכסים שהיא מפנה אליהם (שנקראים גם משאבי משנה).
הדפדפן יכול לבקש כמה משאבי משנה בו-זמנית,
שמיוצגים על ידי העמודות החופפות בעמודה Waterfall של main.css וגם
logo.svg. לבסוף, אפשר לראות מצילום המסך ש-main.js מתחיל
בטעינה האחרונה, והטעינה תסתיים אחרי ששלוש כתובות ה-URL האחרות הושלמו
וגם.