ה-API של 'מטמון לדף הקודם/הבא' notRestoredReasons ב-API

אפשר לראות אילו ניווטים נחסמו משימוש ב-bfcache, ומדוע.

Chris Mills
Barry Pollard

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

הסטטוס הנוכחי

‫notRestoredReasons API הושק מגרסה 123 של Chrome ומופץ בהדרגה.

מושגים ושימוש

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

בעבר, לא הייתה למפתחים דרך לגלות למה הדפים שלהם נחסמו משימוש במטמון bfcache בשטח, למרות שהייתה בדיקה בכלים למפתחים ב-Chrome. כדי להפעיל את המעקב בשטח, המחלקה PerformanceNavigationTiming הורחבה כך שתכלול את המאפיין notRestoredReasons. הפונקציה הזו מחזירה אובייקט שמכיל מידע קשור על המסגרת העליונה ועל כל ה-iframe שקיימים במסמך:

  • הסיבות לחסימת השימוש במטמון הדפים הקודמים.

  • פרטים כמו מסגרת id ו-name, כדי לעזור לזהות iframes ב-HTML.

    כך מפתחים יכולים לפעול כדי להפוך את הדפים האלה לתואמים ל-bfcache, וכך לשפר את ביצועי האתר.

דוגמאות

אפשר לקבל מופע של PerformanceNavigationTiming מתכונות כמו Performance.getEntriesByType() ו-PerformanceObserver.

לדוגמה, אפשר להפעיל את הפונקציה הבאה כדי להחזיר את כל האובייקטים של PerformanceNavigationTiming שמופיעים בציר הזמן של הביצועים ולרשום ביומן את notRestoredReasons שלהם:

function returnNRR() {
  const navEntries = performance.getEntriesByType("navigation");
  for (let i = 0; i < navEntries.length; i++) {
    console.log(`Navigation entry ${i}`);
    let navEntry = navEntries[i];
    console.log(navEntry.notRestoredReasons);
  }
}

בניווטים בהיסטוריה, המאפיין PerformanceNavigationTiming.notRestoredReasons מחזיר אובייקט עם המבנה הבא, שמייצג את המצב החסום של המסגרת ברמה העליונה:

{
  children: [],
  id: null,
  name: null,
  reasons: [
    {"reason", "unload-listener"}
  ],
  src: null,
  url: "https://www.example.com/page/"
}

אלה המאפיינים:

children
מערך של אובייקטים שמייצגים את המצב החסום של כל המסגרות מאותו מקור שמוטמעות במסגרת ברמה העליונה. לכל אובייקט יש את אותו מבנה כמו לאובייקט האב – כך אפשר לייצג באופן רקורסיבי בתוך האובייקט כל מספר של רמות של מסגרות מוטמעות. אם לפריט אין פריטי צאצא, המערך יהיה ריק.
id
מחרוזת שמייצגת את ערך המאפיין id של המסגרת (לדוגמה, <iframe id="foo" src="...">). אם למסגרת אין id, הערך יהיה null. בדף ברמה העליונה, הערך הוא null.
name
מחרוזת שמייצגת את ערך המאפיין name של הפריים (לדוגמה, <iframe name="bar" src="...">). אם לפריים אין name, הערך יהיה מחרוזת ריקה. בדף ברמה העליונה, הערך הוא null.
reasons
מערך של מחרוזות, שכל אחת מהן מייצגת סיבה לחסימת השימוש במטמון הדפדפן בדף שאליו בוצעה הניווט. יש הרבה סיבות שעלולות לגרום לחסימה. פרטים נוספים זמינים בקטע סיבות לחסימה.
src
מחרוזת שמייצגת את הנתיב למקור של המסגרת (לדוגמה, <iframe src="b.html">). אם למסגרת אין src, הערך יהיה מחרוזת ריקה. בדף ברמה העליונה, הערך הוא null.
url
מחרוזת שמייצגת את כתובת ה-URL של הדף או של ה-iframe שאליהם עברו.

עבור אובייקטים מסוג PerformanceNavigationTiming שלא מייצגים ניווטים בהיסטוריה, המאפיין notRestoredReasons יחזיר את הערך null.

שימו לב שהפונקציה notRestoredReasons מחזירה גם את הערך null כשאין סיבות לחסימה, ולכן הערך null לא מציין שהמטמון של הדפדפן קדימה ואחורה היה בשימוש או לא. לשם כך, צריך להשתמש במאפיין event.persisted.

דיווח על חסימת bfcache בפריים מאותו מקור

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

לדוגמה:

{
  children: [
    {
      children: [],
      id: "iframe-id",
      name: "iframe-name",
      reasons: [],
      src: "./index.html",
      url: "https://www.example.com/"
    },
    {
      children: [],
      id: "iframe-id2",
      name: "iframe-name2",
      reasons: [
        {"reason": "unload-listener"}
      ],
      src: "./unload-examples.html",
      url: "https://www.example.com/unload-examples.html"
    },
  ],
  id: null,
  name: null,
  reasons: [],
  src: null,
  url:"https://www.example.com"
}

דיווח על חסימת מטמון דפדפן לחזרה מהירה בדפים בפריים חוצה-דומיינים

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

לדוגמה:

{
  children: [
    {
      children: [],
      id: "iframe-id",
      name: "iframe-name",
      reasons: [],
      src: "./index.html",
      url: "https://www.example2.com/"
    }
  ],
  id: null,
  name: null,
  reasons: [
        {"reason": "masked"}
  ],
  src: null,
  url:"https://www.example.com"
}

לכל ה-iframe שחוצים מקורות, אנחנו מדווחים על הערך null עבור הערך reasons של הפריים, ובפריים ברמה העליונה יוצג הערך "masked". שימו לב שאפשר להשתמש ב-"masked" גם מסיבות שקשורות לסוכן משתמש ספציפי, ולכן הוא לא תמיד מציין בעיה ב-iframe.

מידע נוסף על שיקולי אבטחה ופרטיות מופיע בקטע אבטחה ופרטיות בהסבר.

הסיבות לחסימה

כמו שציינו קודם, יש הרבה סיבות אפשריות לחסימה:

אלה כמה דוגמאות לסיבות הנפוצות ביותר לכך שאי אפשר להשתמש ב-bfcache:

  • ‫unload-listener: הדף רושם handler של unload, שמונע שימוש ב-bfcache בדפדפנים מסוימים. מידע נוסף זמין במאמר בנושא הוצאה משימוש של אירוע unload.
  • ‫response-cache-control-no-store: הדף משתמש ב-no-store כערך cache-control.
  • ‫related-active-contents: הדף נפתח מדף אחר (באמצעות 'שכפול כרטיסייה') שעדיין יש בו הפניה לדף הזה.

משוב

צוות Chromium רוצה לשמוע על החוויות שלכם עם bfcache notRestoredReasons API.

מהו עיצוב ה-API?

האם יש משהו ב-API שלא פועל כמו שציפית? או שיש שיטות או מאפיינים חסרים שצריך להטמיע כדי לממש את הרעיון? יש לך שאלה או הערה לגבי מודל האבטחה? אפשר לפתוח בעיה במפרט במאגר GitHub המתאים, או להוסיף את המחשבות שלכם לבעיה קיימת.

דיווח על בעיה בהטמעה

מצאתם באג בהטמעה של Chromium? או שההטמעה שונה מהמפרט? דיווח על באג באתר שלנו למעקב אחר בעיות. חשוב לכלול כמה שיותר פרטים, הוראות פשוטות לשחזור ולציין את הרכיב כ-UI > Browser > Navigation > BFCache.

תמיכה ב-API

האם אתם מתכננים להשתמש ב-API של bfcache‏ notRestoredReasons? התמיכה הציבורית שלכם עוזרת לצוות Chromium לתת עדיפות לתכונות ומראה לספקי דפדפנים אחרים עד כמה חשוב לתמוך בהן.

אפשר לשלוח ציוץ אל ‎@ChromiumDev עם ההאשטאג #NotRestoredReasons ולספר לנו איפה ואיך אתם משתמשים בו.

קישורים שימושיים