ภาพรวมผู้ปฏิบัติงาน

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

Andrew Guan

Demián Renzulli

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

วิธีที่ Workers ช่วยปรับปรุงเว็บไซต์ได้

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

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

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

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

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

Web Worker และ Service Worker

ความคล้ายคลึง

Web Worker และ Service Worker เป็น Worker 2 ประเภทที่เว็บไซต์ใช้ได้ โดยมีลักษณะบางอย่างที่เหมือนกัน ดังนี้

• ทั้ง 2 อย่างทำงานในเธรดรอง ซึ่งช่วยให้โค้ด JavaScript ทำงานได้โดยไม่บล็อกเธรดหลักและอินเทอร์เฟซผู้ใช้
• โดยจะไม่มีสิทธิ์เข้าถึงออบเจ็กต์ Window และ Document จึงไม่สามารถ โต้ตอบกับ DOM โดยตรง และมีสิทธิ์เข้าถึง Browser API อย่างจำกัด

ความแตกต่าง

หลายคนอาจคิดว่าสิ่งต่างๆ ที่มอบหมายให้ Web Worker ทำได้ก็สามารถทำใน Service Worker ได้เช่นกัน และในทางกลับกันก็เช่นกัน แต่ทั้ง 2 อย่างนี้มีความแตกต่างที่สำคัญดังนี้

• Service Worker ต่างจาก Web Worker ตรงที่ช่วยให้คุณสกัดกั้นคำขอเครือข่าย (ผ่านเหตุการณ์ fetch) และรอฟังเหตุการณ์ Push API ในเบื้องหลัง (ผ่านเหตุการณ์ push) ได้
• หน้าเว็บสามารถสร้าง Web Worker ได้หลายรายการ แต่ Service Worker รายการเดียวจะควบคุมแท็บที่ใช้งานอยู่ทั้งหมดภายใต้ขอบเขตที่ลงทะเบียนไว้
• อายุการใช้งานของ Web Worker จะเชื่อมโยงกับแท็บที่ Web Worker นั้นเป็นของอย่างใกล้ชิด ในขณะที่วงจรของService Worker จะไม่ขึ้นอยู่กับแท็บ ด้วยเหตุนี้ การปิดแท็บที่ Web Worker ทำงานอยู่จะสิ้นสุดการทำงานของ Web Worker ในขณะที่ Service Worker จะทำงานต่อในเบื้องหลังได้ แม้ว่าเว็บไซต์จะไม่มีแท็บที่ใช้งานอยู่เปิดอยู่ก็ตาม

กรณีการใช้งาน

ความแตกต่างระหว่างผู้ปฏิบัติงานทั้ง 2 ประเภทบ่งบอกถึงสถานการณ์ที่ควรใช้ผู้ปฏิบัติงานประเภทใดประเภทหนึ่ง หรือทั้ง 2 ประเภท

Use Case สำหรับ Web Worker มักเกี่ยวข้องกับการส่งต่องาน (เช่น การคำนวณที่ซับซ้อน) ไปยังเธรดรอง เพื่อหลีกเลี่ยงการบล็อก UI

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

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

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

เครื่องมือและไลบรารี

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

Comlink

Comlink เป็นไลบรารี RPC ขนาดเล็ก (1.6k) ที่ดูแลรายละเอียดพื้นฐานหลายอย่างเมื่อสร้างเว็บไซต์ที่ใช้ Web Worker โดยมีการใช้งานในเว็บไซต์ เช่น PROXX และ Squoosh ดูสรุปแรงจูงใจและตัวอย่างโค้ดได้ที่นี่

Workbox

Workbox เป็นไลบรารียอดนิยมสำหรับสร้างเว็บไซต์ ที่ใช้ Service Worker โดยจะรวมชุดแนวทางปฏิบัติแนะนำเกี่ยวกับสิ่งต่างๆ เช่น การแคช ออฟไลน์ การซิงค์ข้อมูลเบื้องหลัง ฯลฯ โมดูล workbox-window มีวิธีที่สะดวกในการแลกเปลี่ยนข้อความระหว่าง Service Worker กับหน้าเว็บ

ขั้นตอนถัดไป

ส่วนที่เหลือของชุดนี้จะเน้นที่รูปแบบสำหรับการสื่อสารของหน้าต่างและ Service Worker

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

ดูรูปแบบการสื่อสารของหน้าต่างและ Web Worker ได้ที่ใช้ Web Worker เพื่อเรียกใช้ JavaScript นอกเทรดหลักของเบราว์เซอร์