HTML5 – Giới thiệu về Web Worker

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:

Web Worker

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 Yin Yang”.

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:

Html5demos- Web Worker

Demo: http://html5demos.com/worker

HTML Source code: http://html5demos.com/worker#view-source

Worker Script: http://html5demos.com/js/cruncher.js

Tham khảo: https://developer.mozilla.org/En/DOM/Worker

YinYang’s Programming Blog

Advertisements

3 thoughts on “HTML5 – Giới thiệu về Web Worker

  1. if(effect === “detect”)
    {
    var comp = ccv.detect_objects({
    “canvas”: ccv.grayscale(App.canvas),
    “cascade” : cascade,
    “interval”: 5,
    “min_neighbors”: 1 });

    for(var i = 0; i < comp.length; i++)
    {
    ctx.lineWidth = 2;
    ctx.strokeStyle = "rgba(255, 5, 0, 255)";
    ctx.strokeRect(comp[i].x, comp[i].y, comp[i].width, comp[i].height);
    }
    }

    Em muốn xử lý đoạn code trên thông qua webworker dùng để tăng tốc xử lý thì viết như thế nào vậy anh, em vẫn chưa rõ cách xử lý ứng dụng thông qua webworker, em mong anh giúp đỡ. Cảm ơn anh

    Trả lời

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s