Sử dụng Web Workers trong HTML5

Web Workers cho phép chạy các script chạy lâu (long-running scripts) trên luồng nền (background thread), không bị ngắt quãng bởi các tác vụ giao diện người dùng (click, nhập liệu, v.v.), giúp trang web luôn mượt mà (responsive).

Đặc điểm quan trọng

• Web Workers là script nền, tương đối "nặng" (heavyweight), không nên tạo quá nhiều worker cùng lúc.
• Ví dụ: không nên tạo một worker cho mỗi pixel của ảnh 4 megapixel.
• Worker được khởi tạo bằng URL của một file JavaScript chứa mã sẽ chạy trong worker.
• Worker giao tiếp với trang chính (main thread) qua hệ thống sự kiện (postMessage, onmessage).

Cú pháp khởi tạo

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

Luồng hoạt động cơ bản

1. Trang chính tạo worker: new Worker('worker.js').
2. Worker lắng nghe onmessage để nhận dữ liệu từ trang chính.
3. Worker xử lý tính toán nặng, sau đó gửi kết quả về qua postMessage().
4. Trang chính nhận kết quả qua worker.onmessage.

Web Workers không thể truy cập DOM trực tiếp. Chúng chỉ có thể trao đổi dữ liệu tuần tự hóa (serializable data) với luồng chính.