记得很久之前看过谷歌官方有这么样的声明：如果一个页面的加载时间从 1 秒增加到3 秒，那么用户跳出的概率将增加 32%。

但是早在 2012 年，亚马逊就计算出了，页面加载速度一旦下降一秒钟，每年就会损失 16 亿美元的销售额。于是，这篇文章就想聊聊有没有方法来解决这种问题。

什么？没赚到钱，是我的锅？

那么，是什么影响了页面的加载速度，导致用户跳出？

其中有一个大的因素就是我们的应用用到了很多的第三方库。

那么，有没有一种一举两得的方法，我即可以保留使用的第三方脚本，又可以保证页面的加载速度？

其实，我们知道 JavaScript 本质上是一种单线程语言，只运行一个事件循环。这意味着一次只执行一条语句。由于这一限制，当试图运行自己的代码以及任何第三方脚本时，它们必须在同一线程中执行。这意味着由于处理能力的限制，它们会减慢主线程和彼此的速度，也会减慢彼此的速度。

根据谷歌的说法，添加第三方脚本后，有一些潜在的问题会产生，我列举了以下几点：

会向多个服务器发出过多的网络请求。一个网站的请求越多，它的加载时间就越长。
发送太多的 JavaScript 会让主线程很忙。过多的 JavaScript 会阻碍 DOM 的构建，延迟页面呈现的速度。
cpu 密集型脚本解析和执行可能会延迟用户交互，并会导致电池电量消耗的更快。
不小心加载的第三方脚本可能会产生单点故障(SPOF)。
HTTP 缓存不足，迫使经常直接从网络获取资源。
脚本中使用遗留 api(例如 document.write() )，对用户体验是有害的。
脚本中包含过多的 DOM 元素或昂贵的 CSS 选择器。
包括多个第三方嵌入，可能导致多个框架和库被多次拉入，这加剧了性能问题。
第三方脚本也经常使用嵌入技术导致阻塞 window.onload 的执行，例如使用 async或 defer。

这些问题都可以通过谷歌浏览器的 Analytics 工具检测出来。

现在，有一个改善第三方脚本的工具，能帮助我们的应用减少大量的第三方脚本，也是本篇文章要说的主角—— Partytown。

Partytown

Partytown 是一个 JavaScript 库，可以让你的第三方脚本交给 web worker 来处理，以消除他们可能对你的网站产生的性能影响。为了抵消上述第三方脚本的负面影响，Partytown 打算做以下事情:

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

Partywork 运行方式

简单地说，Partytown 添加了一个 worker 线程来允许在主线程和 worker 线程中执行。

要理解 Partytown，首先要了解现代网络浏览器使用的一些技术:

Web Workers API: 这使得在与 Web 应用程序的主执行线程分离的后台线程中运行脚本操作成为可能。Partytown 的理念是主线程应该专门用于你的第一方代码，任何不需要在关键路径上的脚本都应该移动到 web worker上。因为主线程的性能比 web worker 线程的性能更重要。
XMLHttpRequest (XHR): 对象用于与服务器交互。可以从URL检索数据，而不必进行整个页面刷新。这使得网页只更新页面的一部分，而不会中断用户正在做的事情。
Service Worker API: Service Worker 本质上充当了位于 web 应用程序、浏览器和网络之间的代理服务器。它们主要用于创建有效的脱机体验，拦截网络请求，并根据网络是否可用采取适当的操作，以及更新驻留在服务器上的资源。它们还允许访问推送通知和后台同步 api。
Javascript 代理:代理对象允许你创建一个可以用来代替原始对象的对象，但它可能会重新定义基本的对象操作，如 get、set 和 define 属性。代理对象通常用于记录属性访问、验证、格式化或清除输入等。

传统上，主线程和 worker 线程之间的通信必须是异步的：因为为了让两个线程通信，它们不能使用阻塞调用。Partytown 则不同。它允许从 web worker 执行的代码同步访问 DOM。这样做的好处是第三方脚本可以继续按照它们的编码方式工作。

如下图所示，运行在代理全局变量的 web worker 中的代码使用同步 XHR 使异步操作同步化。这将被 service worker 拦截，主线程值将通过 postMessage 检索并发送回来。

你的应用太慢了，给我司带来了巨额损失，该怎么办

如何集成 Partytown

你可以很容易地将它添加到任何站点，并使用 type="text/partytown" 标记任何你想要加载在 web worker 中的脚本。

需要注意的是，Partytown 并不会自动将所有脚本转移到 web worker上，而是采用了一种可选择的方法。最好的情况是，开发人员可以准确地选择哪些脚本应该使用Partytown，而所有其他脚本将保持不变。

Partytown可以使用任何 HTML 页面，不需要特定的框架。然而，为了让它更容易在各种框架或服务中使用，可以为它们的生态系统制作插件/包装器。

只有当特定脚本具有 type="text/ Partytown " 属性时，才会启用 Partytown。

<script type="text/partytown" src="third-parth.js"></script>

上面这段脚本执行时会产生几个事件：

通过使用 <script/>标签上的 type="text/partytown" 属性，脚本不能在主线程上运行。
Service worker 创建一个 “onfetch” 处理程序来拦截特定的请求。
Web worker 会处理在 worker 线程中执行的脚本。
Web worker 创建 JavaScript 代理来复制和转发对主线程 api 的调用(比如DOM操作)。
任何对JavaScript 代理的调用都使用同步XHR请求。
Service worker 拦截请求，然后能够与主线程进行异步通信。
当 Service worker 从主线程接收到结果时，它会响应 web worker 的请求。
从在 web worker 上执行代码的角度来看，一切都是同步的，对 document 的每次调用都是阻塞的。

执行步骤

任何你添加 type="text/partytown" 的脚本都会在默认情况下加载到 web worker 中，但是可以完全访问全局变量。' type="text/partytown" ' 属性做两件事:

通知浏览器不处理脚本。通过给脚本一个浏览器无法识别的 type 属性:“嵌入的内容被视为一个数据块，浏览器不会处理它。”
提供一个 query 选择器，这样 Partytown 就可以找到所有要在web worker中运行的脚本。当 document 准备好并且 Partytown 已经初始化时，Partytown 将查询所有脚本属性中含有 [type="text/ Partytown "] 属性的元素。你会注意到，当一个脚本在web worker中执行后，它会得到一个更新的 type 属性： type="text/partytown-x"。

// run in the worker
fetch('/track', {
	body: JSON.stringify({
		url: window.location.href // run on the main thread
	})
})

我们使用 JavaScript Proxy 向 worker 线程提供主线程全局变量，拦截它们并转发给主线程:

self.window = new Proxy({
  get(key) {
  	return getFromMainThread(key)
  }
})

这里是最好的部分是: 使用一个同步 XHR 请求来阻塞 worker 线程，并从主线程检索所需的值：

function getFromMainThread(prop) {
	request.open('POST', '/proxytown', false)
	request.send(null)
	request.send(JSON.stringify({prop}))
	return JSON.parse(request.reponseText)
}

现在我们可以使用 service worker 来拦截 /proxytown 请求，向主线程异步postMessage 以获取所需的值并返回它:

self.addEventListener('fetch', event=>{
	if(request.url === '/proxytown') {
		event.respondWith(new Promise(async resolve=>{
			resolve(await getFromMainThread(event.request.json()))
		}))
	}
})

好了！你现在可以无缝地将一系列第三方脚本放到 web worker 中运行，从而消除主线程的性能成本。如果感兴趣，可以用一用。

秒客网