HTML5 Web Workers
Trong hướng dẫn này, bạn sẽ học cách sử dụng HTML5 Web Workers để chạy mã JavaScript trong nền.
Web Worker là gì?
Nếu bạn cố gắng thực hiện tác vụ chuyên sâu với JavaScript tốn nhiều thời gian và yêu cầu tính toán nặng nhọc, trình duyệt sẽ đóng băng trang web và ngăn người dùng làm bất cứ điều gì cho đến khi công việc hoàn thành. Nó xảy ra bởi vì mã JavaScript luôn chạy ở phía trước.
HTML5 giới thiệu một công nghệ mới được gọi là web worker được thiết kế đặc biệt để thực hiện công việc nền một cách độc lập với các tập lệnh giao diện người dùng khác mà không ảnh hưởng đến hiệu suất của trang. Không giống như các hoạt động JavaScript thông thường, web worker không làm gián đoạn người dùng và trang web vẫn phản hồi vì họ đang chạy các tác vụ ở chế độ nền.
Mẹo: Tính năng web worker của HTML5 được hỗ trợ trong tất cả các trình duyệt web hiện đại chính như Firefox, Chrome, Opera, Safari và Internet Explorer 10 trở lên.
Tạo tệp Web Worker
Cách sử dụng đơn giản nhất của web worker là để thực hiện một công việc tốn nhiều thời gian. Vì vậy, ở đây chúng ta sẽ tạo một nhiệm vụ JavaScript đơn giản có tính từ 0 đến 100.000.
Hãy tạo một tệp JavaScript bên ngoài có tên "worker.js" và nhập mã sau.
Thí dụ
var i = 0;
function countNumbers() {
if(i < 100000) {
i = i + 1;
postMessage(i);
}
// Wait for sometime before running this script again
setTimeout("countNumbers()", 500);
}
countNumbers();Lưu ý: Web workers không có quyền truy cập vào DOM. Điều đó có nghĩa là bạn không thể truy cập bất kỳ phần tử DOM nào trong mã JavaScript mà bạn định chạy bằng cách sử dụng web worker.
Mẹo: Phương thức của đối tượng worker postMessage() được sử dụng để gửi một tin nhắn (như các số trong ví dụ trên) trở lại trang web từ tệp web worker.
Làm việc trong nền với Web Worker
Bây giờ chúng tôi đã tạo tệp Web worker của mình. Trong phần này, chúng ta sẽ khởi tạo web worker từ một tài liệu HTML chạy mã bên trong tệp có tên "worker.js" ở chế độ nền và hiển thị dần kết quả trên trang web. Hãy xem nó hoạt động như thế nào:
Thí dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Using Web Worker</title>
<script>
if(window.Worker) {
// Create a new web worker
var worker = new Worker("worker.js");
// Fire onMessage event handler
worker.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
alert("Sorry, your browser do not support web worker.");
}
</script>
</head>
<body>
<div id="result">
<!--Received messages will be inserted here-->
</div>
</body>
</html>Giải thích ví dụ:
Mã JavaScript trong ví dụ trên có ý nghĩa sau:
- Câu lệnh var worker = new Worker ("worker.js"); tạo một đối tượng web worker mới, đối tượng này được sử dụng để giao tiếp với web worker.
- Khi nhân viên đăng một tin nhắn, trình xử lý sự kiện trên tin nhắn ( dòng số 14 ) cho phép mã nhận tin nhắn từ web worker.
- Phần tử event.data chứa thông báo được gửi từ web worker.
Lưu ý: Mã mà worker chạy luôn được lưu trữ trong một tệp JavaScript riêng biệt. Điều này nhằm ngăn nhà phát triển web viết mã web worker cố gắng sử dụng các biến toàn cục hoặc truy cập trực tiếp vào các phần tử trên trang web.
Chấm dứt một web worker
Cho đến nay, bạn đã học cách tạo worker và bắt đầu nhận tin nhắn. Tuy nhiên, bạn cũng có thể chấm dứt một worker đang chạy ở giữa quá trình thực thi.
Ví dụ sau đây sẽ chỉ cho bạn cách bắt đầu và dừng worker từ một trang web thông qua việc nhấp vào các nút HTML. Nó sử dụng cùng một tệp JavaScript 'worker.js' mà chúng ta đã sử dụng trong ví dụ trước để đếm các số từ 0 đến 100000. Hãy thử xem:
Thí dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Start/Stop Web Worker</title>
<script>
// Set up global variable
var worker;
function startWorker() {
// Initialize web worker
worker = new Worker("worker.js");
// Run update function, when we get a message from worker
worker.onmessage = update;
// Tell worker to get started
worker.postMessage("start");
}
function update(event) {
// Update the page with current message from worker
document.getElementById("result").innerHTML = event.data;
}
function stopWorker() {
// Stop the worker
worker.terminate();
}
</script>
</head>
<body>
<h1>Web Worker Demo</h1>
<button onclick="startWorker();" type="button">Start web worker</button>
<button type="button" onclick="stopWorker();">Stop web worker</button>
<div id="result">
<!--Received messages will be inserted here-->
</div>
</body>
</html>Mẹo: Sử dụng web worker để chỉ thực hiện các tác vụ JavaScript nặng mà không làm gián đoạn các tập lệnh giao diện người dùng (tức là các tập lệnh phản hồi lại các nhấp chuột hoặc các tương tác khác của người dùng). Bạn không nên sử dụng web worker cho các tác vụ ngắn.