partytown：Web Worker 中运行第三方脚本

在 Web Worker 中运行第三方脚本

Partytown 是一个懒加载的库，用于帮助将资源密集型脚本转移到 web worker 中，

并脱离主线程。其目的是通过将主线程专用于你自己的代码，并将第三方脚本卸载给 web worker 来帮助加快网站速度。 

注意：Partytown 仍然处于 beta 阶段，不能保证在每个场景下都顺利实施。

即使网站遵循当今所有最佳实践，快速且高度优化过，在添加第三方脚本时，原本的性能优势也可能很容易被消除掉。这里所说的第三方脚本是指嵌入在你网站中但不直接受你控制的代码。一些例子包括：站点分析、指标分析、广告、A/B 测试、跟踪器等。

Partytown 由 QwikDev 维护，目前仍处于 Beta 测试阶段。

目标

Partytown 意在解决这类问题，以便各种规模的应用都可以继续使用第三方脚本，而不会影响性能。Partytown 的一些目标包括：

• 释放主线程资源，使其仅用于主 web 应用的执行。
• 沙盒第三方脚本，允许或拒绝他们访问主线程 API。
• 在 web worker 线程中隔离长时间运行的任务。
• 通过将 DOM setter/getter 批处理到组更新中，减少来自第三方脚本的布局抖动。
• 限制第三方脚本访问主线程。
• 允许第三方脚本按照其编码方式运行，无需任何更改。
• 从 web worker 中同步读取和写入主线程 DOM 操作，允许从 web worker 运行的脚本按预期执行。

Web Worker

Partytown 的理念是，主线程应该专用于你的代码，任何不需要在关键路径中的脚本都应该移到 web worker。毫无疑问，主线程性能比 web worker 线程性能更重要。请查看测试页面以获取一些实时演示。

没有 Partytown：你的代码和第三方代码争夺主线程资源

第三方脚本的负面影响

以下是添加第三方脚本后的潜在问题摘要，涉及加载第三方 JavaScript：

• 向多个服务器发出太多网络请求。网站必须发出的请求越多，加载所需的时间就越长。
• 发送过多的 JavaScript，导致主线程繁忙。过多的 JavaScript 会阻塞 DOM 构造，从而延迟页面的渲染速度。
• CPU 密集型脚本解析和执行可能会延迟用户交互并导致电池耗尽。
• 不小心加载的第三方脚本可能是单点故障（SPOF）。
• HTTP 缓存不足，迫使经常从网络获取资源。
• 使用传统 API(例如 document.write())，已知这对用户体验有害。
• 过多的 DOM 元素或昂贵的 CSS 选择器。
• 引入多个第三方嵌入，这可能会导致多个框架和库被多次拉取，从而加剧性能问题。
• 第三方脚本也经常使用可以阻塞 window.onload 的嵌入技术，即使嵌入使用异步或延迟。

用例

虽然整个 Web 应用都“可以”在 Partytown 中运行，但它实际上最适合用于不需要在关键渲染路径中的代码。大多数第三方脚本都属于这一类，因为第一次绘制时不需要它们。此外，大多数第三方脚本的异步特性与 Partytown 配合得很好，因为它们可以延迟接收用户事件并将数据发布到各自的服务。

以下只是一些第三方脚本的示例，这些脚本可能是在 web worker 中运行的良好选择。其目标是继续验证常用的服务，以确保 Partytown 具有正确的 API，但 Partytown 本身不会硬编码到任何特定的服务。

• Google Tag Manager (GTM)
• Google Analytics (GA)
• Facebook Pixel
• Mixpanel
• Hubspot
• Segment
• Amplitude