Web Worker API

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

อะไรคือ Web Worker?

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

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

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

ตัวเลขในตารางบ่งชี้เบราซเรอร์ครั้งแรกที่สนับสนุน Web Workers ทั้งหมด:

Chrome IE Firefox Safari Opera
Chrome 4 IE 10 Firefox 3.5 Safari 4 Opera 11.5
มกราคม 2010 กันยายน 2012 มิถุนายน 2009 มิถุนายน 2009 มิถุนายน 2011

ตัวอย่าง Web Worker

ตัวอย่างด้านล่างนี้สร้าง Web Worker โดยง่ายๆ ซึ่งคำนวณตัวเลขภายในสัปดาห์ของหลัง

ตัวอย่าง

นับถือ

ทดสอบด้วยตัวเอง

ตรวจสอบเบราซเรอร์ Web Worker

ก่อนที่จะสร้าง web worker โปรดตรวจสอบว่าเบราซเรอร์ของผู้ใช้สนับสนุน Web Worker หรือไม่:

if (typeof(Worker) !== "undefined") {
  // ใช่เลย!มีการสนับสนุน Web worker!
  // บางรหัสโค้ด.....
}
  // ขอโทษ!ไม่มีการสนับสนุน Web Worker..
}

สร้างไฟล์ 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

รหัสบรรทัดด้านล่างนี้ตรวจสอบว่า worker มีอยู่หรือไม่ ถ้าไม่มี มันจะสร้างองค์ประกอบ Web Worker ใหม่และปฎิบัติการรหัสใน "demo_workers.js"

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

หลังจากนั้น เราสามารถส่งและรับข้อความจาก web worker

เพิ่ม "onmessage" ตัวดูแลเหตุการณ์ให้กับ web worker

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

เมื่อ Web Worker แอ็กซ์เต็นด์ข้อความ รหัสในตัวดูแลเหตุการณ์จะทำงาน ข้อมูลจาก Web Worker จะถูกเก็บไว้ใน event.data

หยุด Web Worker

เมื่อ Web Worker แอ็กซ์เต็นด์ออกมา มันจะยังคงติดตามข้อความ (แม้แต่หลังจากสคริปต์ด้านนอกเสร็จงาน) จนกว่ามันจะถูกหยุดทำงาน

เพื่อหยุด Web Worker และปล่อยทรัพยากรของเครื่องพิมพ์/คอมพิวเตอร์ ใช้ terminate() วิธี:

w.terminate();

การปฎิบัติการ Web Worker อีกครั้ง

ถ้าจะเรียก worker ว่า undefined ในตอนที่มันหยุดทำงาน คุณสามารถใช้รหัสด้านล่างนี้:

w = undefined;

รหัสตัวอย่างเต็มของ Web Worker

เราได้เห็นรหัส Worker ในแบบ .js แล้ว。ต่อไปนี้คือรหัสของหน้า HTML:

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>
<p>นับตัวเลข: <output id="result"></output></p>
<button onclick="startWorker()">เริ่มงาน</button>
<button onclick="stopWorker()">หยุด 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>

ทดสอบด้วยตัวเอง

Web Worker และ DOM

เนื่องจาก Web Worker ตั้งอยู่ในไฟล์นอก ดังนั้น พวกเขาไม่สามารถเข้าถึงส่วน JavaScript ต่อไปนี้ได้:

  • ส่วน window
  • ส่วน document
  • ส่วน parent