Houdini API

Houdini 是一组低级 API，它公开 CSS 引擎的部分功能，使开发人员能够通过接入浏览器的渲染引擎的样式和布局过程来扩展 CSS。Houdini 是一组 API，它使开发人员能够直接访问 CSS 对象模型 (CSSOM)，使开发人员能够编写浏览器可以解析为 CSS 的代码，从而创建新的 CSS 功能，而无需等待它们在浏览器中原生实现。

Houdini 的优势

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

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

CSS Houdini 的一项功能是 Worklet。使用 worklet，您可以创建模块化的 CSS，只需一行 JavaScript 代码即可导入可配置的组件：无需预处理器、后处理器或 JavaScript 框架。

CSS.paintWorklet.addModule("csscomponent.js");

这个添加的模块包含 PaintWorkletGlobalScope.registerPaint 函数，这些函数注册完全可配置的 worklet。

注意：您可以编写自己的 worklet，也可以安装其他人创建的组件。Houdini.how 网站是 worklet 的集合，其中包含有关如何使用它们的说明.

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

在以下示例中，paint() 函数传递了一个名为 myComponent 的 worklet。

css

li {
  background-image: paint(myComponent, stroke, 10px);
  --highlights: blue;
  --lowlights: green;
}

注意：能力越大，责任越大！使用 Houdini，您可以创建自己的 masonry、网格或区域实现，但这样做不一定是最明智的选择。CSS 工作组做了很多工作，以确保每个功能都具有高性能，处理所有边缘情况，并考虑安全性、隐私和无障碍性。在使用 Houdini 扩展 CSS 时，请确保牢记这些注意事项，并从小处着手，然后再进行更具雄心的项目。