Back-Forward Cache notRestoredreasons API

ดูว่าการนำทางใดถูกบล็อกไม่ให้ใช้ bfcache และเหตุผล

Chris Mills

Barry Pollard

พร็อพเพอร์ตี้ notRestoredReasons ซึ่งเพิ่มลงในคลาส PerformanceNavigationTiming จะรายงานข้อมูลว่าเฟรมที่อยู่ในเอกสารถูกบล็อกไม่ให้ใช้ bfcache ในการนำทางหรือไม่ และเพราะเหตุใด นักพัฒนาแอปสามารถใช้ข้อมูลนี้เพื่อระบุหน้าเว็บที่ต้องอัปเดตเพื่อให้เข้ากันได้กับ bfcache ซึ่งจะช่วยปรับปรุงประสิทธิภาพของเว็บไซต์

สถานะปัจจุบัน

notRestoredReasons API ได้รับการจัดส่งจาก Chrome 123 และกำลังทยอยเปิดตัว

แนวคิดและการใช้งาน

เบราว์เซอร์สมัยใหม่มีฟีเจอร์การเพิ่มประสิทธิภาพสำหรับการไปยังส่วนต่างๆ ในประวัติที่เรียกว่า Back-Forward Cache (bfcache) ซึ่งจะช่วยให้ผู้ใช้ได้รับประสบการณ์การโหลดทันทีเมื่อกลับไปที่หน้าเว็บที่เคยเข้าชมแล้ว หน้าเว็บอาจถูกบล็อกไม่ให้เข้าสู่ bfcache หรือถูกนำออกจาก bfcache ด้วยเหตุผลต่างๆ ซึ่งบางเหตุผลเป็นไปตามข้อกำหนด และบางเหตุผลเฉพาะเจาะจงกับการใช้งานเบราว์เซอร์

ก่อนหน้านี้ นักพัฒนาแอปไม่สามารถทราบได้ว่าเหตุใดหน้าเว็บของตนจึงถูกบล็อกไม่ให้ใช้ bfcache ในภาคสนาม แม้ว่าจะมีการทดสอบในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome ก็ตาม เราได้ขยายคลาส PerformanceNavigationTiming ให้มีพร็อพเพอร์ตี้ notRestoredReasons เพื่อเปิดใช้การตรวจสอบภาคสนาม ซึ่งจะแสดงออบเจ็กต์ที่มีข้อมูลที่เกี่ยวข้องในเฟรมบนสุดและ iframe ทั้งหมดที่อยู่ในเอกสาร

• เหตุผลที่ระบบบล็อกไม่ให้ใช้ bfcache

• รายละเอียด เช่น เฟรม id และ name เพื่อช่วยระบุ iframe ใน 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

อาร์เรย์ของสตริงแต่ละรายการแสดงเหตุผลที่ระบบบล็อกหน้าเว็บที่นำทางไม่ให้ใช้ bfcache การบล็อกอาจเกิดขึ้นได้จากหลายสาเหตุ ดูรายละเอียดเพิ่มเติมได้ที่ส่วนเหตุผลที่ถูกบล็อก

src

สตริงที่แสดงเส้นทางไปยังแหล่งที่มาของเฟรม (เช่น <iframe src="b.html">) หากเฟรมไม่มี src ค่าจะเป็นสตริงว่าง สำหรับหน้าเว็บระดับบนสุด ค่านี้คือ null

url

สตริงที่แสดง URL ของหน้า/iframe ที่ไปยัง

สำหรับออบเจ็กต์ PerformanceNavigationTiming ที่ไม่ได้แสดงการนำทางในประวัติ พร็อพเพอร์ตี้ notRestoredReasons จะแสดงผล null

โปรดทราบว่า notRestoredReasons จะแสดงผล null ด้วยเมื่อไม่มีเหตุผลในการบล็อก ดังนั้นการที่ค่านี้เป็น null จึงไม่ได้บ่งชี้ว่ามีการใช้ bfcache หรือไม่ โดยคุณต้องใช้พร็อพเพอร์ตี้ 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"
}

รายงานการบล็อก bfcache ในเฟรมแบบข้ามต้นทาง

เมื่อหน้าเว็บมีการฝังเฟรมข้ามต้นทาง เราจะจำกัดปริมาณข้อมูลที่แชร์เกี่ยวกับเฟรมเหล่านั้นเพื่อหลีกเลี่ยงการรั่วไหลของข้อมูลข้ามต้นทาง เราจะรวมเฉพาะข้อมูลที่หน้าด้านนอกทราบอยู่แล้ว และรวมถึงว่าซับทรีแบบข้ามต้นทางบล็อก bfcache หรือไม่ เราจะไม่รวมเหตุผลในการบล็อกหรือข้อมูลเกี่ยวกับระดับล่างของ Subtree (แม้ว่า Sub-Level บางระดับจะเป็นแบบ Same-Origin)

เช่น

{
  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" อาจใช้ด้วยเหตุผลเฉพาะของ User Agent ด้วย จึงอาจไม่ได้บ่งบอกถึงปัญหาใน iframe เสมอไป

ดูรายละเอียดเพิ่มเติมเกี่ยวกับการพิจารณาด้านความปลอดภัยและความเป็นส่วนตัวได้ที่ส่วนความปลอดภัยและความเป็นส่วนตัวในคำอธิบาย

เหตุผลที่บล็อก

ดังที่กล่าวไปก่อนหน้านี้ การบล็อกอาจเกิดขึ้นได้จากหลายสาเหตุ ดังนี้

ตัวอย่างสาเหตุที่พบบ่อยที่สุดบางประการที่ทำให้ใช้ bfcache ไม่ได้มีดังนี้

• unload-listener: หน้าเว็บลงทะเบียนแฮนเดิล unload ซึ่งจะป้องกันการใช้งาน bfcache ในเบราว์เซอร์บางรายการ ดูข้อมูลเพิ่มเติมได้ที่การเลิกใช้งานเหตุการณ์ unload
• response-cache-control-no-store: หน้าเว็บใช้ no-store เป็นค่า cache-control
• related-active-contents: มีการเปิดหน้าเว็บจากหน้าเว็บอื่น (โดยใช้ "ทำซ้ำแท็บ") ซึ่งยังมีการอ้างอิงถึงหน้าเว็บนี้

ความคิดเห็น

ทีม Chromium อยากทราบความคิดเห็นของคุณเกี่ยวกับประสบการณ์การใช้งาน notRestoredReasons API ของ bfcache

บอกเราเกี่ยวกับการออกแบบ API

มีสิ่งใดเกี่ยวกับ API ที่ไม่ทำงานตามที่คุณคาดหวังไว้ไหม หรือมีเมธอด หรือพร็อพเพอร์ตี้ที่ขาดหายไปซึ่งคุณต้องใช้เพื่อนำแนวคิดไปใช้ไหม หากมีคำถามหรือความคิดเห็นเกี่ยวกับโมเดลความปลอดภัย แจ้งปัญหาเกี่ยวกับข้อกำหนดในที่เก็บ GitHub ที่เกี่ยวข้อง หรือแสดงความคิดเห็นในปัญหาที่มีอยู่

รายงานปัญหาเกี่ยวกับการติดตั้งใช้งาน

คุณพบข้อบกพร่องในการใช้งาน Chromium ไหม หรือการติดตั้งใช้งานแตกต่างจากข้อกำหนด รายงานข้อบกพร่องในเครื่องมือติดตามปัญหา โปรดใส่รายละเอียดให้มากที่สุดเท่าที่จะทำได้ วิธีการง่ายๆ ในการทำซ้ำ และระบุคอมโพเนนต์เป็น UI > Browser > Navigation > BFCache

แสดงการสนับสนุน API

คุณวางแผนที่จะใช้ bfcache notRestoredReasons API ไหม การสนับสนุนแบบสาธารณะของคุณจะช่วยให้ทีม Chromium จัดลําดับความสําคัญของฟีเจอร์และแสดงให้ผู้ให้บริการเบราว์เซอร์รายอื่นๆ เห็นว่าการสนับสนุนฟีเจอร์เหล่านี้มีความสําคัญเพียงใด

ทวีตถึง @ChromiumDev โดยใช้แฮชแท็ก #NotRestoredReasons และ แจ้งให้เราทราบว่าคุณใช้ฟีเจอร์นี้ที่ใดและอย่างไร

ลิงก์ที่มีประโยชน์

• แคชย้อนหลัง
• คำอธิบายแบบสาธารณะ
• ข้อบกพร่องในการติดตาม Chromium
• หน้าฟีเจอร์ของ ChromeStatus.com
• ความตั้งใจที่จะทดสอบ
• ความตั้งใจที่จะจัดส่ง