HTML5 เว็บแรงงาน
คนงานเว็บเรียกใช้ JavaScript ในพื้นหลังและไม่ส่งผลกระทบต่อประสิทธิภาพการทำงานของหน้า
Worker ที่เว็บคืออะไร?
เมื่อรันสคริปต์ในหน้าเว็บ HTML ที่รัฐหน้าไม่ตอบสนองจนกว่าสคริปต์เสร็จสมบูรณ์
คนงานเว็บเรียกใช้ JavaScript ในพื้นหลังเป็นอิสระจากสคริปต์อื่น ๆ จะไม่ส่งผลกระทบต่อประสิทธิภาพการทำงานของหน้า คุณยังคงสามารถที่จะทำอะไรที่เป็นความเต็มใจที่จะทำ: คลิกเพื่อเลือกเนื้อหาอื่น ๆ ในช่วงเวลาที่คนงานเว็บทำงานในพื้นหลัง
สนับสนุนเบราว์เซอร์
Internet Explorer 10, Firefox, Chrome, Safari และ Opera สนับสนุนคนงานเว็บ
ตัวอย่าง HTML5 เว็บแรงงาน
ตัวอย่างต่อไปนี้สร้างคนงานเว็บง่ายนับในพื้นหลัง:
รหัสไฟล์ demo_workers.js:
ฟังก์ชั่น timedCount ()
{
i = i + 1;
postMessage (i);
setTimeout ( "timedCount ()", 500);
}
timedCount ();
การตรวจสอบว่าเบราว์เซอร์รองรับคนงานเว็บ
ก่อนที่จะสร้างคนงานเว็บโปรดตรวจสอบเบราว์เซอร์ของผู้ใช้สนับสนุนมัน
{
// ใช่! สนับสนุนคนงานเว็บ!
//รหัสบาง .....
}
อื่น
{
// ขออภัย! Web Worker ไม่สนับสนุน
}
สร้างไฟล์คนงานเว็บ
ตอนนี้ขอสร้างคนงานเว็บของเราใน JavaScript ภายนอก
ที่นี่เราได้สร้างนับสคริปต์ สคริปต์ที่ถูกเก็บไว้ใน "demo_workers.js" ไฟล์:
ฟังก์ชั่น timedCount ()
{
i = i + 1;
postMessage (i);
setTimeout ( "timedCount ()", 500);
}
timedCount ();
ส่วนหนึ่งที่สำคัญของรหัสข้างต้นเป็น postMessage () วิธีการ - มันถูกนำมาใช้เพื่อกลับบางข่าวหน้า HTML
หมายเหตุ: ผู้ปฏิบัติงานเว็บโดยทั่วไปไม่ได้ใช้สำหรับสคริปต์ง่ายเช่น แต่สำหรับงาน CPU สูงมากขึ้น
สร้างวัตถุ Web Worker
เรามีคนงานไฟล์เว็บและตอนนี้เราจำเป็นต้องโทรได้จากหน้าเว็บ HTML
รหัสต่อไปนี้จะตรวจพบการปรากฏตัวของคนงานหากไม่มี - มันสร้างวัตถุคนงานเว็บใหม่แล้วเรียก "demo_workers.js" รหัส:
{
w=new Worker("demo_workers.js");
}
จากนั้นเราสามารถใช้สถานที่และรับข้อความจากคนงานเว็บ
เพิ่มในคนงานเว็บ "OnMessage" ฟังเหตุการณ์:
. document.getElementById ( "ผล") innerHTML = event.data;
};
การเลิกจ้างคนงานเว็บ
เมื่อเราสร้างวัตถุคนงานเว็บก็จะยังคงที่จะฟังสำหรับข้อความ (แม้หลังจากเสร็จสิ้นการสคริปต์ภายนอก) จนกว่าจะมีการยกเลิกโดย
ที่จะยุติการปฏิบัติงานเว็บและปล่อยทรัพยากรเบราว์เซอร์ / คอมพิวเตอร์ใช้ยุติ () วิธีการ:
โค้ดตัวอย่าง Web Worker สมบูรณ์
เราได้เห็นคนทำงานรหัสไฟล์ .js นี่คือหน้ารหัส HTML:
ตัวอย่าง
<html>
<head>
<Meta charset = "UTF-8">
<title> กวดวิชานี้ (w3big.com) </ title>
</ head>
<body>
<p> นับ: <เอาท์พุท id = "ผล"> </ ส่งออก> </ p>
<ปุ่ม onclick = "startWorker ()"> การทำงาน </ ปุ่ม>
<ปุ่ม onclick = "stopWorker ()"> หยุด </ ปุ่ม>
<p> <strong> หมายเหตุ: </ strong> Internet Explorer 9 และรุ่นก่อนหน้าของเบราว์เซอร์ IE ไม่สนับสนุนเว็บแรงงาน </ p>
<script>
W var;
ทำงาน startWorker () {
ถ้า (typeof (คนงาน)! == "ไม่ได้กำหนด") {
ถ้า (typeof (w) == "ไม่ได้กำหนด") {
W = คนทำงานใหม่ ( "demo_workers.js");
}
w.onmessage = ฟังก์ชั่น (event) {
. document.getElementById ( "ผล") innerHTML = event.data;
};
} else {
document.getElementById ( "ผล") innerHTML = "ขออภัยเบราว์เซอร์ของคุณไม่สนับสนุนเว็บแรงงาน ... " .;
}
}
ฟังก์ชั่น stopWorker ()
{
w.terminate ();
W = ไม่ได้กำหนด;
}
</ script>
</ body>
</ html>
ลอง»
เว็บแรงงานและพระ
ตั้งแต่คนงานเว็บในแฟ้มภายนอกพวกเขาไม่สามารถเข้าถึงวัตถุจาวาสคริปต์ตัวอย่างต่อไปนี้:
- วัตถุหน้าต่าง
- วัตถุเอกสาร
- วัตถุปกครอง