AI 摘要：本文详细介绍了 Chrome 在 Apple Silicon Macs 上推出的 Skia 新光栅化后端 Graphite。Graphite 是一个面向未来的图形渲染技术，显著提升了 Chrome 在 Motionmark 1.3 测试中的表现，同时为未来的图形改进奠定了基础。通过支持现代图形 API（如 Metal、Vulkan 和 D3D12）、多线程设计以及深度测试等创新技术，Graphite 不仅提高了渲染性能，还优化了用户体验，减少了滚动卡顿和页面加载等待时间。

1. Skia 在 Chrome 中的历史：
• 介绍了 Skia 作为 Chrome 图形渲染核心的历史，从最初的性能问题到引入 GPU 加速后端 Ganesh。
• Ganesh 虽性能优异，但因其以 OpenGL 为中心的设计，难以充分利用现代图形 API 的优势，因此团队开发了 Graphite。

2. Graphite 的成果：
• 在 Macbook Pro M3 上，Motionmark 1.3 得分提升近 15%。
• 优化了真实世界指标，如交互到下一帧时间（INP）、最大内容绘制时间（LCP）、图形流畅度（掉帧百分比）以及 GPU 内存使用等。

3. Graphite 与 Ganesh 的区别：
• 现代图形 API：Graphite 利用 Chrome 的 WebGPU 实现 Dawn，支持 Metal、Vulkan 等现代 API，减少维护负担并提升多线程和 GPU 计算能力。
• 2D 深度测试：通过深度测试减少过度绘制（overdraw），优化不透明和半透明对象的渲染顺序，提升性能并降低移动设备功耗。
• 多线程设计：Graphite 的 API 支持多线程，利用独立记录器（Recorders）在多线程上生成记录（Recordings），减轻主线程负担，减少卡顿和延迟。
• 性能悬崖与管线编译：Graphite 减少渲染管线数量，避免因管线编译导致的卡顿，确保复杂内容与简单内容渲染效率一致。

4. 未来计划：
• 多线程光栅化：计划将光栅化任务分配到多线程，进一步提升性能。
• 减少简单内容的 GPU 内存：通过重新发布记录（Recordings）优化滚动，减少不必要的 GPU 内存分配。
• GPU 计算路径光栅化：探索 GPU 计算路径光栅化技术，提升视觉质量和性能，替代传统的 MSAA 和 CPU 光栅化。

AI 摘要：本文介绍了 Viewport Segments API 的功能与应用，该 API 从 Chrome 138 版本开始可用，支持开发者为可折叠设备优化界面。通过 JavaScript 或 CSS 访问视口逻辑分区的尺寸和位置，开发者可以为可折叠设备创建双窗格体验或避免内容跨折叠区域布局。文章还提及 API 的更新细节及演示案例，展示了如何利用该 API 提升用户体验。

1. API 简介与背景
• 介绍了 Viewport Segments API 的基本概念，解释了视口分区如何由硬件特性（如折叠或铰链）划分而成。
• 强调 API 的目标：帮助开发者将视口的不同区域视为逻辑上独立的区域，从而优化可折叠设备的用户界面。
2. 功能与应用场景
• 详细说明 API 的功能，支持通过 JavaScript 和 CSS 获取视口分区的尺寸和位置。
• 应用场景包括创建双窗格用户体验，以及避免内容布局跨折叠区域，提升用户体验。
3. API 更新与改进
• 提到自去年 Origin Trial 以来的两项主要变更：
a. JavaScript 属性 segments 现位于 window.viewport 对象中，而非之前的 window.visualViewport。
b. 当设备未折叠或不可折叠时，segments 属性行为与 CSS 行为对齐，返回包含单个分区（代表整个视口）的数组。
4. 演示与实践
• 提供了可折叠设备上 API 的演示案例，展示网页如何沿铰链分割成两个逻辑分区。
• 鼓励开发者通过演示了解 API 的实际效果。
5. 发布时间与版本支持
• API 从 Chrome 138 版本开始正式可用，发布时间为 2025 年 6 月 9 日。

Chrome for Developers

Support foldable devices with the Viewport Segments API  |  Blog  |  Chrome for Developers

The Viewport Segments API has shipped with minor changes to the origin trial covered in this blog post.

Moe Copy AI 总结：Chrome 2025 年第一季度更新聚焦于 CSS 布局控制（如 text-box）、开发者工具增强（文件系统 API 扩展、DOM 状态保留）、交互体验优化（对话框轻量关闭），以及 Baseline 标准的推进（新功能标记与跨浏览器兼容性）。Interop 2025 将进一步推动关键 Web 技术的标准化。

1. CSS text-box
• 功能：新增 text-box-trim 和 text-box-edge 属性，允许开发者基于字体度量精确控制文本垂直间距（如裁剪大写字母顶部多余空间）。
• 应用场景：优化标题或文本容器的布局，避免因字体差异导致的间距不一致问题。

2. DOM 元素状态保留移动
• 新方法：Node.prototype.moveBefore 可在不重置元素状态（如 iframe 加载、焦点、动画等）的情况下移动 DOM 元素。
• 优势：相比传统的删除再插入操作，避免了不必要的状态重置。

3. 文件系统访问 API 支持 Android
• 扩展支持：原本仅限桌面端的 File System Access API 现已在 Android 和 WebView 中可用。
• 核心方法：
• showOpenFilePicker()：打开文件选择器并返回文件句柄。
• showSaveFilePicker()：保存文件到本地。

4. <dialog> 元素支持轻量关闭（Light Dismiss）
• 行为：通过 closedby="any" 属性，允许用户点击对话框外部或按 Esc 键关闭对话框（类似 Popover API 的 auto 行为）。

5. Baseline 更新

• 新功能（Newly Available）：
• CSS：scrollbar-gutter（预留滚动条空间）、scrollbar-width（调整滚动条宽度）、ruby-align（注音文本对齐）。
• JavaScript：Promise.try（简化同步请求的错误处理）。
• WebAssembly：垃圾回收和尾调用优化支持。
• 广泛可用（Widely Available）：
• Array.findLast() 和 findLastIndex()（从数组末尾查找元素）。
• 独立的 CSS 变换属性（如 translate、rotate）。

6. 2025 年互操作性项目（Interop 2025）

• 重点领域：视图过渡（View Transitions）、CSS 锚点定位（Anchor Positioning）、导航 API（Navigation API）等。

Chrome for Developers

New in Chrome Q1 2025: CSS text-box, file system access for Android, Baseline updates and more!  |  Blog  |  Chrome for Developers

Learn about the enhancements in Chrome 132-134, such as CSS text box control for vertical spacing, the File System Access API now on Android and WebView, state preserving way to move a DOM element, light dismiss comes to dialog, and more!