HTML Web Workers API

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

Web Worker คืออะไร?

โดยปกติ เมื่อรันสคริปต์ในหน้า HTML หน้าเว็บจะ “ค้าง” หรือ “ไม่ตอบสนอง” จนกว่าสคริปต์นั้นจะทำงานเสร็จ

แต่ Web Worker เป็นไฟล์ JavaScript ภายนอกที่สามารถทำงานในเบื้องหลังได้ โดยทำงานแยกจากสคริปต์หลักของหน้าเว็บ ทำให้ผู้ใช้ยังสามารถคลิก เลือก หรือทำกิจกรรมอื่น ๆ ได้ตามปกติ

Web Worker มีประโยชน์อย่างมากเมื่อรันโค้ดที่ใช้เวลานานหรือใช้ทรัพยากรเยอะ เพราะจะช่วยให้หน้าเว็บไม่ค้าง

Browser Support (การรองรับของเบราว์เซอร์)

ตารางด้านล่างแสดงเวอร์ชันแรกของเบราว์เซอร์ที่รองรับ Web Workers API อย่างสมบูรณ์

API	Chrome	Edge	Firefox	Safari	Opera
Web Workers	4.0	10.0	3.5	4.0	11.5

ตัวอย่างการใช้ Web Worker

ตัวอย่างนี้สร้าง Web Worker อย่างง่ายที่ทำการนับตัวเลขในเบื้องหลัง

ตรวจสอบว่าเบราว์เซอร์รองรับหรือไม่

ก่อนใช้ Web Worker สามารถตรวจสอบการรองรับได้ดังนี้:

				
					<script>
const x = document.getElementById("result");
if (typeof(Worker) !== "undefined") {
  x.innerHTML = "เบราว์เซอร์ของคุณรองรับ Web Workers!";
} else {
  x.innerHTML = "เบราว์เซอร์ของคุณไม่รองรับ Web Workers.";
}
</script>

สร้างไฟล์ .js สำหรับ Web Worker

จะสร้างสคริปต์ที่ทำการนับเลขไว้ในไฟล์ demo_workers.js

				
					var i = 0;

function timedCount() {
  i = i + 1;
  postMessage(i);
  setTimeout("timedCount()", 500);
}

timedCount();

ส่วนสำคัญของโค้ดนี้คือ postMessage() ซึ่งใช้ส่งข้อมูลกลับไปยังหน้า HTML

สร้างออบเจ็กต์ Web Worker

เมื่อมีไฟล์ .js แล้ว สามารถเรียกใช้งานจากหน้า HTML ได้ดังนี้:

				
					if (typeof(w) == "undefined") {
  w = new Worker("demo_workers.js");
}

จากนั้นสามารถ ส่งและรับข้อความ ระหว่าง Web Worker และหน้าเว็บได้ โดยใช้ระบบ message passing

ใช้ postMessage() เพื่อส่งข้อมูล
ใช้ onmessage เพื่อรับข้อมูล

				
					w.onmessage = function(event) {
  document.getElementById("result").innerHTML = event.data;
};

เมื่อ Web Worker ส่งข้อมูลกลับมา (ผ่าน postMessage()), ฟังก์ชันใน onmessage จะทำงานทันที และข้อมูลจะอยู่ใน event.data

หยุดการทำงานของ Web Worker

เมื่อสร้าง Web Worker แล้ว มันจะทำงานต่อเนื่องจนกว่าจะถูกสั่งให้หยุด สามารถหยุด Web Worker เพื่อประหยัดทรัพยากรได้ด้วยคำสั่ง:

				
					w.terminate();

ใช้ Web Worker ซ้ำอีกครั้ง

หลังจากหยุดการทำงานแล้ว ถ้าต้องการเริ่มใหม่อีกครั้ง ให้ตั้งค่าเป็น undefined:

				
					w = undefined;

ตัวอย่าง Full Web Worker Example

นี่คือตัวอย่างโค้ด HTML ทั้งหมด:

				
					<!DOCTYPE html>
<html>
<body>

<p>นับเลข: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>

<script>
let w;

function startWorker() {
  const x = document.getElementById("result");
  if (typeof(Worker) !== "undefined") {
    if (typeof(w) == "undefined") {
      w = new Worker("demo_workers.js");
    }
    w.onmessage = function(event) {
      x.innerHTML = event.data;
    };
  } else {
    x.innerHTML = "เบราว์เซอร์ของคุณไม่รองรับ Web Workers.";
  }
}

function stopWorker() {
  w.terminate();
  w = undefined;
}
</script>

</body>
</html>

Web Worker กับ DOM

เนื่องจาก Web Worker อยู่ในไฟล์ .js ภายนอก มัน ไม่สามารถเข้าถึง วัตถุบางอย่างของ JavaScript ได้ เช่น:

window object
document object
parent object

HTML Web Workers API