记得很久之前看过谷歌官方有这么样的声明：如果一个页面的加载时间从 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 中运行











，从而消除主线程的性能成本  

   

   

。如果感兴趣               ，可以用一用

     

     

   。