HTML Web Workers API

Web Worker คืออะไร?

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

Web Worker คือ JavaScript ที่ทำงานอยู่เบื้องหลัง โดยไม่ขึ้นกับสคริปต์อื่นๆ โดยไม่ส่งผลกระทบต่อประสิทธิภาพของเพจ คุณสามารถทำสิ่งที่คุณต้องการต่อไป: การคลิก เลือกสิ่งต่างๆ ฯลฯ ในขณะที่ Web Worker ทำงานอยู่เบื้องหลัง

การสนับสนุนเบราว์เซอร์

ตัวเลขในตารางระบุเบราว์เซอร์เวอร์ชันแรกที่รองรับ Web Workers อย่างเต็มรูปแบบ

ตัวอย่าง 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>

ในกรณีที่คุณลองใส่ 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>