目录 (Outline)
- 一、 第三方脚本的「暴政」：为什么它们会拖慢页面？
- 二、 Partytown：让第三方脚本在 Web Worker 中「聚会」
- 三、 核心原理：同步 Proxy 与原子通信 (Atomics)
- 四、 快速上手：一键接入 Partytown
- 五、 实战 1：迁移 Google Analytics 到 Web Worker
- 六、 实战 2：解决第三方脚本访问 DOM 的「不可能任务」
- 七、 总结：从 TBT (Total Blocking Time) 优化看性能优化的未来
一、 第三方脚本的「暴政」：为什么它们会拖慢页面？
1. 现状
在现代 Web 项目中，第三方脚本往往占据了 JS 总体积的 50% 以上。
- 主线程阻塞：它们在主线程解析、编译和运行。
- 资源竞争：与业务逻辑抢占 CPU 和网络带宽。
- 隐私风险：它们可以随意访问 DOM 和 Cookie。
2. 痛点
即便使用了 async 或 defer，它们依然会在某个时刻阻塞主线程，导致用户交互卡顿（INP 指标变差）。
二、 Partytown：让第三方脚本在 Web Worker 中「聚会」
Partytown 是一项实验性但极具实用价值的技术。
核心理念
- 主线程隔离：将第三方脚本放在 Web Worker 中运行。
- DOM 代理：通过 Proxy 技术，让 Worker 里的脚本以为自己还在主线程运行。
- 零代码修改：不需要修改第三方脚本的源码，只需修改
<script>标签。
三、 核心原理：同步 Proxy 与原子通信 (Atomics)
这是 Partytown 最精妙的部分。
挑战：Worker 无法同步访问 DOM
第三方脚本通常会调用 document.cookie 或 window.location。而在 Worker 中，这些都是异步的。
解决方案
- 拦截调用：Partytown 在 Worker 中创建了一个
Proxy对象。 - 同步等待：当脚本调用
document.cookie时，Worker 会发起一个同步请求（利用XMLHttpRequest的同步模式或Atomics.wait）。 - 主线程响应：主线程的服务端（Service Worker）拦截请求，获取 DOM 数据，并将其传回。
四、 快速上手：一键接入 Partytown
配置方式
<!-- 1. 引入 Partytown 库 -->
<script src="/~partytown/partytown.js"></script>
<!-- 2. 将第三方脚本类型改为 text/partytown -->
<script type="text/partytown">
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXX');
</script>
五、 实战 1：迁移 Google Analytics 到 Web Worker
在没有 Partytown 的情况下，GA 可能会在主线程产生 100ms+ 的任务。 在接入后：
- 主线程任务：降为 0。
- 交互性能：显著提升，TBT 指标大幅改善。
六、 实战 2：解决第三方脚本访问 DOM 的「不可能任务」
如果第三方脚本需要获取元素的位置（如热力图工具），Partytown 会通过其代理层：
- 捕获
element.getBoundingClientRect()。 - 发送同步指令给主线程。
- 返回真实的坐标数据给 Worker。
这一切对第三方脚本都是透明的。
七、 总结：从 TBT (Total Blocking Time) 优化看性能优化的未来
Partytown 代表了 Web 性能优化的一个新思路：主线程只留给业务逻辑和动画，其余一切耗时操作都应该被赶出主线程。虽然它有一定的运行时开销，但相比于主线程卡顿带来的体验损失，这完全是值得的。
