Web Worker คืออะไร?
เมื่อดำเนินการสคริปต์ในหน้า HTML หน้าเพจจะไม่ตอบสนองจนกว่าสคริปต์จะเสร็จสิ้น
Web Worker คือ JavaScript ที่ทำงานอยู่เบื้องหลัง โดยไม่ขึ้นกับสคริปต์อื่นๆ โดยไม่ส่งผลกระทบต่อประสิทธิภาพของเพจ คุณสามารถทำสิ่งที่คุณต้องการต่อไป: การคลิก เลือกสิ่งต่างๆ ฯลฯ ในขณะที่ Web Worker ทำงานอยู่เบื้องหลัง
การสนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์เวอร์ชันแรกที่รองรับ Web Workers อย่างเต็มรูปแบบ
API | Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
Web Workers | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
ตัวอย่าง HTML Web Worker
ตัวอย่างด้านล่างสร้าง Web Worker อย่างง่ายที่นับตัวเลขในพื้นหลัง:
ตัวอย่าง
<p>นับเลข: <output id="result"></output></p><br>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<br><br>
<p><strong>หมายเหตุ:</strong> Internet Explorer 9 และเวอร์ชันก่อนหน้าไม่รองรับ Web Workers</p>
<script>
var w;
function startWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("html/demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Workers...";
}
}
function stopWorker() {
w.terminate();
w = undefined;
}
</script>
นับเลข:
หมายเหตุ: Internet Explorer 9 และเวอร์ชันก่อนหน้าไม่รองรับ Web Workers
ในกรณีที่คุณลองใส่ code ตามนี้แล้วยังไม่แสดงผลการนับเลข นั่นเป็นเพราะคุณยังไม่มีไฟล์ demo_workers.js .ให้ทำการสร้างไฟล์ในโฟลเดอร์ที่มีข้อมูลแสดงผลของเว็บไซต์ เช่น httpdocs / public_html เป็นต้น โดยสามารถนำ code ด้านล่างไปใส่ในไฟล์ที่สร้างได้เลย
var i=0;
function timedCount()
{i=i+1;
postMessage(i);
setTimeout("timedCount()",500);}
timedCount();
ส่วนสำคัญของ code ด้านบนคือ postMessage() method ซึ่งใช้ในการโพสต์ข้อความกลับไปที่หน้า HTML
หมายเหตุ:โดยปกติแล้ว Web Worker จะไม่ใช้สำหรับสคริปต์ง่ายๆ ดังกล่าว แต่ใช้กับงานที่ใช้ CPU มาก
การสร้าง Web Worker Object
หลังจากเรามีไฟล์ web worker แล้ว เราต้องเรียกไฟล์จากหน้า HTML
บรรทัดต่อไปนี้จะตรวจสอบว่ามีผู้ปฏิบัติงานอยู่แล้วหรือไม่ หากไม่ใช่ จะสร้างวัตถุผู้ปฏิบัติงานเว็บใหม่และรัน code ใน “demo_workers.js”:
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
จากนั้นเราสามารถส่งและรับข้อความจาก web worker ได้
เพิ่ม event listener “onmessage” ให้กับ web worker
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
เมื่อ web worker โพสต์ข้อความ code ภายใน event listener จะถูกดำเนินการ ข้อมูลจาก Web Worker ถูกเก็บไว้ใน event.data
การหยุด Web Worker
เมื่อ web worker object ถูกสร้างขึ้น, มันจะยังคงฟังข้อความต่อไป (แม้ว่าสคริปต์ภายนอกจะเสร็จสิ้นแล้วก็ตาม) จนกว่าจะสิ้นสุด
หากต้องการหยุดและทรัพยากรเบราว์เซอร์/คอมพิวเตอร์ฟรี ให้ใช้ terminate()method:
w.terminate();
ใช้ Web Worker ซ้ำ
หากคุณตั้งค่าตัวแปร worker เป็น undefined หลังจากสิ้นสุดแล้ว คุณสามารถใช้ code ซ้ำได้:
w = undefined;
ตัวอย่าง Code Web Worker แบบเต็ม
เราได้เห็น Worker code ใน .js ไฟล์แล้ว ด้านล่างนี้เป็น code สำหรับหน้า HTML:
ตัวอย่าง
<p>นับเลข: <output id="result2"></output></p><br>
<button onclick="startWorker2()">Start Worker</button>
<button onclick="stopWorker2()">Stop Worker</button><br>
<br>
<p><strong>Note:</strong> Internet Explorer 9 และเวอร์ชันก่อนหน้านี้ไม่รองรับ Web Workers</p>
<script>
var w2;
function startWorker2() {
if(typeof(Worker) !== "undefined") {
if(typeof(w2) == "undefined") {
w2 = new Worker("html/demo_workers.js");
}
w2.onmessage = function(event) {
document.getElementById("result2").innerHTML = event.data;
};
} else {
document.getElementById("result2").innerHTML = "Sorry, your browser does not support Web Workers...";
}
}
function stopWorker2() {
w2.terminate();
w2 = undefined;
}
</script>
นับเลข:
Note: Internet Explorer 9 และเวอร์ชันก่อนหน้านี้ไม่รองรับ Web Workers