CSS Houdini Paint Worklet：自定义绘制与性能边界

---

title: CSS Houdini Paint Worklet：自定义绘制与性能边界

keywords:

• Houdini
• Paint Worklet
• CSS.paint()
• registerPaint
• 自定义绘制

description: 介绍 Paint Worklet 的注册与使用，如何以 CSS 调用自定义绘制提升灵活性，并说明输入属性、性能注意与回退策略，提供示例与参考。

categories:

• 文章资讯
• 编程技术

---

概述

Paint Worklet 允许以小型绘制程序扩展 CSS，使用 CSS.paint() 在样式中调用。适用于背景图样、装饰与轻量可视组件。需注意绘制频率与输入属性管理，以避免性能问题。

示例

// main.js
CSS.paintWorklet.addModule('/worklet.js')

// worklet.js
registerPaint('checkerboard', class {
  static get inputProperties() { return ['--size', 'background-color'] }
  paint(ctx, geom, props) {
    const size = parseInt(props.get('--size').toString() || '16', 10)
    for (let y = 0; y < geom.height; y += size) {
      for (let x = 0; x < geom.width; x += size) {
        ctx.fillStyle = ((x / size + y / size) % 2) ? '#eee' : '#ccc'
        ctx.fillRect(x, y, size, size)
      }
    }
  }
})

.box { --size: 16; background: paint(checkerboard) }

工程建议

• 输入与缓存：通过自定义属性减少重绘；避免在高频变化场景使用复杂绘制。
• 性能：控制区域尺寸与复杂度；结合 DevTools 性能面板分析重绘开销。
• 兼容：不支持环境回退到静态背景或图像；特性检测后启用。

参考与验证

• MDN CSS Painting API：https://developer.mozilla.org/docs/Web/API/CSS_Painting_API
• web.dev Houdini 指南：https://web.dev/articles/houdini
• Chrome 平台文档：https://developer.chrome.com/docs/web-platform/css-paint-api/