พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน Web Workers API

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

ประเภทของ Web Workers

Dedicated Workers

  • ใช้เพื่อทำงานแยกในกระบวนการเดียว โดยสร้างขึ้นมาเพื่อให้ทำงานเฉพาะงานนั้น ๆ
  • Dedicated Workers จะทำงานแยกจากหน้าหลักและจะไม่แชร์กับ Web Workers อื่น

ตัวอย่าง

HTML
<!-- HTML -->
<button onclick="startWorker()">Start Worker</button>
<p id="result"></p>

<script>
    let worker;
    function startWorker() {
        if (typeof(Worker) !== "undefined") {
            if (typeof(worker) == "undefined") {
                worker = new Worker("worker.js");
            }
            worker.onmessage = function(event) {
                document.getElementById("result").innerHTML = event.data;
            };
        } else {
            document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers.";
        }
    }
</script>
JavaScript
// worker.js
let i = 0;
function timedCount() {
    i++;
    postMessage(i);
    setTimeout(timedCount, 500);
}
timedCount();

Shared Workers

  • สามารถแชร์การทำงานระหว่างหลายหน้าเว็บหรือหลายแท็บได้ ซึ่งแตกต่างจาก Dedicated Workers ที่จำกัดการใช้งานในเพียงหน้าหนึ่ง
  • ใช้ได้กับหลายๆ ตัวแปรสถานะ เช่น การเชื่อมต่อ WebSocket หรือการสื่อสารอื่น ๆ

ตัวอย่าง

HTML
<!-- HTML -->
<button onclick="connectToWorker()">Connect to Worker</button>
<p id="result"></p>

<script>
    let worker;
    function connectToWorker() {
        worker = new SharedWorker("sharedWorker.js");
        worker.port.onmessage = function(event) {
            document.getElementById("result").innerHTML = event.data;
        };
        worker.port.start();
    }
</script>
JavaScript
// sharedWorker.js
let count = 0;
onconnect = function(e) {
    const port = e.ports[0];
    port.postMessage(`Worker connected! Count: ${++count}`);
    port.onmessage = function() {
        port.postMessage(`Update Count: ${++count}`);
    };
};

Service Workers

  • ถูกใช้เพื่อควบคุมการแคช (cache) และการประมวลผลเครือข่าย ทำให้สามารถทำงานในโหมดออฟไลน์หรือช่วยในการเร่งการโหลดของหน้าเว็บ
  • ใช้บ่อยใน Progressive Web Apps (PWA) และสามารถดักจับ request ต่างๆ ที่เกิดขึ้นในเบราว์เซอร์

ตัวอย่าง

JavaScript
// service-worker.js
self.addEventListener('install', (event) => {
    console.log('Service Worker installing.');
});

self.addEventListener('fetch', (event) => {
    event.respondWith(
        caches.match(event.request).then((response) => {
            return response || fetch(event.request);
        })
    );
});
HTML
<!-- HTML -->
<script>
    if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('service-worker.js')
            .then(() => { console.log('Service Worker Registered'); });
    }
</script>

การประยุกต์ใช้งาน Web Workers

  1. การประมวลผลที่หนักในเบื้องหลัง
    • ใช้ในการทำงานที่ซับซ้อน เช่น การคำนวณทางคณิตศาสตร์หรือการประมวลผลข้อมูลจำนวนมากโดยไม่กระทบต่อการตอบสนองของหน้าเว็บ
  2. การโหลดข้อมูลจากเซิร์ฟเวอร์
    • Web Workers สามารถช่วยโหลดและประมวลผลข้อมูลที่มีขนาดใหญ่ เช่น JSON หรือ XML โดยไม่กระทบต่อการแสดงผลของหน้าเว็บ
  3. แอปพลิเคชันที่ต้องการการทำงานร่วมกันหลายแท็บ
    • Shared Workers สามารถใช้เพื่อแชร์ข้อมูลระหว่างหลายหน้าเว็บหรือหลายแท็บ ทำให้เกิดการสื่อสารแบบเรียลไทม์ระหว่างหน้าต่างของเบราว์เซอร์
  4. การแคชและการทำงานแบบออฟไลน์
    • Service Workers สามารถใช้เพื่อแคชทรัพยากรหน้าเว็บและช่วยให้ผู้ใช้สามารถเข้าถึงแอปพลิเคชันได้ในโหมดออฟไลน์

สรุป

Web Workers เป็นเครื่องมือที่มีประโยชน์ในการจัดการงานที่หนักโดยไม่ทำให้หน้าเว็บค้าง การเลือกใช้ Web Workers ควรคำนึงถึงประเภทของงานที่ต้องการทำ เช่น Dedicated Workers สำหรับงานแยกเดี่ยว Shared Workers สำหรับการทำงานร่วมกันหลายแท็บ และ Service Workers สำหรับการแคชข้อมูล

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ