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

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

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

การรักษาสมดุลที่ยุ่งยากเล็กน้อย คุณไม่ควรสิ้นเปลืองแบนด์วิดท์ด้วยการโหลดทรัพยากรที่อาจไม่ได้ใช้ แต่การถ่วงเวลาการโต้ตอบและการโหลดหน้าเว็บในครั้งต่อๆ ไปก็อาจไม่ใช่วิธีที่ดีที่สุดเช่นกัน โชคดีที่มีเครื่องมือหลายอย่างที่คุณใช้เพื่อสร้างความสมดุลระหว่างค่าสูงสุดและ 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>

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

การแคชโปรแกรมทำงานของบริการล่วงหน้า

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

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

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

Workbox ใช้ไฟล์ Manifest สำหรับ Precache เพื่อระบุทรัพยากรที่ควรเก็บล่วงหน้า ไฟล์ Manifest สำหรับแคชล่วงหน้าคือรายการไฟล์และข้อมูลการกำหนดเวอร์ชันซึ่งทำหน้าที่เป็น "แหล่งข้อมูลที่เชื่อถือได้" สำหรับทรัพยากรที่จัดเก็บในแคชล่วงหน้า

[{  
    url: 'script.ffaa4455.js',
    revision: null
}, {
    url: '/index.html',
    revision: '518747aa'
}]

โค้ดก่อนหน้าเป็นตัวอย่างไฟล์ Manifest ที่มี 2 ไฟล์ ได้แก่ script.ffaa4455.js และ /index.html หากทรัพยากรมีข้อมูลเวอร์ชันอยู่ในไฟล์นั้นๆ (หรือที่เรียกว่าแฮชของไฟล์) คุณจะปล่อยพร็อพเพอร์ตี้ revision ไว้เป็น null ได้ เนื่องจากไฟล์มีเวอร์ชันอยู่แล้ว (เช่น ffaa4455 สำหรับทรัพยากร script.ffaa4455.js ในโค้ดก่อนหน้า) สำหรับทรัพยากรที่ไม่มีเวอร์ชัน คุณจะทำการแก้ไขสำหรับทรัพยากรดังกล่าว ณ เวลาบิลด์ได้

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

workbox.precaching.precacheAndRoute([
  '/styles/product-page.ac29.css',
  '/styles/product-page.39a1.js',
]);

ตัวอย่างเช่น ในหน้าข้อมูลผลิตภัณฑ์อีคอมเมิร์ซ คุณสามารถใช้โปรแกรมทำงานของบริการเพื่อแคช CSS และ JavaScript ที่จำเป็นล่วงหน้าสำหรับการแสดงผลหน้ารายละเอียดผลิตภัณฑ์ ทำให้การนำทางไปยังหน้ารายละเอียดผลิตภัณฑ์ทำงานได้เร็วขึ้นมาก ในตัวอย่างก่อนหน้านี้ product-page.ac29.css และ product-page.39a1.js ได้รับการแคชล่วงหน้า เมธอด precacheAndRoute ที่มีอยู่ใน workbox-precaching จะลงทะเบียนตัวจัดการที่จำเป็นโดยอัตโนมัติเพื่อให้แน่ใจว่ามีการเรียกทรัพยากรที่จัดเก็บในแคชล่วงหน้าจาก API โปรแกรมทำงานของบริการเมื่อจำเป็น

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

ทดสอบความรู้ของคุณ

คำแนะนำ prefetch จะเกิดขึ้นที่ลำดับความสำคัญใด

สูง
โปรดลองอีกครั้ง
ปานกลาง
โปรดลองอีกครั้ง
ต่ำ
ถูกต้องแล้ว!

การดึงข้อมูลล่วงหน้าและการแสดงผลหน้าเว็บล่วงหน้าแตกต่างกันอย่างไร

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

แคชของ Service Worker และแคช HTTP เหมือนกัน

จริง
โปรดลองอีกครั้ง
เท็จ
ถูกต้องแล้ว!

ถัดไป: ภาพรวมของ Web Worker

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

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