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

Katie Hempenius
Katie Hempenius
X

פורסם: 20 ביולי 2018

מבוא

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

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

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

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

היו שתי סיבות עיקריות להשקת התכונה 'טעינה מראש ללא מצב':

איך מצמצמים את השימוש בזיכרון

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

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

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

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

הטמעה

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

  1. מופעלת NoStatePrefetch.

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

  2. נוצר רכיב עיבוד ייעודי חדש לטעינה מראש של דפים ללא מצב.

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

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

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

  4. המשאבים המשניים שאוחזרו יאוחזרו עם עדיפות רשת 'במצב המתנה'.

    העדיפות ברשת 'במצב המתנה' היא העדיפות הכי נמוכה שאפשר להגדיר ב-Chrome.

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

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

  6. תהליך הרינדור מופסק אחרי שכל משאבי המשנה נטענים.

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

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

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

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

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

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

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

השפעה על ניתוח פעילות באינטרנט

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

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

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

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

התכונה NoStatePrefetch הושקה בדצמבר 2017 בגרסה 63 של Chrome. הוא משמש כרגע ל:

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

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

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

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

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