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

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

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

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

กล่องงานใช้ไฟล์ Manifest ในการแคชล่วงหน้าเพื่อกำหนดทรัพยากรที่ควร ที่เก็บไว้ล่วงหน้า ไฟล์ 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 จะลงทะเบียนตัวจัดการที่จำเป็นโดยอัตโนมัติเพื่อให้แน่ใจว่าทรัพยากรที่แคชล่วงหน้า จะดึงข้อมูลจาก Service Worker API เมื่อจำเป็น

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

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

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

สูง
โปรดลองอีกครั้ง
ปานกลาง
โปรดลองอีกครั้ง
ระหว่างเดินทาง
ถูกต้อง

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

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

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

จริง
ลองอีกครั้ง
เท็จ
ถูกต้อง

ถัดไป: ภาพรวมของผู้ปฏิบัติงานบนเว็บ

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

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