Houdini API

Houdini 的优势

与使用 JavaScript HTMLElement.style 进行样式更改相比，Houdini 实现了更快的解析速度。浏览器会在应用脚本中找到的任何样式更新之前解析 CSSOM — 包括布局、绘制和合成过程。此外，布局、绘制和合成过程会针对 JavaScript 样式更新重复执行。Houdini 代码不会等待第一个渲染周期完成。相反，它会包含在第一个周期中 — 创建可渲染、可理解的样式。Houdini 提供了一个基于对象的 API，用于在 JavaScript 中处理 CSS 值。

Houdini 的 CSS 类型对象模型 API 是一个具有类型和方法的 CSS 对象模型，它将值公开为 JavaScript 对象，比以前基于字符串的 HTMLElement.style 操作更直观地操作 CSS。每个元素和样式表规则都有一个样式映射，可以通过其 StylePropertyMap 访问。

CSS Houdini 的一个特性是 Worklet。通过 worklets，您可以创建模块化的 CSS，只需一行 JavaScript 即可导入可配置的组件：无需预处理器、后处理器或 JavaScript 框架。

js

CSS.paintWorklet.addModule("css-component.js");

此附加模块包含 PaintWorkletGlobalScope.registerPaint 函数，该函数注册完全可配置的 worklets。

CSS paint() 函数是 <image> 类型支持的附加函数。它接受的参数包括 worklet 的名称，以及 worklet 所需的其他参数。Worklet 还可以访问元素的自定义属性：无需将它们作为函数参数传递。

在下面的示例中，paint() 函数传递了一个名为 my-component 的 worklet。

css

li {
  background-image: paint(my-component, stroke, 10px);
  --highlights: blue;
  --theme: green;
}

注意： 强大的力量伴随着巨大的责任！使用 Houdini，您可以发明自己的 masonry、grid 或 regions 实现，但这不一定是个好主意。CSS 工作组做了大量工作来确保每个功能都具有高性能，能够处理所有边缘情况，并考虑安全、隐私和可访问性。在通过 Houdini 扩展 CSS 时，请确保牢记这些考虑因素，并在进行更宏大的项目之前从小处着手。