Bài viết hôm nay, OSVN- công ty thiet ke web chuyen nghiep chuẩn SEO sẽ cũng các bạn tìm hiểu cách làm việc với các Web Worker và khám phá xem những nhiệm vụ nào thích hợp nhất cho chúng. Bạn sẽ thấy bạn có thể sử dụng các công nghệ HTML 5 như thế nào để nâng cao hiệu quả sử dụng các công nghệ đó.
Web Worker là gì?
Web Worker 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ấn chuột, chọn mọi thứ, vv, trong khi web worker(Trình làm việc trên nền Web) đang chạy ở chế độ nền.
Đặc tả Web Worker (Trình làm việc trên nền Web) không chỉ thêm tính đồng thời cho JavaScript và các trình duyệt Web. Nó còn thực hiện việc này một cách thông minh để truyền sự tự tin cho các nhà phát triển chứ không cung cấp cho họ một công cụ gây ra các rắc rối. Với các Web Worker, luồng được sinh ra không có quyền truy cập đến tài nguyên giống như luồng của giao diện người dùng chính. Trong thực tế, mã trong luồng được sinh ra thậm chí không thể nằm trong cùng một tệp như mã được thực hiện bởi luồng của giao diện người dùng chính.
Các trình duyệt hỗ trợ:
Internet Explorer 10, Firefox, Chrome, Safari and Opera
Tạo một tập tin Web Worker
Bây giờ, hãy tạo một web worker trong một JavaScript. Ở đây, chúng ta tạo ra một kịch bản đếm. Các kịch bản được lưu trữ trong file “demo_workers.js”
var i = 0;
function timedCount() {
i = i + 1;
postMessage(i);
setTimeout(“timedCount()”,500);
}
timedCount();
Phần quan trọng của các mã trên là phương thức postMessage () được sử dụng để gửi tin nhắn trở lại trang HTML.
Tạo một đối tượng Web Worker
Bây giờ chúng ta có các tập tin web worker, 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 web worker có tồn tại, nếu không nó tạo ra một đối tượng web worker mới và chạy các mã trong file “demo_workers.js”:
if(typeof(w) == “undefined”) {
w = new Worker(“demo_workers.js”);
}
Sau đó chúng ta có thể gửi và nhận tin nhắn từ web worker.
Thêm một “onmessage” lắng nghe sự kiện cho web worker:
w.onmessage = function(event){
document.getElementById(“result”).innerHTML = event.data;
};[/I]
Khi một bản tin web worker được gửi, các mã trong lắng nghe sự kiện được thực thi. Các dữ liệu từ web worker được lưu trữ trong event.data.
Kết thúc một Web Worker
Khi một đối tượng web worker được tạo ra, nó sẽ tiếp tục lắng nghe thông báo (ngay cả sau khi scipt bên ngoài đã kết thúc) cho đến khi nó kết thúc và sử dụng phương thức terminate():
w.terminate();
Code Web Worker đầy đủ:
Chúng ta đã thấy các mã web worker trong file js. Dưới đây là các mã cho các trang HTML:
<!DOCTYPE html>
<html>
<body>
<h3>Ví dụ về Web Worker đơn giản của OSVN- Công ty thiết kế website chuyên nghiệp</h3>
<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! No Web Worker support.”;
}
}
function stopWorker() {
w.terminate();
}
</script>
</body>
</html>
Kết luận
Các Web Worker nghe như là một công nghệ mới lạ đối với các nhà phát triển Web. Nhưng, như bạn đã thấy trong bài viết này, chúng có những ứng dụng rất thiết thực. Tuy bài trên chúng tôi- Công ty thiết kế web OSVN chỉ đề cập đến những ví dụ đơn giản về nó nhưng các Worker có thể được sử dụng để tìm nạp trước dữ liệu hoặc thực hiện các phép toán xảy ra trước khác để cung cấp một giao diện người dùng sống động hơn nhiều. Điều này có thể đặc biệt đúng với các ứng dụng Web di động cần tải dữ liệu qua một mạng chậm tiềm ẩn. Hãy kết hợp điều này với các chiến lược lưu trữ trong bộ nhớ truy cập nhanh, và những người dùng của bạn sẽ bị ngạc nhiên bởi sự sống động của ứng dụng của bạn.
Thông tin liên hệ
CÔNG TY TNHH GIẢI PHÁP CÔNG NGHỆ TRỰC TUYẾN VIỆT NAM OSVN
Địa chỉ: Số 192, Tổ 4, P. Tân Thịnh, TP. Thái Nguyên
Điện thoại: 0987 36 81 82
Email: info[@]osvn.com.vn
Nguồn: http://ithietkeweb.net/tim-hieu-html5-web-worker/