Người Viết : ViKiMi Editor
Hướng dẫn sử dụng Web Workers tạo những dịch vụ Website tốt nhất và hiệu suất ổn định
Bạn làm việc với HTML và chưa biết đến Web Workers? Có thể nói nó cũng không mới mẻ lắm nhưng hoàn toàn đáng để bạn lưu tâm. Khi bạn muốn xây dựng Website có kinh phí thấp và khả năng bảo trì không khó khăn, chắc hẳn đây là phần mà bạn có thể sử dụng. Nó mang đến cho bạn những lợi ích đủ để dùng, và những dịch vụ bé mà bạn muốn mang lại.
Có rất nhiều thứ mà bạn có thể giúp tạo ra các dịch vụ Web.
Bạn có thể sử dụng chúng cách dễ dàng, các dịch vụ được tạo bởi chúng có thể sử dụng tốt và lâu dài. Cách mà bạn mang đến chúng cho khách truy cập không quan trọng bằng dịch vụ mà khách truy cập có thể dùng. Mọi thứ mà bạn mang đến trên giao diện Website là điều họ thấy.
Bạn có thể sử dụng các thành phần sau :
+ Sử dụng Framework AJAX
+ Sử dụng các ngôn ngữ lập trình như PHP, PYTHON…
+ Sử dụng các công thức tính toán của bên thứ 3
+ Sử dụng JavaScript
ETC,
Nếu bạn chỉ cần sử dụng một thứ không tốn dung lượng chắc hẳn bạn sẽ quan tâm đến Web Workers. Và nó được HTML mang đến khá đơn giản và thú vị, đây có vẻ như một Công nhân với công việc nhỏ bé mà hiệu quả.
+ Hạn chế đó là Chỉ những trình duyệt hiện đại hiện nay sẽ hỗ trợ đầy đủ về HTML Web Workers API.
+ Nhưng như vậy là vẫn đầy đủ nếu bạn chỉ quan tâm tới những thứ nhỏ bé cần làm
A ] HTML Web Workers API là gì ?
+ HTML Web Workers là một JavaScript chạy ở chế độ nền và không ảnh hưởng đến hiệu suất của trang. Chính vì nó chạy ở chế độ nền nên sẽ mang lại hiệu quả cao về cải thiện tốc độ của Website, ít gây ra những thiết kế hiển thị kém.
+ Bất cứ dịch vụ nào đang chạy ở chế độ nền thì luôn cho phép bạn tiếp tục làm việc mà không bị ảnh hưởng gì.
Chính vì vậy khi HTML Web Workers API chạy ở chế độ nền, bạn vẫn có thể tạo các thao tác khác nhấp chuột, chọn mọi thứ, v.v. Và Trang Web mà bạn đang làm việc sẽ không cần Reload lại, điều này khá tương đồng khi bạn làm việc với AJAX
Tóm lại, HTML Web Workers API có thể giúp tạo những dịch vụ Website khá cơ bản khi bạn cần.
B ] Cách thức hoạt động HTML Web Workers API ?
Bước 1 : Thực hiện kiểm tra Trình Duyệt có hỗ trợ Web Workers
Nếu Trình Duyệt có hỗ trợ hãy thực hiện Khởi tạo HTML Web Workers:
var w; if (typeof(Worker) !== "undefined") { // Yes! Web worker support! // Creating a web worker ... if (typeof(w) == "undefined") { w = new Worker("workers.js"); } } else { // No Web Worker support.. }
Bước 2 : Tạo File làm việc Web Worker
Đây là File sẽ chứa mã Code xử lý của Web Worker
Nó cho phép bạn tạo ra những dịch vụ chạy nền, bằng xử lý của ngôn ngữ JavaScript. Bạn có thể tạo ra bất cứ tiện ích nào cần thiết bằng ngôn ngữ JavaScript.
+ Ở đây chúng ta sẽ tạo File ” workers.js “
+ Nội dung File JavaScript như sau :
var i = 0; function timedCount() { i = i + 1; postMessage(i); setTimeout("timedCount()",1000); } timedCount();
+ Phương thức postMessage() – được sử dụng để gửi thông báo trở lại trang HTML.
Trên đây là một dịch vụ cho phép tăng lần đếm đơn giản nhất.
>> Nếu bạn quan tâm tới các dịch vụ khó hơn và đúng yêu cầu thực tế thì cần phải triển khai như ý đồ của Bạn bằng Code.
Và tốt hơn là hãy sử dụng kết hợp JSON để tạo một dịch hoàn thiện
Bước 3 : Nhận thông báo hồi đáp của HTML Web Workers API
Qua những bước trên, chúng ta thấy rằng cần phải nhận hồi đáp của Web Workers (Từ File JavaScript).
Có thể hiểu đây là cách nhận thông tin xử lý từ dịch vụ.
+ Hãy tiến hành Thêm trình xử lý sự kiện “onmessage”
w.onmessage = function(event){
document.getElementById("op01").innerHTML = event.data;
};
Như vậy, chúng ta đã có thể nhận được thông tin gửi về từ HTML Web Workers API.
Đoạn Mã đầy đủ của Trang HTML như sau :
Trang HTML sẽ thực hiện gọi Web Workers là file JavaScript.
<!DOCTYPE html>
<html>
<body>
<p>Đếm Số : <output id="op01"> </output></p>
<button onclick="startWorker()">Bắt Đầu Worker </button>
<button onclick="stopWorker()"> Dừng Worker </button>
<script>
var w;
function startWorker() {
if (typeof(Worker) !== "undefined") {
if (typeof(w) == "undefined") {
w = new Worker("workers.js");
}
w.onmessage = function(event) {
document.getElementById("op01").innerHTML = event.data;
};
} else {
document.getElementById("op01").innerHTML = "No Web Worker support.";
}
}
function stopWorker() {
w.terminate();
w = undefined;
}
</script>
</body>
</html>
Trong xử lý trên chúng ta đã tạo một HTML Web Workers đơn giản nhất.
Và cũng cần nhắc rằng, Để chấm dứt hoạt động của một Web Workers và giải phóng tài nguyên máy tính + trình duyệt :
+ Hãy sử dụng phương thức terminate()
LƯU Ý QUAN TRỌNG :
WEB WORKERS nằm trong các tệp bên ngoài nên nó sẽ không có quyền truy cập vào các đối tượng JavaScript sau đây:
+ The Window Object
+ The Document Object
+ The Parent Object
Do đó, tại File JavaScript (Web Workers) sẽ không truy cập vào được các đối tượng trên.
