HTML5: Web Worker

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Với công nghệ phần cứng hiện nay, việc sử dụng đa luồng đã trở nên một phần không thể thiếu trong các phần mềm. Tuy nhiên, công nghệ thiết kế web vẫn chưa tận dụng được sức mạnh này.

Với các công việc đòi hỏi một quá trình xử lý lâu, lập trình viên thường phải sử dụng những thủ thuật như setTimeout(), setInterval(),... để thực hiện từng phần công việc. Hiện nay, để giải quyết vấn đề này, một API mới dành cho javascript đã xuất hiện với tên gọi Web Worker.

Giới thiệu

Đối tượng Web Worker được tạo ra sẽ thực thi trong một thread độc lập và chạy ở chế độ nền nên không ảnh hưởng đến giao diện tương tác của trang web với người dùng. Với đặc điểm này, bạn có thể sử dụng Web Workert các công việc đòi hỏi thời gian xử lý lâu nạp dữ liệu, tạo cache,...

Điểm hạn chế của Web Worker là không thể truy xuất được thành phần trên DOM, và cả các đối tượng window, document hay parent. Mã lệnh các công việc cần thực thi cũng phải được cách ly trong một tập tin script.

Việc tạo một Web Worker sẽ cần thực hiện như sau:

var worker = new Worker('mytask.js');

Tập tin script sẽ được tải về và Worker chỉ được thực thi sau khi tập tin này tải hoàn tất. Trong tập tin script này, ta sẽ xử lý sự kiện „message‟ của Worker từ các dữ liệu nhận được thông qua phương thức postMessage(). Phương thức này chấp nhận một tham số chứa thông điệp cần gửi đến tập tin script để xử lý. Dữ liệu này sẽ được lấy thông qua thuộc tính data của tham số event trong hàm xử lý sự kiện message. Quy trình này được mô tả trong hình sau:

v1study.com/public/images/article/game2d-web-worker-exam1.png

Ví dụ đơn giản nhất

Tạo hai tập tin sau trong cùng một thư mục:

mytask.js:

this.onmessage = function (event) {

var name = event.data;

postMessage("Hello "+name);

};

Test.html:

<!DOCTYPE html>

<body>

<input type="text" id="username" value="2" />

<br />

<button id="button1">Submit</button>

<script>

worker = new Worker("mytask.js");

worker.onmessage = function (event) {

alert(event.data);

};

document.getElementById("button1").onclick = function() {

var name = document.getElementById("username").value;

worker.postMessage(name);

};

</script>

</body>

</html>

Bây giờ bạn chạy thử và nhấn nút Submit, một thông điệp sẽ hiển thị với nội dung tương tự “Hello V1Study”.

Kết luận

Với các công việc đơn giản, lập trình viên sẽ gửi đi một dữ liệu kiểu mảng bao gồm tên lệnh và các dữ liệu cần xử lý. Worker sẽ phân tích dữ liệu nhận được và gọi các phương thức xử lý tương ứng. Tuy nhiên, một Worker bạn tạo ra chỉ nên dành riêng để thực hiện một công việc cụ thể.

Bởi vì mục đích chính của việc tạo ra chúng là để làm những công việc “nặng nhọc”. Cuối cùng, khi đã hoàn tất công việc, bạn hãy giải phóng cho Worker bằng cách dùng phương thức worker.terminate().

Bạn có thể xem demo sau về cách sử dụng Web Worker để thực hiện đồng thời việc tính toán tìm các số nguyên tố và cập nhật lại canvas:

http://v1study.com/public/images/article/game2d-canvas-is-running.png

» Tiếp: Tạo chuyển động với WindowAnimationTiming API
« Trước: Web SQL Database
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!