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 是一种用于衡量网站响应速度的核心 Web 指标。

新 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 Static Routing API。

使用 Service Worker，您可以使网站离线工作，并创建可提升性能的缓存策略。

不过，如果在一段时间内首次加载页面时，控制的 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 规则，这些规则仅在 Web 应用在画中画模式下显示时才适用。例如：

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

深入阅读

这里仅介绍一些重要的亮点。如需了解 Chrome 123 中的其他更改，请点击以下链接。

订阅

如需随时了解最新动态，请订阅 Chrome Developers YouTube 频道，每当我们发布新视频时，您都会收到电子邮件通知。

嗨，Adriana Jara！Chrome 124 发布之后，我会在这里告诉大家 Chrome 的新变化！