Chrome 123 的新变化

Adriana Jara

以下是您需要知晓的相关信息：

我是 Adriana Jara。我们来深入了解一下 Chrome 123 中面向开发者的新功能。

light-dark() CSS 函数。

借助 CSS 中的 light-dark() 函数，您可以创建可根据用户的浅色或深色模式偏好设置而调整的颜色。使用 light-dark() 函数可在单个 CSS 属性中指定两个不同的颜色值。

浏览器会根据元素的计算 color-scheme 值自动选择合适的颜色。例如，使用以下 CSS：

html {
  color-scheme: light dark;
}
.target {
    background-color: light-dark(lime, green);
}
  • 如果用户选择了浅色主题，该元素将采用淡黄色背景。
  • 如果用户选择了深色主题，该元素将采用绿色背景。

Long Animation Frames API。

Long Animation Frames API 可帮助您查找主线程拥塞的原因，这通常是 INP（Interaction to Next Paint）不佳的原因。INP 是一项 Core Web Vitals 指标，用于衡量网站的响应速度。

新 API 是 Long Tasks API 的增强版，可让您更好地了解界面更新缓慢的问题。借助 Long Animation Frames API，您可以衡量阻塞工作。它会测量任务以及后续的渲染更新，并添加长时间运行的脚本、渲染时间以及在强制布局和样式（称为布局抖动）中花费的时间等信息。

通过收集和分析这些信息，您可以发现和排查性能瓶颈。您可以使用以下代码捕获长帧。

const observer = new PerformanceObserver((list) => {
  console.log(list.getEntries());
});

observer.observe({ type: 'long-animation-frame', buffered: true });

Service worker 静态转送 API。

借助服务工件，您可以让网站在离线状态下正常运行，并创建可提升性能的缓存策略。

不过，如果页面在很长一段时间后首次加载，并且控制该页面的 Service Worker 在该时刻未运行，则可能会导致性能开销。由于所有提取操作都需要通过 Service Worker 进行，因此浏览器必须等待 Service Worker 启动并运行，才能知道要加载哪些内容。

借助 Service Worker 静态路由 API，您可以在安装时声明始终从网络提供的路径。稍后加载受控网址时，浏览器可以在 Service Worker 完成启动之前开始从这些路径提取资源。这样，系统就会从您知道不需要服务工件的网址中移除服务工件。

addEventListener('install', (event) => {
  event.addRoutes({
    condition: {
          urlPattern: "/articles/*",
          runningStatus: "running"
    },
    source: "fetch-event"
  });
});

等等！

当然，还有许多其他功能。

  • 您可以根据用户通过 NavigationActivation 界面导航到的来源提供自定义页面。

  • Chrome 现在支持 Zstandard (zstd)。此 Content-Encoding 有助于加快网页加载速度、减少使用的带宽，并减少在服务器上进行压缩所需的时间、CPU 和电量，从而降低服务器成本。

  • 适用于 bfcache 的 notRestoredReasons API 将从 Chrome 123 开始推出。这样，网站所有者就可以在该字段中收集无法使用 bfcache 的原因。网站所有者可以使用此方法来改进 bfcache 的使用，从而加快历史记录导航速度。

  • 借助 display-mode 的 picture-in-picture 值，您可以编写仅在网页应用以画中画模式显示时应用的特定 CSS 规则。例如：

@media all and (display-mode: picture-in-picture) {
  body {
    margin: 0;
  }
  h1 {
    font-size: 0.8em;
  }
}

深入阅读

本文仅介绍了一些主要亮点。如需了解 Chrome 123 中的其他变更，请访问以下链接。

订阅

如需及时了解最新动态，请订阅 Chrome 开发者 YouTube 频道，这样每当我们发布新视频时，您就会收到电子邮件通知。

我是 Adriana Jara，Chrome 124 发布后，我会立即为您介绍 Chrome 中的新变化！