#优质博文 #chrome #webgl #性能优化 #浏览器 #新动态
Introducing Skia Graphite: Chrome's Rasterization Backend for the Future
author Claire Charron
Introducing Skia Graphite: Chrome's Rasterization Backend for the Future
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 光栅化。
author Claire Charron