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 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 值，您可以编写仅在 Web 应用以画中画模式显示时适用的特定 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 的新变化！