HTML5 Web Workers 学习笔记

HTML5 Web Workers 是一种在后台运行的 JavaScript，它不会影响页面的性能。通过 Web Workers，可以在浏览器中实现多线程，从而让页面保持响应，同时执行复杂的计算任务。

一、什么是 Web Worker？

在传统的 HTML 页面中，JavaScript 脚本会在页面中同步执行，这会导致页面在脚本运行期间变得不可响应。Web Worker 提供了一种解决方案，它允许在后台运行独立的 JavaScript 线程，从而不会影响页面的性能。

Web Worker 的主要特点包括：

独立运行：Web Worker 在后台线程中运行，不会阻塞主线程。
通信机制 ：通过 postMessage 方法，Web Worker 可以与主线程通信。
适用场景：适用于需要长时间运行的任务，例如复杂的数学计算、数据处理等。

二、浏览器支持

Web Workers 在现代浏览器中得到了广泛支持，包括 Internet Explorer 10、Firefox、Chrome、Safari 和 Opera。不过，Internet Explorer 9 及更早版本不支持 Web Workers。

三、Web Workers 的使用方法

1. 检测浏览器是否支持 Web Worker

在创建 Web Worker 之前，需要检测用户的浏览器是否支持它。可以通过以下代码进行检测：

JavaScript复制

复制代码

if (typeof(Worker) !== "undefined") {
    // 浏览器支持 Web Worker
} else {
    // 浏览器不支持 Web Worker
}

2. 创建 Web Worker 文件

Web Worker 的代码需要存储在一个外部 JavaScript 文件中。例如，创建一个名为 demo_workers.js 的文件，其代码如下：

JavaScript复制

复制代码

var i = 0;

function timedCount() {
    i = i + 1;
    postMessage(i); // 向主线程发送消息
    setTimeout("timedCount()", 500); // 每 500 毫秒执行一次
}

timedCount();

3. 创建 Web Worker 对象

在 HTML 页面中，可以通过以下代码创建 Web Worker 对象并调用它：

JavaScript复制

复制代码

if (typeof(w) == "undefined") {
    w = new Worker("demo_workers.js"); // 创建 Web Worker 对象
}

w.onmessage = function(event) {
    document.getElementById("result").innerHTML = event.data; // 接收 Web Worker 发送的消息
};

4. 终止 Web Worker

当不再需要 Web Worker 时，可以通过 terminate() 方法终止它，释放浏览器和计算机资源：

JavaScript复制

复制代码

w.terminate();
w = undefined;

四、完整实例

以下是一个完整的实例，展示了如何在 HTML 页面中使用 Web Worker：

HTML复制

复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Web Worker 示例</title>
</head>
<body>
    <p>计数： <output id="result"></output></p>
    <button onclick="startWorker()">开始工作</button>
    <button onclick="stopWorker()">停止工作</button>
    <p><strong>注意：</strong> Internet Explorer 9 及更早版本浏览器不支持 Web Workers.</p>
    <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 = "抱歉，你的浏览器不支持 Web Workers...";
            }
        }

        function stopWorker() {
            w.terminate();
            w = undefined;
        }
    </script>
</body>
</html>

预览

五、Web Workers 的限制

由于 Web Workers 运行在独立的线程中，它们无法访问以下 JavaScript 对象：

window 对象
document 对象
parent 对象

这意味着 Web Workers 无法直接操作 DOM，但可以通过主线程与 DOM 交互。