HTML5 Web Workers 详解：利用后台线程优化页面性能

在 Web 开发中，JavaScript 的单线程特性意味着执行耗时任务时会阻塞 UI 渲染，直接影响用户体验。HTML5 引入的 Web Workers 允许脚本在后台线程运行，有效解决了这一问题。

什么是 Web Workers？

Web Workers 是一种 Web API，它让开发者能创建独立的后台线程来执行 JavaScript 代码。这些线程与主线程隔离，不会卡住界面，非常适合处理复杂计算或数据处理。

核心特点

• 运行在独立线程，不阻塞主线程
• 无法直接操作 DOM（如 document、window）
• 通过 postMessage() 与主线程通信
• 仅能通过 self 访问部分全局对象（如 setTimeout、fetch）
• 受同源策略限制，通常需加载同源脚本

实战：如何创建与使用

1. 独立文件模式

最常规的做法是将 Worker 逻辑写在单独的 JS 文件中，例如 worker.js。

// worker.js
self.onmessage = function(event) {
    let result = event.data * 2;
    self.postMessage(result);
};

在主线程中实例化并调用：

// main.js
const worker = new Worker('worker.js');

worker.onmessage = function(event) {
    console.log("Worker 计算结果:", event.data);
};

worker.postMessage(10);

2. Blob 动态创建

如果不想维护额外的文件，可以直接用 Blob 将代码嵌入主线程：

const workerScript = `
    self.onmessage = function(event) {
        let result = event.data * 2;
        self.postMessage(result);
    };
`;

const blob = new Blob([workerScript], { :  });
 worker =  (.(blob));

worker. = () {
    .(, event.);
};

worker.();