专栏名称: 前端早读课

我们关注前端，产品体验设计，更关注前端同行的成长。每天清晨五点早读，四万+同行相伴成长。

【第3414期】提升ServiceWorker性能的新特性

前端早读课 · 公众号 · 前端 · 2024-11-11 08:00

正文

前言

万维网联盟（W3C）举办了 2024 年度全球技术大会 TPAC，进行了多项技术话题讨论，包括 ServiceWorker 性能提升的新特性。今日前端早读课文章由 @W3C 资讯分享，公号：W3C 中国授权（@W3C 资讯）。

正文从这开始～～

W3C 2024 年度全球技术大会（TPAC 2024）于今年 9 月在美国加州召开。大会期间的分组话题讨论环节汇集了全球 500 多位参会者，以自由分组讨论的形式围绕当下数十个技术热点话题及标准化需求与趋势展开广泛交流。本届 TPAC 与会者展开了破历史记录的 87 项分组话题讨论，重点涵盖人工智能（AI）、数字身份、数字钱包、Web 应用、Web 组件、生命周期特性、隐私权限、实时通信（RTC）、沉浸式 Web 等主题，还有很多其他围绕技术主题和改进 W3C 标准孵化流程的话题讨论。

其中有一个话题是《提升 ServiceWorker 性能的新特性》的专题讨论。

该话题讨论了 ServiceWorker 的性能问题以及如何减轻这些问题。Google Chrome 浏览器团队分享了在提升 ServiceWorker 性能方面的最新进展，包括新发布的静态路由 API（Static Routing API）特性，为静态路由 API 扩展资源计时 API（Resource Timing API）的新提案，以及一些未来的想法（比如 ServiceWorkerAutoPreload）。

一、回顾：为何使用 Service Worker？

Service Worker 能为网页应用程式提供离线功能、推送通知以及背景同步等功能。然而，Service Worker 的启动会影响网页载入速度。

二、去年至今的更新：静态路由 API

静态路由 API 允许开发者预先设定路由规则，将部分请求直接发送到网路或快取，绕过 Service Worker 的 fetch 事件处理器，从而提升网页载入效能。

使用范例：

 addEventListener('install', (event) => {
   event.addRoutes({
     condition: {
       urlPattern: {pathname: "/images/*"}
     },
     source: "network"
   });
 });

常见用例：

跳过特定请求，例如表单提交或导航请求。
将特定资源直接载入快取，例如图片或 CSS 档案。
在 Service Worker 未启动时，让网路请求与 fetch 事件处理器竞速，以更快地取得资源。

目前状态：

截至 2024 年 9 月，超过 1.5% 的 Chrome 网页载入使用了静态路由 API。

合作伙伴网站透过为导航请求启用 race-network-and-fetch-handler 路由规则，将 LCP 缩短了 80 毫秒。

开发者体验提升：

DevTools 中提供更多资讯可见性。
扩展 Resource Timing API，提供更多载入行为数据。
静态路由 API 的其他探索方向：
处理不支援路由功能的问题。
设定路由注册的深度限制。
显示已注册的路由规则。
跨浏览器相容性。

1. Service Worker 自动预载入 (SWAutoPreload)

现况：

约一半的 Service Worker fetch 事件处理结果是回退到网路请求。
许多网站只是单纯地将网路回应传递给浏览器。

构想：

在启动 Service Worker 之前，自动发送网路请求。
在 fetch 事件处理器中使用预载入的回应，或作为回退回应。

优点：

减少 Service Worker 启动带来的效能损耗。

注意事项：

可能会造成重複的网路请求。
可透过设定资格条件和提供退出机制来减轻影响。

目前状态：

正在进行原型设计和实验。
Chrome Beta 频道的实验结果显示，Service Worker 控制的网页载入指标（例如 LCP）有所提升。

2. Service Worker 合成回应 (SW Synthetic Response)

构想：

作为静态路由 API 的一部分。
透过在渲染器进程中提前开始网页载入，提供更快的导航速度。

原理：

Service Worker 在安装阶段预先储存一组 HTTP 回应标头。
浏览器根据预定义的标头推测性地开始导航提交，无需等待网路回应。

优点：

并行处理网路请求和导航提交，缩短网页载入时间。

注意事项：

需确定导航提交所需的必要标头。
标头合併方式尚待釐清。

目前状态：

Chrome 团队正在进行探索和原型设计。
仍处于早期阶段，许多问题尚待解决。

话题简介：https://github.com/w3c/tpac2024-breakouts/issues/17
演示文稿：https://www.w3.org/2024/Talks/TPAC/breakouts/sw-for-performance.pdf
讨论纪要：https://www.w3.org/2024/09/25-serviceworkers-minutes.html

关于本文
作者：@W3C 资讯
原文：https://mp.weixin.qq.com/s/5Xb1QLoPsgCnJQuDf8nOhg

这期前端早读课
对你有帮助，帮” 赞 “一下，
期待下一期，帮” 在看” 一下。