การดึงข้อมูลล่วงหน้า การแสดงผลล่วงหน้า และการแคชโปรแกรมทำงานของบริการล่วงหน้า

ในโมดูลสุดท้าย คุณได้ค้นพบแนวคิดต่างๆ เช่น การเลื่อนเวลา กำลังโหลด JavaScript และรูปภาพการโหลดแบบ Lazy Loading และองค์ประกอบ <iframe> การชะลอการโหลดทรัพยากรจะลดการใช้งานเครือข่ายและ CPU ในช่วงเริ่มต้น การโหลดหน้าเว็บโดยการดาวน์โหลดทรัพยากร ณ จุดที่จำเป็น แทนที่จะโหลดไฟล์ไว้ด้านบน ซึ่งอาจไม่มีการใช้งาน วิธีนี้จะช่วยปรับปรุงเวลาในการโหลดหน้าเว็บเริ่มต้นได้ แต่อาจมีการโต้ตอบที่ตามมา มีความล่าช้าหากทรัพยากรที่ต้องใช้ในการขับเคลื่อนไม่ได้โหลดอยู่ในขณะนั้น กรณีเช่นนี้เกิดขึ้น

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

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

ดึงทรัพยากรที่จำเป็นในอนาคตอันใกล้ไว้ล่วงหน้าด้วยลำดับความสำคัญต่ำ

คุณอาจดึงทรัพยากรล่วงหน้า ซึ่งรวมถึงรูปภาพ สไตล์ชีต หรือทรัพยากร JavaScript โดยใช้คำแนะนำทรัพยากร <link rel="prefetch"> คำแนะนำ prefetch แจ้งให้เบราว์เซอร์ทราบว่าจำเป็นต้องใช้ทรัพยากรใน ในอนาคตอันใกล้

เมื่อมีการระบุคำแนะนำ prefetch เบราว์เซอร์อาจส่งคำขอ สำหรับทรัพยากรนั้นในลำดับความสำคัญต่ำสุดเพื่อหลีกเลี่ยงการแข่งขันกับทรัพยากร จำเป็นสำหรับหน้าปัจจุบัน

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

<head>
  <!-- ... -->
  <link rel="prefetch" as="script" href="/date-picker.js">
  <link rel="prefetch" as="style" href="/date-picker.css">
  <!-- ... -->
</head>

ข้อมูลโค้ด HTML ที่อยู่ก่อนหน้าแจ้งเบราว์เซอร์ว่าสามารถดึงข้อมูลล่วงหน้าได้ date-picker.jsและdate-picker.cssเมื่อไม่มีการใช้งาน นอกจากนี้คุณยังสามารถ ดึงทรัพยากรล่วงหน้าแบบไดนามิกเมื่อผู้ใช้โต้ตอบกับหน้าเว็บ JavaScript

prefetch ได้รับการสนับสนุนในเบราว์เซอร์รุ่นใหม่ทั้งหมด ยกเว้น Safari อยู่หลังธง หากคุณต้องการโหลดล่วงหน้า แหล่งข้อมูลในเว็บไซต์ของคุณในลักษณะที่ทำงานได้ดีในเบราว์เซอร์ทั้งหมด และคุณกำลังใช้ Service Worker แล้วอ่านส่วนถัดไปในโมดูลนี้เกี่ยวกับการสร้างแคชล่วงหน้า ทรัพยากรโดยใช้เครื่องมือทำงานของบริการ

ดึงข้อมูลหน้าล่วงหน้าเพื่อให้การนำทางในอนาคตรวดเร็วขึ้น

นอกจากนี้ยังสามารถดึงข้อมูลหน้าและทรัพยากรย่อยทั้งหมดล่วงหน้าโดยระบุ แอตทริบิวต์ as="document" เมื่อชี้ไปยังเอกสาร HTML:

<link rel="prefetch" href="/page" as="document">

เมื่อไม่มีการใช้งานเบราว์เซอร์ ระบบอาจส่งคำขอที่มีลำดับความสำคัญต่ำสำหรับ /page

ในเบราว์เซอร์แบบ Chromium คุณสามารถดึงข้อมูลเอกสารล่วงหน้าโดยใช้ Speculation Rules API กฎการคาดเดาหมายถึงออบเจ็กต์ JSON รวมอยู่ใน HTML ของหน้าเว็บ หรือเพิ่มแบบไดนามิกผ่าน JavaScript:

<script type="speculationrules">
{
  "prefetch": [{
    "source": "list",
    "urls": ["/page-a", "/page-b"]
  }]
}
</script>

ออบเจ็กต์ JSON อธิบายการดำเนินการอย่างน้อย 1 รายการ ขณะนี้รองรับเฉพาะเท่านั้น prefetch และ prerender และรายการ URL ที่เชื่อมโยงกับการดำเนินการดังกล่าว ใน ข้อมูลโค้ด HTML ที่อยู่ก่อนหน้า เบราว์เซอร์จะได้รับคำสั่งให้ดึงข้อมูล /page-a ล่วงหน้า และ /page-b เช่นเดียวกับ <link rel="prefetch"> กฎการคาดเดาจะเป็น อาจบอกใบ้ว่าเบราว์เซอร์อาจเพิกเฉยต่อสถานการณ์บางอย่าง

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

หน้าการแสดงผลล่วงหน้า

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

การแสดงผลล่วงหน้าได้รับการรองรับผ่าน Speculation Rules API

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "list",
      "urls": ["/page-a", "page-b"]
    }
  ]
}
</script>

การสาธิตการดึงข้อมูลล่วงหน้าและการแสดงผลล่วงหน้า

การแคชล่วงหน้าของ Service Worker

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

วันที่