使用 Web Workers#

#背景

本文是 Web Worker 专题页，聚焦“哪些脚本会进入 Worker、如何进入、有哪些限制”。若你想先理解 Lessjs 的整体性能设计，请先读 Lessjs 工作原理。

在一个浏览器进程中，JavaScript 代码的执行是单线程的，同一时刻内只能有一段代码在执行，所以我们必须对资源进行分类，立即必需的资源应该没有任何阻塞的执行。在主题中，它不仅需要加载主题自身的内容（组件JS资源、埋点等立即必需的资源），它还需要加载用户安装的插件、第三方脚本（非立即必需的资源）。

当非立即必需的脚本过多时，立即必需和非立即必需的脚本仅仅只能在同一个单线程内排队执行，这时会有一些非立即必需的脚本执行在立即必需脚本之前，这样会导致展示页面所必需的资源加载时间变长，页面性能以及用户体验变差，总阻塞时间（详情参考：TBT）指标数值变大。

为了提供良好的用户体验、改进 TBT 指标，需要减少 JavaScript 执行时间和第三方代码的影响以及最小化主要线程工作。因此，我们引入了 Web Worker 来另外提供了一个线程开加载非立即必需的资源。

#工作原理

下面是加载脚本的工作流图示。

#步骤说明

1. 首先，用户已经安装 App 或者自主引入第三方脚本到页面内
2. 然后，在 seahorse 项目中会在页面中加入判断脚本是否需要放入 Web Worker 中执行的逻辑脚本
3. 在页面中，找到符合以下条件的脚本：

• 带有 scope="worker" 属性的脚本标签
• 带有 src 且链接与在 Web Vitals Defender 插件中已安装加速的脚本的链接一致

#脚本放入 Web Worker 中运行

#内部插件

符合以下三种形式之一的脚本会默认放入 Web Worker 中执行。

<!-- 第一种形式：带有 scope="worker" 属性，没有 type -->
<script scope="worker">
  // ...
</script>

<!-- 第二种形式：带有 scope="worker" 和 type="application/javascript" 属性 -->
<script scope="worker" type="application/javascript">
  // ...
</script>

<!-- 第三种形式：带有 scope="worker" 和 type="text/javascript" 属性 -->
<script scope="worker" type="text/javascript">
  // ....
</script>

#第三方脚本

当前第三方脚本需要在 Web Vitals Defender 插件中安装需要加速的脚本。

#FAQ

• 在 worker 环境中是通过 postMessage 来与主线程通信的，所以在该环境里 JS 脚本是不能与主窗口进行通信。
• 在 worker 环境中不支持一些较新的API，例如：insertAdjacentHTML。参考已支持的 DOM API文档。
• 每个 spz-script 相当于一个隔离环境，他们之间不能互相通信。

#AI 使用建议（LLM Ready）

• 章节密度：检测到 4 个二级标题。
• 示例密度：检测到 1 个代码块。
• 先读结论：优先提取本页“定义、约束、边界条件”。
• 再读证据：根据代码示例确认可执行写法，不直接依赖自然语言段落。
• 最后联动：涉及组件时同步查看对应组件页，避免文档与实现偏差。