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 หรือไม่ เราจะไม่ระบุเหตุผลในการบล็อกหรือข้อมูลเกี่ยวกับระดับที่ต่ำกว่าของซับต้นไม้ (แม้ว่าระดับย่อยบางระดับจะมาจากแหล่งที่มาเดียวกันก็ตาม)

เช่น

{
  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 ในบางเบราว์เซอร์ ดูข้อมูลเพิ่มเติมที่การเลิกใช้งานเหตุการณ์การยกเลิกการโหลด
  • response-cache-control-no-store: หน้าเว็บใช้ no-store เป็นค่า cache-control
  • related-active-contents: มีการเปิดหน้านี้จากหน้าอื่น (โดยใช้ "แท็บที่ซ้ำกัน") ซึ่งยังคงมีการอ้างอิงถึงหน้านี้

ความคิดเห็น

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

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

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

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

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

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

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

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

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