API ของผู้ปฏิบัติงานบนเว็บ

สารบัญ

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

Web Worker คืออะไร?

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

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

รองรับเบราว์เซอร์

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


Chrome 4	IE 10	Firefox 3.5	Safari 4	Opera 11.5
Jan 2010	Sep 2012	Jun 2009	Jun 2009	Jun 2011

ตัวอย่างคนทำงานเว็บ

ตัวอย่างด้านล่างสร้างโปรแกรมทำงานเว็บแบบง่ายที่นับตัวเลขในพื้นหลัง:

ตัวอย่าง

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Web Workers API</h2>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>

<script>
let w;

function startWorker() {
  if(typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
  }
  w.onmessage = function(event) {
    document.getElementById("result").innerHTML = event.data;
  };
}

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

</body>
</html>

if (typeof(Worker) !== "undefined") {
  // Yes! Web worker support!
    // Some code.....
 }
 else {
    // Sorry! No Web Worker support..
 }

สร้างไฟล์ Web Worker

ตอนนี้ เรามาสร้าง Web Worker ของเราใน JavaScript ภายนอกกันดีกว่า

ที่นี่เราสร้างสคริปต์ที่มีความสำคัญ สคริปต์ถูกเก็บไว้ในไฟล์ "demo_workers.js":

let i = 0;

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

timedCount();

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

หมายเหตุ: โดยปกติแล้ว Web Worker จะไม่ใช้สำหรับสคริปต์ง่ายๆ ดังกล่าว แต่สำหรับงานที่ใช้ 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;
 };

เมื่อพนักงานเว็บโพสต์ข้อความ รหัสภายในตัวฟังเหตุการณ์จะถูกดำเนินการ ข้อมูล จากผู้ปฏิบัติงานเว็บจะถูกเก็บไว้ใน event.data

ยุติ Web Worker

เมื่อมีการสร้างออบเจ็กต์ผู้ปฏิบัติงานเว็บ ออบเจ็กต์นั้นจะคอยฟังข้อความต่อไป (แม้ว่าสคริปต์ภายนอกจะเสร็จสิ้นแล้วก็ตาม) จนกว่าจะถูกยกเลิก

หากต้องการยุติการทำงานของเว็บ และเพิ่มทรัพยากรเบราว์เซอร์/คอมพิวเตอร์ ให้ใช้ terminate() วิธีการ:

w.terminate();

ใช้ Web Worker ซ้ำ

หากคุณตั้งค่าตัวแปรผู้ปฏิบัติงานเป็นไม่ได้กำหนด หลังจากที่ถูกยกเลิกแล้ว คุณสามารถใช้รหัสซ้ำได้:

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>
let w;

function startWorker()
{
  if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
  }
  w.onmessage = function(event) {
    document.getElementById("result").innerHTML = event.data;
  };
}

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

</body>
</html>

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Web Workers API</h2>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>

<script>
let w;

function startWorker() {
  if(typeof(w) == "undefined") {
    w = new Worker("demo_workers.js");
  }
  w.onmessage = function(event) {
    document.getElementById("result").innerHTML = event.data;
  };
}

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

</body>
</html>

พนักงานเว็บและ DOM

เนื่องจากผู้ปฏิบัติงานเว็บอยู่ในไฟล์ภายนอก พวกเขาจึงไม่สามารถเข้าถึงออบเจ็กต์ JavaScript ต่อไปนี้:

วัตถุหน้าต่าง
วัตถุเอกสาร
วัตถุหลัก