חדש: שליפה מראש של NoState

Katie Hempenius
Katie Hempenius
X

פתיח

NoState Prefetch הוא מנגנון חדש ב-Chrome שהוא חלופה לתהליך העיבוד מראש שיצא משימוש, שמשמש להפעלת תכונות כמו <link rel="prerender">. כמו בעיבוד מראש, הוא מאחזר משאבים מראש, אבל בניגוד לעיבוד מראש, הוא לא מפעיל JavaScript או מעבד חלק כלשהו בדף מראש. המטרה של שליפה מראש (prefetch) של NoState היא להשתמש בפחות זיכרון מעיבוד מראש, ועדיין לקצר את זמני הטעינה של הדף.

שליפה מראש של NoState היא לא API אלא מנגנון שמשמש את Chrome להטמעת תכונות וממשקי API שונים. ה-Resource Hints API והשליפה מראש (prefetch) של דפים באמצעות סרגל הכתובות של Chrome, שניהם מוטמעים באמצעות NoState Prefetch. ב-Chrome בגרסה 63 ואילך, הדפדפן כבר משתמש בשליפה מראש מסוג NoState לתכונות כמו <link rel="prerender">.

במאמר הזה נסביר איך פועלת התכונה NoStatePrefetch, מה המניעים להצגתה ואיך אפשר להשתמש בהיסטוגרמות של Chrome כדי להציג נתונים סטטיסטיים לגבי השימוש בה.

למה בחרנו לעשות זאת?

היו שני מניעים עיקריים לשימוש בשליפה מראש של NoState:

הפחתת שימוש בזיכרון

שליפה מראש של NoState משתמשת בזיכרון בנפח של כ-45MiB. תחזוקה של סורק הטעינה מראש היא הוצאה הזיכרון הראשית של NoState Prefetch, והעלות הזו נשארת קבועה יחסית בתרחישים שונים לדוגמה. להגדלת הגודל או הנפח של האחזורים אין השפעה משמעותית על כמות הזיכרון שצורכת השליפה מראש של NoState.

לעומת זאת, כשעיבוד מראש צורך בדרך כלל 100MiB, צריכת הזיכרון מוגבלת ל-150MiB. בגלל צריכת הזיכרון הגבוהה הזו, הוא לא מתאים למכשירים פשוטים (כלומר 512MB של זיכרון RAM). כתוצאה מכך, Chrome לא מבצע עיבוד מראש במכשירים מתקדמים, ובמקום זאת מתבצע חיבור מראש.

מתן תמיכה בתכונות חדשות של פלטפורמת האינטרנט

בעיבוד מראש לא צריכות להתרחש פעולות גלויות למשתמש (למשל, הפעלת מוזיקה או סרטון) או פעולות שמירת מצב (למשל, שינוי סשן או אחסון מקומי). עם זאת, יכול להיות קשה ומורכב למנוע את הפעולות האלה במהלך עיבוד דף. שליפה מראש של NoState מאחזרת משאבים רק מראש: היא לא מפעילה קוד ולא מעבדת את הדף. כך קל יותר למנוע פעולות גלויות למשתמשים או שהן שומרות על מצב.

הטמעה

בשלבים הבאים מוסבר איך פועלת שליפה מראש של NoState.

  1. NoStatePrefetch מופעל.

    רמז לעיבוד מראש (כלומר, <link rel="prerender">) וחלק מהתכונות של Chrome יפעילו את השליפה מראש של NoState, בתנאי ששני התנאים הבאים יתקיימו: א) המשתמש לא נמצא במכשיר בסיסי, וב) המשתמש לא מחובר לרשת סלולרית.

  2. נוצר מעבד חדש ייעודי לשליפה מראש (prefetch) של NoState.

    ב-Chrome, כלי לעיבוד (renderer) הוא תהליך שאחראי ללקיחת מסמך HTML, לניתוח שלו, לבניית עץ העיבוד שלו ולציור התוצאה על גבי המסך. לכל כרטיסייה ב-Chrome, וכן לכל תהליך של שליפה מראש מסוג NoState, יש מעבד משלו שמאפשר בידוד. זה עוזר למזער את ההשפעות של משהו משתבש (למשל, קריסת כרטיסייה) ולמנוע מקוד זדוני לגשת לכרטיסיות אחרות או לחלקים אחרים של המערכת.

  3. המשאב שנטען עם שליפה מראש של NoState מאוחזר. לאחר מכן, ה-HTMLPreloadScanner סורק את המשאב הזה כדי לגלות משאבי משנה שצריך לאחזר. אם למשאב הראשי או לאחד ממשאבי המשנה שלו יש קובץ שירות (service worker) רשום, הבקשות האלה יועברו דרך ה-Service Worker המתאים.

    ב-NoState Prefetch תומך רק בשיטת GET HTTP. היא לא תאחזר משאבי משנה שמחייבים שימוש בשיטות HTTP אחרות. בנוסף, הוא לא יאחזר משאבים שמחייבים פעולות משתמש (למשל, חלונות קופצים של אימות, אישור לקוח SSL או שינויים ידניים).

  4. משאבי המשנה שיאוחזרו יאוחזרו עם עדיפות נטו "IDLE".

    העדיפות נטו "IDLE" היא הנמוכה ביותר האפשרית ב-Chrome.

  5. כל המשאבים שאוחזרו על ידי NoState Prefetch נשמרים במטמון בהתאם לכותרות המטמון שלהם.

    התכונה NoState Prefetch שומרת את כל המשאבים במטמון, מלבד אלה עם הכותרת no-store Cache-Control. אם יש Vary כותרת תגובה, no-cache או אם המשאב קיים יותר מ-5 דקות, יתבצע אימות מחדש של משאב לפני השימוש.

  6. ה-Renderer מושבת אחרי שכל משאבי המשנה נטענים.

    אם תם הזמן הקצוב למשאבי המשנה, הרינדור יושבת לאחר 30 שניות.

  7. הדפדפן לא מבצע שינויים במצב מלבד עדכון של אחסון קובצי ה-cookie ומטמון ה-DNS המקומי. חשוב לציין זאת כי זהו ה-NoState ב-NoState Prefetch.

    בשלב הזה של טעינת הדף ה'רגיל', הדפדפן כנראה יבצע פעולות שישנו את מצב הדפדפן: לדוגמה, הפעלת JavaScript, שינוי של sessionStorage או localStorage, הפעלת מוזיקה או סרטונים, שימוש ב-History API או הצגת בקשה למשתמש. שינויי המצב היחידים שמתרחשים באחזור מראש של NoState הם העדכון של מטמון ה-DNS כשהתגובות מתקבלות, והעדכון של מאגר קובצי ה-cookie אם תגובה מכילה את הכותרת Set-Cookie.

  8. כשיש צורך במשאב, הוא נטען לחלון הדפדפן.

    עם זאת, בניגוד לדף שעבר עיבוד מראש, הדף לא יהיה גלוי באופן מיידי – הוא עדיין צריך לעבור רינדור על ידי הדפדפן. הדפדפן לא ישתמש שוב בכלי לרינדור שבו הוא השתמש לשליפה מראש מסוג NoState, ובמקום זאת ישתמש ברינדור חדש. אם לא מעבדת את הדף מראש, מפחיתה את צריכת הזיכרון של NoStatePrefetch, אבל גם מפחיתה את ההשפעה האפשרית על זמני הטעינה של הדף.

    אם לדף יש קובץ שירות (service worker), טעינת הדף הזו תעבור שוב על ה-Service Worker.

    אם השליפה מראש של NoState לא סיימה לאחזר משאבי משנה עד לזמן שבו נדרש הדף, הדפדפן ימשיך בתהליך טעינת הדף מהמקום שבו הפסיקה שליפה מראש (NoState). הדפדפן עדיין יצטרך לאחזר משאבים, אבל לא את המספר הנחוץ אם לא הופעל שליפה מראש מסוג NoState.

ההשפעה על ניתוח התנהגות המשתמשים

דפים שנטענים באמצעות שליפה מראש של NoState נרשמים בכלי לניתוח התנהגות המשתמשים בזמנים שונים מעט, בהתאם למקרים שבהם הכלי אוסף נתונים בצד הלקוח או בצד השרת.

הסקריפטים של Analytics בצד הלקוח רושמים צפייה בדף כשהדף מוצג למשתמש. הסקריפטים האלה מסתמכים על הביצוע של JavaScript, והשליפה מראש של NoState לא מפעילה JavaScript.

כלים בצד השרת לניתוח נתונים רושמים מדדים כשבקשה מטופלת. למשאבים שנטענים באמצעות שליפה מראש (prefetch) של NoState, עשוי להיות פער זמן משמעותי בין הטיפול בבקשה לבין השימוש בפועל בתגובה (אם נעשה בה שימוש). החל מגרסה 69 של Chrome, NoState Prefetch מוסיפה את הכותרת Purpose: Prefetch לכל הבקשות כדי שיהיה קל להבדיל בינן לבין הגלישה הרגילה.

אני רוצה לראות

התכונה NoStatePrefetch נשלחה בדצמבר 2017 ב-Chrome 63. השפה משמשת כרגע כדי:

  • יישום הרמז למשאב prerender
  • אחזור של התוצאה הראשונה בתוצאות החיפוש ב-Google
  • אחזור דפים שלפי התחזית של סרגל הכתובות של Chrome צפויים לבקר בהם

אפשר להשתמש בנתונים הפנימיים של Chrome כדי לראות איך השתמשת ב-NoStatePrefetch.

כדי להציג את רשימת האתרים שנטענו באמצעות NoState Prefetch, עוברים אל chrome://net-internals/#prerender.

כדי להציג נתונים סטטיסטיים לגבי השימוש ב-NoState Prefetch, עוברים לכתובת chrome://histograms ומחפשים את "NoStatePrefetch". יש שלוש היסטוגרמות שונות של NoState Prefetch – אחת לכל תרחיש שימוש ב-NoState Prefetch:

  • NoStatePrefetch (נתונים סטטיסטיים לשימוש באמצעות רמזים של משאב לעיבוד מראש)
  • "gws_NoStatePrefetch" (נתונים סטטיסטיים לשימוש בדף תוצאות החיפוש ב-Google)
  • 'address_NoStatePrefetch' (נתונים סטטיסטיים של שימוש בסרגל הכתובות של Chrome)