以下是您需要知晓的相关信息:
- 使用新的
light-dark()
函数调整配色方案。 - 使用 Long Animation Frames API 诊断您网站的响应能力。
- 使用 Service Worker 静态转送 API 可避免 Service Worker 启动性能下降。
- 还有许多其他功能。
我是 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 开发者工具的新变化 (123)
- Chrome 123 弃用和移除的功能
- ChromeStatus.com 上有关 Chrome 123 的最新动态
- Chromium 源代码库更改列表
- Chrome 发布日历
订阅
如需及时了解最新动态,请订阅 Chrome 开发者 YouTube 频道,这样每当我们发布新视频时,您就会收到电子邮件通知。
我是 Adriana Jara,Chrome 124 发布后,我会立即为您介绍 Chrome 中的新变化!