vivo 互联网前端团队-Wei Xing
Houdini被称之为Magic of styling and layout on the web，看起来十分神秘，但实际上，Houdini并非什么神秘组织或者神奇魔法，它是一系列与CSS引擎相关的浏览器API的总称。
一、Houdini 是什么
在了解之前，先来看一些Houdini能实现的效果吧：
反向的圆角效果（Border-radius)：
动态的球形背景（Backgrond）：
彩色边框（Border）：
神奇吧，要实现这些效果使用常规的CSS可没那么容易，但对CSS Houdini来说，却很easy，这些效果只是冰山一角，CSS Houdini能做的有更多。（这些案例均来自Google Chrome Labs，更多案例可以通过 Houdini Samples 查看）。
看完效果，再来说说Houdini到底是什么。
首先，Houdini 的出现最直接的目的是为了解决浏览器对新的CSS特性支持较差以及Cross-Browser的问题。我们知道有很多新的CSS特性虽然很棒，但它们由于不被主流浏览器广泛支持而很少有人去使用。
随着CSS规范在不断地更新迭代，越来越多有益的特性被纳入进来，但是一个新的CSS特性从被提出到成为一个稳定的CSS特性，需要经过漫长地等待，直到被大部分浏览器支持时，才能被开发者广泛地使用。
而 Houdini 的出现正是洞察和解决了这一痛点，它将一系列CSS引擎API开放出来，让开发者可以通过JavasScript创造或者扩展现有的CSS特性，甚至创造自己的CSS渲染规则，给开发者更高的CSS开发自由度，实现更多复杂的效果。
二、JS Polyfill vs Houdini
有人会问，实际上很多新的CSS特性在被浏览器支持之前，也有可替代的JavaScript Polyfill可以使用，为什么我们仍然需要Houdini呢？这些Polyfill不是同样可以解决我们的问题吗？
要回答这个问题也很简单，JavaScript Polyfill相对于Houdini有三个明显的缺陷：
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和滚动事件绑定时，会造成更加明显的性能损耗。
Houdini的诞生让CSS新特性不再依赖于浏览器，开发者通过直接操作CSS引擎，具有更高的自由度和性能优势，并且它的浏览器支持度在不断提升，越来越多的API被支持，未来Houdini必然会加速走进web开发者的世界，所以现在对它做一些了解也是必要的。
在本文，我们会介绍Houdini的APIs以及它们的使用方法，看看这些API当前的支持情况，并给出一些在生产环境中使用它们的建议。
Houdini的名称与一位著名美国逃脱魔术师Harry Houdini的名称一样，也许正是取逃脱之意，让CSS新特性逃离浏览器的掌控。
三、Houdini APIs
上文提到CSS Houdini提供了很多CSS引擎相关的API，根据Houdini提供的规范说明文件，API共分为两种类型：high-level APIs 和 low-level APIs 。
high-level APIs：顾名思义是高层次的API，这些API与浏览器的渲染流程相关。
- Paint API