web worker เป็น JavaScript ทำงานในพื้นหลังโดยไม่มีผลต่อประสิทธิภาพการทำงานของหน้า
คืออะไร Web Worker ?
เมื่อรันสคริปต์ในหน้าเว็บ HTML, หน้าจะไม่ตอบสนองจนกว่าสคริปต์ที่จะเสร็จสิ้น
คนงานเว็บตามที่กำหนดโดย Web Consortium เวิลด์ไวด์ (W3C) และเว็บ Hypertext การประยุกต์ใช้เทคโนโลยีการทำงานกลุ่ม (WHATWG) เป็นสคริปต์ JavaScript ดำเนินการจากเพจ HTML ที่ทำงานในพื้นหลังเป็นอิสระจากสคริปต์ส่วนติดต่อผู้ใช้อื่น ๆ ที่ อาจจะยังได้รับการดำเนินการจากหน้า HTML เดียวกัน คนงานเว็บมักจะสามารถที่จะใช้ซีพียูแบบมัลติคอร์ได้อย่างมีประสิทธิภาพมากขึ้น
ภาพรวม
ในฐานะที่เป็นจินตนาการ WHATWG คนงานเว็บค่อนข้างน้ำหนักหนัก พวกเขาคาดว่าจะเป็นระยะยาวมีประสิทธิภาพค่าใช้จ่ายเริ่มต้นขึ้นสูงและสูงต่อเช่นค่าใช้จ่ายในหน่วยความจำ
คนงานเว็บไม่ได้มีเจตนาหรือคาดว่าจะนำมาใช้ในจำนวนมากเท่าที่จะทำได้หมูทรัพยากรระบบ
คนงานเว็บอนุญาตให้มีการดำเนินการพร้อมกันของหัวข้อการเบราว์เซอร์และหนึ่งหรือมากกว่าหนึ่งหัวข้อ JavaScript ทำงานในพื้นหลัง เบราว์เซอร์ซึ่งต่อไปนี้หัวข้อเดียวของการดำเนินการจะต้องรอในโปรแกรมจาวาสคริปต์ที่จะเสร็จสิ้นการดำเนินการก่อนที่จะดำเนินและนี่อาจจะใช้เวลาอย่างมีนัยสำคัญซึ่งโปรแกรมเมอร์อาจชอบที่จะซ่อนตัวจากผู้ใช้
จะช่วยให้เบราว์เซอร์ที่จะยังคงมีการดำเนินการตามปกติในขณะที่ทำงานสคริปต์ในพื้นหลัง สเปคคนงานเว็บเป็นข้อกำหนดที่แยกต่างหากจากสเปค HTML5 และสามารถใช้ร่วมกับ HTML5
ทุ่มเทและใช้ร่วมกันคนงาน: มีสองประเภทของคนงานเว็บ
เมื่อคนงานเว็บทำงานในพื้นหลังที่พวกเขาไม่ได้มีการเข้าถึงโดยตรงไป DOM แต่สื่อสารกับเอกสารโดยผ่านข้อความ นี้จะช่วยให้การดำเนินการแบบมัลติเธรดของโปรแกรม 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 ไฟล์
ตอนนี้ขอสร้างของเรา web worker ใน JavaScript ภายนอก
ที่นี่เราสร้างสคริปต์ที่นับ สคริปต์ที่ถูกเก็บไว้ใน "/html/demo_workers.js" ไฟล์:
var i = 0;
function timedCount() {
i = i + 1;
postMessage(i) ;
setTimeout("timedCount() ",500);
}
timedCount() ;
ส่วนที่สำคัญของรหัสข้างต้นเป็น postMessage() วิธีการ - ซึ่งจะใช้ในการโพสต์ข้อความกลับไปยังหน้าเว็บ HTML
Note: โดยปกติ web workers จะไม่ใช้สคริปต์ง่ายเช่น แต่สำหรับงานที่เข้มข้นมากขึ้น CPU
สร้าง Web Worker วัตถุ
ตอนนี้เรามี web worker ไฟล์เราจำเป็นต้องโทรได้จากหน้าเว็บ HTML
บรรทัดต่อไปนี้จะตรวจสอบถ้า web worker อยู่แล้วหากไม่ได้ - จะสร้างใหม่ web worker วัตถุและวิ่งรหัสใน "/html/demo_workers.js" :
if(typeof(w) == "undefined") {
w = new Worker("/html/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 วัตถุถูกสร้างขึ้นก็จะยังคงฟังสำหรับข้อความ (even after the external script is finished) จนกว่าจะมีการยกเลิก
เพื่อยุติ web worker และเบราว์เซอร์ฟรีทรัพยากร / คอมพิวเตอร์ใช้ terminate() วิธีการ:
w.terminate();
นำมาใช้ Web Worker
ถ้าคุณตั้งค่า web worker ตัวแปรไม่ได้กำหนดหลังจากที่มันได้ถูกยกเลิกคุณสามารถใช้รหัส:
w = undefined;
เต็มรูปแบบ Web Worker ตัวอย่างรหัส
เราได้เห็นแล้ว 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>
<br><br>
<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! No Web Worker support.";
}
}
function stopWorker() {
w.terminate();
w = undefined;
}
</script>
</body>
</html> ลองตัวเอง» Web Workers และ DOM
ตั้งแต่ web workers อยู่ในไฟล์ภายนอกที่พวกเขาไม่ได้มีการเข้าถึงวัตถุ JavaScript ต่อไปนี้:
- วัตถุหน้าต่าง
- วัตถุเอกสาร
- วัตถุปกครอง