前言

现在使用 AI 编程助手开发网页工具非常方便。

例如，我们只需要提出需求：

“开发一个在线文本去重工具，支持粘贴多行文本，一键删除重复内容。”

AI 很快就能生成 HTML、CSS 和 JavaScript。

测试几十行数据时，一切正常。

但是，当用户一次粘贴几万甚至几十万行文本时，可能突然出现一个问题：

按钮点击后页面没有反应，输入框无法操作，甚至整个浏览器标签页都变得卡顿。

这并不一定是算法计算错误，而可能是 JavaScript 长时间占用了浏览器主线程。

那么，能不能让耗时计算在后台执行，同时保持网页界面可以正常响应？

答案是可以的。

浏览器原生提供了 Web Worker，能够让开发者在独立线程中执行适合后台处理的 JavaScript 任务。

本文通过一个文本去重工具，介绍 Web Worker 的基本原理及实际使用方法。

一、为什么 JavaScript 计算会让网页卡住？

浏览器页面中的 JavaScript 通常运行在主线程上。

主线程不仅负责执行 JavaScript，还需要协调用户交互、样式计算和页面渲染等工作。

假设我们编写了以下代码：

function removeDuplicates(text) {
  const lines = text.split(/\r?\n/);

  const unique = [...new Set(lines)];

  return unique.join("\n");
}

对于少量文本，这段代码通常可以很快执行完成。

但如果输入数据非常大，字符串拆分、创建集合和重新拼接文本都可能消耗较多 CPU 与内存。

在同步计算尚未结束时，主线程可能无法及时处理新的用户交互和页面更新。

结果就是：

• 点击按钮后界面迟迟没有反应。

• 页面上的加载提示无法及时显示。

• 用户输入出现延迟。

• 浏览器可能提示页面无响应。

所以，优化前端性能时，不仅需要考虑算法是否正确，还需要考虑计算发生在哪个线程上。

二、Web Worker 是什么？

Web Worker 是浏览器提供的一种后台脚本运行机制。

它可以让部分 JavaScript 计算离开页面主线程执行。

基本结构如下：

浏览器主线程
    |
    | postMessage()
    v
Web Worker
    |
    | 执行文本处理
    |
    | postMessage()
    v
主线程接收结果
    |
    v
更新页面

主线程负责页面交互和结果展示。

Worker 负责耗时的数据处理。

两者通过消息传递进行通信。

这里有一个重要限制：

Web Worker 不能直接操作页面 DOM。

例如，Worker 内不能直接通过 document.getElementById() 修改页面内容。

如果需要更新页面，必须将结果发送回主线程，再由主线程负责渲染。

三、实战：开发一个不卡界面的文本去重工具

我们使用原生 HTML、JavaScript 和 Web Worker 实现。

项目结构如下：

text-worker-demo/
├── index.html
└── worker.js

不需要 Vue、React，也不需要额外的 JavaScript 框架。

第一步：创建网页

编写 index.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1">
  <title>Web Worker 文本去重</title>
</head>
<body>
  <h1>文本去重助手</h1>

  <label for="input">原始文本</label>
  <textarea id="input" rows="8"
    placeholder="每行输入一项"></textarea>

  <p>
    <button id="runBtn" type="button">
      开始去重
    </button>
    <button id="cancelBtn" type="button">
      取消处理
    </button>
  </p>

  <p id="status" role="status"></p>

  <label for="output">处理结果</label>
  <textarea id="output" rows="8" readonly></textarea>

  <script>
    const input = document.getElementById("input");
    const output = document.getElementById("output");
    const status = document.getElementById("status");
    const runBtn = document.getElementById("runBtn");

    let worker = null;

    function stopWorker() {
      if (worker) {
        worker.terminate();
        worker = null;
      }

      runBtn.disabled = false;
    }

    runBtn.addEventListener("click", () => {
      stopWorker();

      output.value = "";
      status.textContent = "正在后台处理...";
      runBtn.disabled = true;

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

      worker.onmessage = (event) => {
        const result = event.data;

        output.value = result.text;

        status.textContent =
          `处理完成：原始 ${result.total} 行，` +
          `保留 ${result.unique} 行`;

        stopWorker();
      };

      worker.onerror = () => {
        status.textContent = "处理失败，请重试";
        stopWorker();
      };

      worker.postMessage(input.value);
    });

    document.getElementById("cancelBtn")
      .addEventListener("click", () => {
        if (!worker) return;

        stopWorker();
        status.textContent = "已取消处理";
      });
  </script>
</body>
</html>

这里最重要的一行是：

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

它创建了一个独立的 Worker。

随后调用：

worker.postMessage(input.value);

将用户输入发送给后台线程进行处理。

第二步：编写后台处理逻辑

创建 worker.js：

self.onmessage = (event) => {
  const text = event.data;

  const lines = text
    .split(/\r?\n/)
    .map(line => line.trim())
    .filter(Boolean);

  const uniqueLines = [...new Set(lines)];

  self.postMessage({
    text: uniqueLines.join("\n"),
    total: lines.length,
    unique: uniqueLines.length
  });
};

这段代码负责：

1. 接收主线程发送的文本。

2. 按行拆分。

3. 去除首尾空格及空行。

4. 使用 Set 删除重复项。

5. 将结果发送回主线程。

这里使用的去重规则是精确匹配，默认区分大小写，并保留首次出现的顺序。

整个计算过程不会直接修改页面。

当处理完成时，主线程接收消息，再将结果显示在文本框中。

四、如何运行这个示例？

由于 Worker 脚本加载受到浏览器安全策略限制，建议通过本地 HTTP 服务运行，而不是直接双击 HTML 文件。

例如，在项目目录中执行：

python3 -m http.server 3000

然后打开：

http://127.0.0.1:3000

输入以下内容：

苹果
香蕉
苹果
橙子
香蕉

点击“开始去重”。

预期输出：

苹果
香蕉
橙子

页面还会显示原始有效行数与去重后的行数。

使用 Worker 的意义不在于让这个小例子变得更快，而是为了在处理大量文本时，减少计算任务长时间占用主线程的问题。

五、Web Worker 一定比普通 JavaScript 快吗？

不一定。

这是使用 Web Worker 时最容易产生的误区。

Web Worker 的核心优势是将计算工作移出主线程，提高界面响应能力，而不是保证每次计算都更快。

因为创建 Worker、发送数据和接收结果同样需要开销。

例如，处理十几行文本时，普通 JavaScript 可能很快就完成计算。

如果使用 Worker，额外的线程创建和消息传递开销反而可能让总耗时增加。

此外，在前面的示例中，完整文本仍然需要从主线程发送给 Worker，再把结果发送回来。

对于特别大的文本，消息复制以及最终将大量结果写入文本框的过程，仍然可能产生明显开销。

因此，Web Worker 并不能自动解决所有前端性能问题。

六、什么时候适合使用 Web Worker？

可以根据任务类型进行判断。

对于大量纯计算任务，Worker 往往有实际价值。

但是对于简单的 DOM 操作，Worker 既无法直接操作页面，也不一定能够带来收益。

七、如何进一步优化大数据处理？

如果一个网页工具需要处理几十万行甚至更多文本，仅仅引入 Worker 可能还不够。

还可以考虑以下方向。

第一：减少不必要的中间数组。

例如，连续使用 split()、map()、filter() 可能创建多份中间数据。

对于超大输入，可以根据实际情况优化数据遍历方式。

第二：减少主线程渲染量。

如果输出内容非常大，直接写入一个巨大文本框也可能造成卡顿。

可以考虑分页展示、按需显示或生成下载文件。

第三：增加取消功能。

如果任务执行时间较长，用户应该能够主动停止。

Web Worker 提供了 terminate() 方法，可以终止对应的 Worker。

第四：控制内存使用。

Worker 虽然运行在独立线程，但它依然会消耗设备内存。

如果同时创建大量 Worker，反而可能增加系统负担。

第五：进行真实性能测试。

不要仅根据代码结构判断性能好坏。

应该比较不同输入规模下的总耗时、主线程响应情况以及内存占用。

八、AI 自动开发网页时，应该如何提出性能要求？

如果我们使用 AI Agent 开发类似工具，可以在提示词中增加明确的性能验收条件。

例如：

对于可能处理大量文本或文件的功能，请避免在主线程执行长时间同步计算。必要时使用 Web Worker。必须提供处理状态、取消机制和合理的数据量限制，并通过真实浏览器测试确认页面在处理期间仍然可以响应用户操作。

这种要求比简单地告诉 AI“优化一下性能”更加明确。

同时，还应该提醒 AI：

不要为了一个很简单的功能引入不必要的复杂架构。

先确认性能瓶颈，再选择是否使用 Worker，通常更加合理。

九、总结

AI 编程助手可以很快生成一个能够运行的网页，但功能正确并不代表性能已经达到实际使用要求。

当用户输入规模增大时，大量同步 JavaScript 计算可能占用浏览器主线程，造成页面卡顿。

Web Worker 提供了一种相对简单的解决方案：将适合后台执行的计算任务放到独立线程，主线程继续负责交互和渲染。

通过本文的实践，可以总结出几个关键原则：

1. 大量同步计算可能阻塞页面主线程。

2. Web Worker 可以让耗时计算与页面交互分离。

3. Worker 与主线程通过消息通信，不能直接操作 DOM。

4. Worker 不保证计算总耗时一定更短。

5. 大数据处理还需要关注内存、消息传递和页面渲染成本。

6. 性能优化应当建立在真实测试结果上。

我认为，AI 自动开发不应该只关注“功能有没有实现”，还应该重视不同数据规模下的实际使用体验。

一个真正好用的网页工具，不只是能处理正确的数据，还应该在处理复杂任务时，让用户始终能够控制页面。