这是一种轻量级开源解决方案,可通过将第三方脚本卸载到在后台线程中运行的 Web Worker 来减少由于第三方 JavaScript 造成的执行延迟。
出色的用户体验始于可立即加载的页面。普通用户不会花太多时间等待网页加载或与页面交互:根据 Google 的说法,如果页面的加载时间从 1 秒增加到 3 秒,用户跳出的概率会增加32 %。然而,在网站中保持高性能并不总是那么容易。在某种程度上,慢速网站是一种歧视:世界上大多数人无法访问高速互联网或快速 CPU。即使您的网站在设计时考虑了可用性,这些因素也会阻碍用户充分利用网站的功能。
这就是为什么在构建网站时性能至关重要。性能需要从代码级别开始构建,以用户为中心的指标,如交互时间 (TTI)、总阻塞时间 (TBT) 和首次输入延迟 (FID) 可帮助您衡量网站的速度。但现代网页体积庞大且不断增长(人们亲切地称为“网站膨胀”):平均网页大小超过 2 兆字节,请求超过 200 个。大型、笨重的网站嵌入了多个第三方脚本,通常是令人沮丧的用户体验的背后原因。当您需要网站上的这些第三方脚本来运行您的业务时,就像大多数网站一样,您面临着巨大的挑战:
您如何在不影响重要功能的情况下提高关键绩效指标并让用户满意?
JavaScript 税 #
众所周知,JavaScript 是导致网站膨 台湾电话号码清单 胀的罪魁祸首之一。提供丰富的交互式网站体验需要消耗用户资源的附加资产,从 CPU 和 GPU 到内存和网络。除了大图像和视频,像素跟踪器、A/B 测试、广告、小部件、CDN 等第三方脚本通常是性能难题的最大部分。第三方脚本是嵌入在您的网站中且不受开发人员直接控制的代码,它们与网站自己的代码竞争浏览器的主线程,这会延迟内容呈现并使网站感觉迟钝。
同样重要的是要记住,您的最终用户的移动设备远不如您的网站所基于的设备复杂:您网站上的所有 JavaScript 是平均网页加载时间超过 14 秒并在移动设备上进行交互的原因。这会对Lighthouse 分数、Core Web Vitals和搜索排名产生负面影响,并降低用户参与度。
根据Google Web Fundamentals,第三方脚本可能导致几个问题,包括:
当你的网页上有很多第三方脚本时,它们会阻止你自己的 JavaScript。这对于需要这些第三方脚本来运行其业务并且时间就是金钱的电子商务网站和在线市场尤为重要。
将第三方脚本卸载到在后台线程中运行的网络工作者是一种潜在的解决方案,它允许用户在提高性能的同时保留他们的脚本。Web workers 同步执行,但只能与主线程异步通信。Web worker 也不能直接访问 DOM——只有主线程可以。因此,关键的挑战是为在 web worker 中运行的 JavaScript 代码提供对 DOM 的某种访问并使该访问同步(即使与主线程的通信必须保持异步)。
跳转后更多!继续往下看↓参加关于前端和 UX的Smashing Workshop,其中包括实用知识、现场会议、视频录制和友好的问答。关于设计系统、用户体验、网络性能和 CSS/JS。与 Brad Frost、Christine Vallaure 和许多其他人一起。