Chrome 123 的新变化

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

我是 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-modepicture-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 中的新变化!