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（与下一次绘制的互动）（一种用于衡量网站响应能力的核心 Web 指标）往往是导致 INP 错误的原因。

新 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 Static Routing API，您可以在安装时声明始终从网络提供的路径。稍后加载受控网址时，浏览器可以在 Service Worker 完成启动之前从这些路径中提取资源。这会将 Service Worker 从您知道不需要 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 中的新变化！