HTML Web Workers API
Web Worker คือ JavaScript ที่ทำงานอยู่เบื้องหลัง โดยไม่กระทบต่อประสิทธิภาพของเพจ
Web Worker คืออะไร?
เมื่อเรียกใช้งานสคริปต์ในหน้า HTML หน้าจะไม่ตอบสนองจนกว่าสคริปต์จะเสร็จสิ้น
Web Worker คือ JavaScript ที่ทำงานอยู่เบื้องหลัง โดยไม่ขึ้นกับสคริปต์อื่นๆ โดยไม่กระทบต่อประสิทธิภาพของเพจ คุณสามารถทำสิ่งที่คุณต้องการต่อไปได้: คลิก เลือกสิ่งต่างๆ ฯลฯ ในขณะที่ผู้ทำงานเว็บทำงานในเบื้องหลัง
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์เวอร์ชันแรกที่สนับสนุน Web Workers อย่างสมบูรณ์
| API | |||||
|---|---|---|---|---|---|
| Web Workers | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
ตัวอย่าง HTML Web Workers
ตัวอย่างด้านล่างสร้าง Web Worker แบบง่ายที่นับตัวเลขในเบื้องหลัง:
ตัวอย่าง
ตรวจสอบการสนับสนุน Web Worker
ก่อนสร้าง Web Worker ให้ตรวจสอบว่าเบราว์เซอร์ของผู้ใช้รองรับหรือไม่:
if (typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code.....
}
else {
// Sorry! No Web Worker support..
}
สร้างไฟล์ Web Worker
ตอนนี้ มาสร้างผู้ปฏิบัติงานเว็บของเราใน JavaScript ภายนอกกัน
ที่นี่ เราสร้างสคริปต์ที่มีความสำคัญ สคริปต์ถูกเก็บไว้ในไฟล์ "demo_workers.js":
var i = 0;
function timedCount()
{
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
ส่วนสำคัญของโค้ดด้านบนคือpostMessage()วิธีการ ซึ่งใช้ในการโพสต์ข้อความกลับไปที่หน้า HTML
หมายเหตุ:โดยปกติผู้ปฏิบัติงานเว็บจะไม่ใช้สำหรับสคริปต์ง่ายๆ แต่สำหรับงานที่ต้องใช้ CPU มาก
สร้างวัตถุ Web Worker
ตอนนี้เรามีไฟล์ web worker แล้ว เราต้องเรียกมันจากหน้า HTML
บรรทัดต่อไปนี้ตรวจสอบว่าผู้ปฏิบัติงานมีอยู่แล้วหรือไม่ หากไม่มี - มันสร้างวัตถุคนงานเว็บใหม่และเรียกใช้รหัสใน "demo_workers.js":
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
จากนั้นเราสามารถส่งและรับข้อความจากพนักงานเว็บได้
เพิ่มฟังเหตุการณ์ "onmessage" ให้กับพนักงานเว็บ
w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};
เมื่อพนักงานเว็บโพสต์ข้อความ รหัสภายในตัวฟังเหตุการณ์จะถูกดำเนินการ ข้อมูลจาก Web Worker ถูกเก็บไว้ใน event.data
ยุติ Web Worker
เมื่อมีการสร้างวัตถุผู้ปฏิบัติงานบนเว็บ ออบเจ็กต์จะยังคงฟังข้อความ (แม้หลังจากสคริปต์ภายนอกเสร็จสิ้น) จนกว่าจะสิ้นสุด
หากต้องการยุติการทำงานเว็บและทรัพยากรเบราว์เซอร์/คอมพิวเตอร์ฟรี ให้ใช้
terminate()วิธีการ:
w.terminate();
นำ Web Worker มาใช้ซ้ำ
หากคุณตั้งค่าตัวแปรผู้ปฏิบัติงานเป็น undefined หลังจากสิ้นสุดการทำงาน คุณสามารถใช้รหัสซ้ำได้:
w = undefined;
รหัสตัวอย่าง Web Worker แบบเต็ม
เราได้เห็นรหัสผู้ปฏิบัติงานในไฟล์ .js แล้ว ด้านล่างนี้คือรหัสสำหรับหน้า HTML:
ตัวอย่าง
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<script>
var w;
function startWorker()
{
if (typeof(Worker) !== "undefined")
{
if (typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
}
else
{
document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
}
}
function stopWorker()
{
w.terminate();
w = undefined;
}
</script>
</body>
</html>
Web Workers และ DOM
เนื่องจากผู้ปฏิบัติงานเว็บอยู่ในไฟล์ภายนอก พวกเขาจึงไม่มีสิทธิ์เข้าถึงวัตถุ JavaScript ต่อไปนี้:
- วัตถุหน้าต่าง
- วัตถุเอกสาร
- วัตถุหลัก