איך הדפדפן מחליט לשמור קובץ במטמון - ומתי הוא בכלל טורח לשאול את השרת¶
לוחצים F5, הדף עולה כמעט מיד. אבל אם תפתחו את כלי הפיתוח של הדפדפן ותסתכלו בלשונית הרשת, תגלו שרוב הקבצים בכלל לא הורדו שוב - הם הגיעו "מהמטמון" (from cache), בלי שום בקשה חדשה לרשת. איך הדפדפן יודע מתי מותר לו להשתמש בקובץ ישן, ומתי הוא חייב לבדוק מול השרת שהקובץ עדיין רלוונטי?
התשובה קבועה בכותרות שהשרת שולח¶
כל תשובת HTTP מגיעה עם כותרות (headers), ובתוכן מסתתרות ההוראות שקובעות בדיוק איך הדפדפן אמור להתייחס לקובץ הזה בהמשך. השרת, לא הדפדפן, הוא זה שקובע את המדיניות - הדפדפן רק מציית לה.
Cache-Control - ההוראה המרכזית¶
הכותרת החשובה ביותר נקראת Cache-Control, והיא יכולה להכיל כמה הוראות שונות:
- max-age. מספר שאומר כמה שניות הקובץ נחשב "טרי" בלי צורך לבדוק שוב מול השרת. קובץ CSS עם max-age של שנה אומר לדפדפן "תשתמש בעותק ששמרת, בלי לשאול אותי בכלל, עד שנה שלמה תעבור".
- no-cache. למרות השם המבלבל, זה לא אומר "אל תשמור בכלל". זה אומר "שמור, אבל תמיד תבדוק מול השרת אם יש גרסה חדשה לפני שאתה משתמש בעותק השמור".
- no-store. זו ההוראה שבאמת אומרת "אל תשמור את זה בכלל", בדרך כלל לתוכן רגיש שאסור שיישאר על המכשיר.
ETag ו-304 - הדרך החכמה לבדוק בלי להוריד הכל מחדש¶
מה קורה כשה-max-age פג, אבל הקובץ בפועל לא באמת השתנה? להוריד אותו שוב במלואו זה בזבוז. פה נכנס מנגנון בשם ETag - חתימה קצרה וייחודית שהשרת מצרף לכל קובץ, בעצם טביעת אצבע של התוכן הנוכחי שלו.
כשהדפדפן צריך לוודא שהעותק שלו עדיין תקף, הוא שולח בקשה עם כותרת If-None-Match שמכילה את ה-ETag שהוא כבר מחזיק. השרת משווה אותו ל-ETag העדכני של הקובץ. אם הם זהים, הקובץ לא השתנה, והשרת מחזיר תשובה עם קוד סטטוס 304 (Not Modified) בלי שום גוף תשובה בכלל - רק אישור קצר "מה שיש לך עדיין תקף". אם ה-ETag שונה, הקובץ החדש נשלח במלואו. זה נותן את הדיוק של בדיקה כל פעם, בלי המחיר של הורדה מיותרת של קובץ שלא באמת השתנה.
למה זה חשוב ולא סתם פרט טכני¶
הבחירה בין max-age ארוך, no-cache, או קובץ עם ETag היא בדיוק ההבדל בין אתר שנטען מיידית בביקור חוזר, לבין אתר שמוריד את כל אותם הקבצים בכל פעם מחדש. זו גם הסיבה שכשמעדכנים קובץ CSS או JavaScript באתר, ומשתמשים לא רואים את השינוי, לרוב זו בדיוק הבעיה - הדפדפן שלהם עדיין מחזיק עותק "טרי" לפי max-age, ולא טורח לבדוק בכלל.
הפתרון הנפוץ בעולם הפיתוח הוא לצרף לשם הקובץ חתימה שמשתנה בכל בנייה (למשל style.a3f21c.css), כך שכל שינוי אמיתי בתוכן יוצר כתובת חדשה לגמרי, שהדפדפן מעולם לא ראה, ומכריח אותו להוריד את הגרסה החדשה, בזמן שקבצים שלא השתנו ממשיכים ליהנות מ-max-age ארוך בלי שום פשרה.
איך זה מתחבר לכל שאר עולם התעבורה¶
הדפדפן הוא רק חוליה אחת בשרשרת - יש גם קאשינג בשרת עצמו, וגם קאשינג ב-CDN שיושב בין הדפדפן לשרת, וכל שכבה מתייחסת לאותן כותרות בדיוק כדי להחליט מה לשמור ולכמה זמן. הבנה של המנגנון הזה ברמת פרוטוקול ה-HTTP היא בדיוק הבסיס שאנחנו בונים עליו בקורס הרשתות, כדי שתדעו לא רק "לסמן קאש" אלא להבין מה קורה בפועל.
קורס הרשתות המלא נמצא כאן, חינם ובעברית, עם תרגול אמיתי על ניתוח תעבורת HTTP.
יש לכם עדכון באתר שלכם שמשתמשים לא רואים? שאלו בדיסקורד, כנראה זו בדיוק הבעיה הזאת.
לסיכום¶
הדפדפן לא מנחש מתי לשמור קובץ, הוא פשוט מציית להוראות מפורשות שהשרת שולח בכותרות - max-age שקובע כמה זמן להשתמש בעותק בלי לשאול, ו-ETag עם תשובת 304 שמאפשרים לבדוק תקפות בלי להוריד את הקובץ מחדש. שליטה נכונה בכותרות האלה היא ההבדל בין אתר מהיר לאתר שמוריד את עצמו מחדש בכל ביקור.