Thứ Tư, 25 tháng 12, 2013
HTML5 Web Workers
Một nhân viên web là một hoạt JavaScript trong nền, mà không ảnh hưởng đến hiệu suất của trang.
Nhân Viên Web là gì?
Khi thực hiện kịch bản trong một trang HTML, trang trở nên bất tỉnh cho đến khi kịch bản được hoàn thành.
Một nhân viên web là một JavaScript chạy ở chế độ nền, độc lập với các kịch bản khác, mà không ảnh hưởng đến hiệu suất của trang. Bạn có thể tiếp tục làm bất cứ điều gì bạn muốn: nhấp vào, chọn mọi thứ, vv, trong khi người lao động web chạy trong nền.
Hỗ trợ trình duyệt
Internet Explorer 10, Firefox, Chrome, Safari và Opera hỗ trợ người lao động Web.
HTML5 Web Workers Ví dụ
Ví dụ dưới đây tạo ra một nhân viên web đơn giản mà đếm số trong nền:
Kiểm tra công nhân hỗ trợ Web
Trước khi tạo một nhân viên web, kiểm tra xem trình duyệt của người dùng hỗ trợ nó:
if(typeof(Worker)!=="undefined")
{
// Yes! Web worker support!
// Some code.....
}
else
{
// Sorry! No Web Worker support..
}
{
// Yes! Web worker support!
// Some code.....
}
else
{
// Sorry! No Web Worker support..
}
Tạo ra một tập tin Web Worker
Bây giờ, hãy tạo nhân viên web của chúng tôi trong một JavaScript bên ngoài.
Ở đây, chúng ta tạo ra một kịch bản mà đếm. Kịch bản được lưu trữ trong "demo_workers.js" tập tin:
var i=0;
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();
Một phần quan trọng của các mã trên là postMessage () phương pháp - được sử dụng để gửi tin nhắn trở lại trang HTML.
Lưu ý: Thông thường công nhân web không được sử dụng cho các kịch bản đơn giản như vậy, nhưng đối với nhiều nhiệm vụ chuyên sâu CPU.
Tạo ra một đối tượng Web Worker
Bây giờ chúng ta có các tập tin nhân viên trang web, chúng ta cần phải gọi nó từ một trang HTML.
Các dòng sau kiểm tra nếu người lao động đã tồn tại, nếu không - nó tạo ra một đối tượng công nhân web mới và chạy các mã trong "demo_workers.js":
if(typeof(w)=="undefined")
{
w=new Worker("demo_workers.js");
}
{
w=new Worker("demo_workers.js");
}
Sau đó chúng tôi có thể gửi và nhận tin nhắn từ người lao động web.
Thêm một "onmessage" lắng nghe sự kiện cho người lao động web.
w.onmessage=function(event){
document.getElementById("result").innerHTML=event.data;
};
document.getElementById("result").innerHTML=event.data;
};
Khi bài viết công nhân web một tin nhắn, các mã trong lắng nghe sự kiện được thực thi. Các dữ liệu từ các công nhân trang web được lưu trữ trong event.data.
Chấm dứt một công nhân Web
Khi một đối tượng người lao động web được tạo ra, nó sẽ tiếp tục để nghe thông báo (ngay cả sau khi kịch bản bên ngoài kết thúc) cho đến khi nó kết thúc.
Chấm dứt một nhân viên trang web, trình duyệt và các nguồn lực / máy tính miễn phí, sử dụng chấm dứt (phương pháp):
w.terminate();
Full Web Worker Ví dụ Mã
Chúng ta đã thấy các mã công nhân trong các tập tin js.. Dưới đây là mã cho trang HTML:
Ví dụ
<!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("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();
}
</script>
</body>
</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("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();
}
</script>
</body>
</html>
Thử nó cho mình »
Công nhân trang web và DOM
Kể từ khi người lao động web là trong các tập tin bên ngoài, họ không có quyền truy cập vào các đối tượng JavaScript sau đây:
- Các đối tượng cửa sổ
- Đối tượng tài liệu
- Đối tượng phụ huynh
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét