CSS Houdini：用浏览器引擎实现高级CSS效果

反向的圆角效果（Border-radius)：

动态的球形背景（Backgrond）：

彩色边框（Border）：

1. 不一定能实现或实现困难。

   CSSOM开放给JavaScript的API很少，这意味着开发者能做的很有限，只能简单地操纵DOM并对样式做动态计算和调整，光是去实现一些复杂的CSS新特性的Polyfill就已经很难了，对于更深层次的Layout、Paint、Composite等渲染规则更是无能为力。所以当一个新的CSS特性被推出时，通过JavaScript Polyfill不一定能够完整地实现它。

   
   

2. 实现效果差或有使用限制。

   JavaScript Polyfill是通过JavaScript来模拟CSS特性的，而不是直接通过CSS引擎进行渲染，通常它们都会有一定的限制和缺陷。例如，大家熟知的css-scroll-snap-polyfill就是针对新的CSS特性Scroll Snap产生的Polyfill，但它在使用时就存在使用限制或者原生CSS表现不一致的问题。

   
   

3. 性能较差。

   JavaScript Polyfill可能造成一定程度的性能损耗。JavaScript Polyfill的执行时机是在DOM和CSSOM都构建完成并且完成渲染后，通常JavaScript Polyfill是通过给DOM元素设置内联样式来模拟CSS特性，这会导致页面的重新渲染或回流。尤其是当这些Polyfill和滚动事件绑定时，会造成更加明显的性能损耗。

上文提到CSS Houdini提供了很多CSS引擎相关的API，根据Houdini提供的规范说明文件，API共分为两种类型：high-level APIs 和 low-level APIs 。

high-level APIs：顾名思义是高层次的API，这些API与浏览器的渲染流程相关。

low-level APIs：低层次的API，这些API是high-level APIs的实现基础。

这些APIs的支持情况在不断更新中，可以看到当前最新的一次更新时间是在2021年5月份，还是比较活跃的。（注：图片来源于Is Houdini ready yet? ）

对比下图2018年底的情况，Houdini目前得到了更广泛的支持，我们也期待图里更多绿色的板块被逐渐点亮。

大家可以访问 Is Houdini ready yet? 看到Houdini的最新支持情况。

下文中，我们会着重介绍Typed Object Model API、CSS Properties & Values API、Worklets和Paint API、Animation API，因为它们目前具有比其他API更好的支持度，且它们的特性已经趋于稳定，在未来不会有很大的变更，大家也能在了解它们之后直接将它们使用在项目中。

在Houdini出现以前，我们通过JavaScript操作CSS Style的方式很简单，先看看一段大家熟悉的代码。

// Before Houdini const size = 30target.style.fontSize = size + 'px' // "20px"
const imgUrl = 'https://www.exampe.com/sample.png'target.style.background = 'url(' + imgUrl + ')' // "url(https://www.exampe.com/sample.png)"
target.style.cssText = 'font-size:' + size + 'px; background: url('+ imgUrl +')'  // "font-size:30px; background: url(https://www.exampe.com/sample.png)"

我们可以看到CSS样式在被访问时被解析为字符串返回，设置CSS样式时也必须以字符串的形式传入。开发者需要手动拼接数值、单位、格式等信息，这种方式非常原始和落后，很多开发者为了节省性能损耗，会选择将一长串的CSS Style字符串传入cssText，可读性很差，而且很容易产生隐蔽的语法错误。

相比于上面晦涩的传统方法，Typed Object Model将CSS属性值包装为Typed JavaScript Object，让每个属性值都有自己的类型，简化了CSS属性的操作，并且带来了性能上的提升。通过JavaScript对象来描述CSS值比字符串具有更好的可读性和可维护性，通常也更快，因为可以直接操作值，然后廉价地将其转换回底层值，而无需构建和解析 CSS 字符串。

在Typed Object Model中CSSStyleValue是所有CSS属性值的基类，在它之下的子类用于描述各种CSS属性值，例如：

• CSSUnitValue

• CSSImageValue

• CSSKeywordValue

• CSSMathValue

• CSSNumericValue

• CSSPositionValue

• CSSTransformValue

• CSSUnparsedValue

• 其它

通过它们的命名就可以看出这些不同的子类分别用于表示哪种类型的CSS属性值，以CSSUnitValue为例，它可以用于表示带有单位的CSS属性值，例如font-size、width、height，它的结构很简单，由value和unit组成。

{  value: 30,  unit: "px"}

可以看到，通过对象来描述CSS属性值确实比传统的字符串更易读了。

// 获取stylesheet样式target.computedStyleMap().get("font-size"); // { value: 30, unit: "px"}
// 设置内联样式target.attributeStyleMap.set("font-size", CSS.em(5));
// stylesheet样式仍然返回20pxtarget.computedStyleMap().get("font-size"); // { value: 30, unit: "px"}
// 内联样式已经被改变target.attributeStyleMap.get("font-size"); // { value: 5, unit: "em"}

根据MDN的定义，CSS Properties & Values API也是Houdini开放的一部分API，它的作用是让开发者显式地声明自定义属性（css custom properties），并且定义这些属性的类型、默认值、初始值和继承方法。

--my-color: red;--my-margin-left: 100px;--my-box-shadow: 3px 6px rgb(20, 32, 54);

在被声明之后，这些自定义属性可以通过var()来引用，例如：

// 在:root下可声明全局自定义属性:root {  --my-color: red;} #container {  background-color: var(--my-color)}

// DOM<div id="container">container</div> // Style:root {  --my-color: red;} #container {  transition: --my-color 1s;  background-color: var(--my-color)} #container:hover {  --my-color: blue;}

但是，通过CSS Properties & Values API提供的CSS.registerProperty()方法就可以做到，就像这样：

// DOM<div id="container">container</div> // JavaScriptCSS.registerProperty({  name: '--my-color',  syntax: '<color>',  inherits: false,  initialValue: '#c0ffee',}); // Style#container {  transition: --my-color 1s;  background-color: var(--my-color)} #container:hover {  --my-color: blue;}

与上面的不同之处在于，CSS.registerProperty()显式定义了--my-color的类型syntax，这个syntax告诉浏览器把--my-color当做color去解析，因此当我们设置transition: --my-color 1s时，浏览器由于提前被告知了该属性的类型和解析方式，因此能够正确地为其添加过渡效果，得到的效果如下图所示。

CSS.registerProperty()接受一个参数对象，参数中包含下面几个选项：

在未来，开发者不仅可以在JavaScript中显式声明CSS变量，也可以直接在CSS中直接声明：

@property --my-color{  syntax: '<color>',  inherits: false,  initialValue: '#c0ffee',}

目前 Font Metrics API 还处于早期的草案阶段，它的规范在未来可能会有较大的变更。在当前的specification文件中，说明了 Font Metrics API 将会提供一系列API，允许开发者干预文字的渲染过程，创建文字或者动态修改文字的渲染效果等。期待它能在未来被采纳和支持，为开发者提供更多的可能。

目前 Font Metrics API 也处于早期的草案阶段，当前的specification文件中说明了它将会提供更多CSS解析器相关的API，用于解析任意形式的CSS描述。

Worklets是轻量级的 Web Workers，它提供了让开发者接触底层渲染机制的API，Worklets的工作线程独立于主线程之外，适用于做一些高性能的图形渲染工作。并且它只能被使用在HTTPS协议中（生产环境）或通过localhost来启用（开发调试）。

Worklets不像Web Workers，我们不能将任何计算操作都放在Worklets中执行，Worklets开放了特定的属性和方法，让我们能处理图形渲染相关的操作。我们能使用的Worklet类型暂时有如下几种：

• PaintWorklet - Paint API

• LayoutWorklet - Animation API

• AnimationWorklet - Layout API

• AudioWorklet - Audio API（处于草案阶段，暂不介绍）

Worklets提供了唯一的方法Worklet.addModule()，这个方法用于向Worklet添加执行模块，具体的使用方法，我们在后续的Paint API、Layout API、Animation API中介绍。

使用Paint API的过程简述如下：

1. 使用registerPaint()方法创建一个PaintWorklet。

2. 将它添加到Worklet模块中，CSS.paintWorklet.addModule()。

3. 在CSS中通过paint()方法使用它。

/* checkboardWorklet.js */ class CheckerboardPainter {  paint(ctx, geom, properties) {    const colors = ['red', 'green', 'blue'];    const size = 32;    for(let y = 0; y < geom.height/size; y++) {      for(let x = 0; x < geom.width/size; x++) {        const color = colors[(x + y) % colors.length];        ctx.beginPath();        ctx.fillStyle = color;        ctx.rect(x * size, y * size, size, size);        ctx.fill();      }    }  }} // 注册checkerboardregisterPaint('checkerboard', CheckerboardPainter);/* index.html */<script>    CSS.paintWorklet.addModule('path/to/checkboardWorklet.js')  // 添加checkboardWorklet到paintWorklet</script>/* index.html */<!doctype html><textarea></textarea><style>  textarea {    background-image: paint(checkerboard);  // 使用paint()方法调用checkboard绘制背景  }</style>

通过上述三个步骤，最终生成的textarea背景效果如图所示：

感兴趣的同学可以访问 houdini-samples查看更多官方样例。

在过去，当我们想要对DOM元素执行动画时，通常只有两个选择：CSS Transitions和CSS Animations。这两者在使用上虽然简单，也能满足大部分的动画需求，但是它们有两个共同的缺点：

• 仅仅依赖时间来执行动画（time-driven）：动画的执行仅和时间有关。

• 无状态（stateless）：开发者无法干预动画的执行过程，获取不到动画执行的中间状态。

但是在一些场景下，我们想要开发一个非时间驱动的动画或者想要控制动画的执行状态，就很难做到。比如视差滚动（Parallax Scrolling），它是根据滚动的情况来执行动画的，并且每个元素根据滚动情况作出不一致的动画效果，下面是个简单的视差滚动效果示例，在通常情况下要实现更加复杂的视差滚动效果（例如beckett页面的效果）是比较困难的。

Animation API的使用和Paint API一样，也同样遵循Worklet的创建和使用流程，分为三个步骤，简述如下：

1. 使用registerAnimator()方法创建一个AnimationWorklet。

2. 将它添加到Worklet模块中，CSS.animationWorklet.addModule()。

3. 使用new WorkletAnimation(name, KeyframeEffect)创建和执行动画。

/* myAnimationWorklet.js */registerAnimator("myAnimationWorklet", class {  constructor(options) {    /* 构造函数，动画示例被创建时调用，可用于做一些初始化 */  }     //  animate(currentTime, effect) {    /* 干预动画的执行 */  }});/* index.html */await CSS.animationWorklet.addModule("path/to/myAnimationWorklet.js");;/* index.html */ /* 传入myAnimationWorklet，创建WorkletAnimation */new WorkletAnimation(  'myAnimationWorklet', // 动画名称  new KeyframeEffect(   // 动画timeline（对应于步骤一中animate(currentTime, effect)中的effect参数）    document.querySelector('#target'),     [      {        transform: 'translateX(0)'      },      {        transform: 'translateX(200px)'      }    ],    {      duration: 2000, // 动画执行时长      iterations: Number.POSITIVE_INFINITY  // 动画执行次数    }  ),  document.timeline // 控制动画执行进程的数值（对应于步骤一中animate(currentTime, effect)中的currentTime参数）).play();

可以看到步骤一的animate(currentTime, effect)方法有两个参数，就是它们让开发者能够干预动画执行过程。

• effect：
  

为了更好理解effect.localTime，可以来看看effect.localTime和动画执行之间的关系，假设我们创建了一个2000ms时长的动画，并且动画没有设置delay时间。

通过上面的描述，大家应该get到如何做一个简单的滚动驱动（scroll-driven）的动画了，实际上有个专门用于生成滚动动画的类：ScrollTimeline，它的用法也很简单：

/* myWorkletAnimation.js */ new WorkletAnimation(  'myWorkletAnimation',  new KeyframeEffect(    document.querySelector('#target'),    [      {        transform: 'translateX(0)'      },      {        transform: 'translateX(500px)'      }    ],    {      duration: 2000,      fill: 'both'    }  ),  new ScrollTimeline({    scrollSource: document.querySelector('.scroll-area'), // 监听的滚动元素    orientation: "vertical", // 监听的滚动方向"horizontal"或"vertical"    timeRange: 2000 // 根据scroll的高度，传入0 - timeRage之间的数值，当滚动到顶端时，传入0，当滚动到底端时，传入2000  })).play();

Layout API和其它两个API相似，使用步骤同样分为三个步骤，简述如下：

• 通过registerLayout()创建一个LayoutWorklet。

• 将它添加到Worklet模块中，CSS.layoutWorklet.addModule()。

• 通过display: layout(exampleLayout)使用它。

/* myLayoutWorklet.js */ registerLayout('myLayoutWorklet', class {  static get inputProperties() { return ['--my-prop']; }   static get childrenInputProperties() { return ['--my-child-prop']; }   static get layoutOptions() {    return {      childDisplay: 'normal',      sizing: 'block-like'    };  }   intrinsicSizes(children, edges, styleMap) {    /* ... */  }   layout(children, edges, constraints, styleMap, breakToken) {    /* ... */  }});CSS.layoutWorklet.addModule('path/to/myLayoutWorklet.js');.my-layout {  display: layout(myLayoutWorklet);}

一个Google Chrome Labs案例如下所示，通过Layout API实现了一个瀑布流布局。

虽然通过Layout API自定义布局较为困难，但是我们依然可以引入别人的优秀开源Worklet，帮助自己实现复杂的布局。

鉴于当前Houdini APIs的浏览器支持度仍然不是很完美，在使用这些API时需要先做特性检测，再考虑使用它们。

/* 特性检测 */ if (CSS.paintWorklet) {  /* ... */} if (CSS.animationWorklet) {  /* ... */} if (CSS.layoutWorklet) {  /* ... */}

想要在chrome中调试，可以在地址栏输入chrome://flags/#enable-experimental-web-platform-features，并勾选启用Experimental Web Platform features。

Houdini APIs让开发者有办法接触到CSS渲染引擎，通过各种API实现更高性能和更复杂的CSS渲染效果。虽然它还没有完全准备好，很多API甚至还处于草案阶段，但它给我们带来了更多可能性，并且诸如paint API、Typed OM、Properties & Values API这些新特性也都被广泛支持了，可以直接用于增强我们的页面效果。未来Houdini APIs一定会慢慢走进开发者的世界，大家可以期待并做好准备迎接它。

1. W3C Houdini Specification Drafts

2. State of Houdini (Chrome Dev Summit 2018)

3. Houdini’s Animation Worklet - Google Developers

4. Interactive Introduction to CSS Houdini

5. CSS Houdini Experiments

6. Interactive Introduction to CSS Houdini

7. Houdini Samples by Google Chrome Labs