中国最大网站建设商,购买天猫店铺网站,属于网站建设过程规划和准备阶段的是,高密建网站记得很久之前看过谷歌官方有这么样的声明#xff1a;如果一个页面的加载时间从 1 秒增加到3 秒#xff0c;那么用户跳出的概率将增加 32%。
但是早在 2012 年#xff0c;亚马逊就计算出了#xff0c;页面加载速度一旦下降一秒钟#xff0c;每年就会损失 16 亿美元的销售额…记得很久之前看过谷歌官方有这么样的声明如果一个页面的加载时间从 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
你可以很容易地将它添加到任何站点并使用 typetext/partytown 标记任何你想要加载在 web worker 中的脚本。
需要注意的是Partytown 并不会自动将所有脚本转移到 web worker上而是采用了一种可选择的方法。最好的情况是开发人员可以准确地选择哪些脚本应该使用Partytown而所有其他脚本将保持不变。
Partytown可以使用任何 HTML 页面不需要特定的框架。然而为了让它更容易在各种框架或服务中使用可以为它们的生态系统制作插件/包装器。
只有当特定脚本具有 typetext/ Partytown 属性时才会启用 Partytown。
script typetext/partytown srcthird-parth.js/script上面这段脚本执行时会产生几个事件
通过使用 script/标签上的 typetext/partytown 属性脚本不能在主线程上运行。Service worker 创建一个 “onfetch” 处理程序来拦截特定的请求。Web worker 会处理在 worker 线程中执行的脚本。Web worker 创建 JavaScript 代理来复制和转发对主线程 api 的调用(比如DOM操作)。任何对JavaScript 代理的调用都使用同步XHR请求。Service worker 拦截请求然后能够与主线程进行异步通信。当 Service worker 从主线程接收到结果时它会响应 web worker 的请求。从在 web worker 上执行代码的角度来看一切都是同步的对 document 的每次调用都是阻塞的。
执行步骤
任何你添加 typetext/partytown 的脚本都会在默认情况下加载到 web worker 中但是可以完全访问全局变量。 typetext/partytown 属性做两件事:
通知浏览器不处理脚本。通过给脚本一个浏览器无法识别的 type 属性:“嵌入的内容被视为一个数据块浏览器不会处理它。”提供一个 query 选择器这样 Partytown 就可以找到所有要在web worker中运行的脚本。当 document 准备好并且 Partytown 已经初始化时Partytown 将查询所有脚本属性中含有 [typetext/ Partytown ] 属性的元素。你会注意到当一个脚本在web worker中执行后它会得到一个更新的 type 属性 typetext/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 中运行从而消除主线程的性能成本。如果感兴趣可以用一用。
