CSS Houdini

[anjia]

Houdini 的相关模块及各自进展

• CSS Houdini 的九个API
  • 该网页是 Houdini 早期时的状态，只是个草案清单。不完整，有些也只是先占个坑
  • 它里面的规范链接有些已经过时了。规范的最新链接，见下表格中的
  • “成熟度”列的说明
    • 只有 FPWD WD CR REC 等，才是官方规范
    • 其余的 Draft, Idea 等，说明该 API 目前尚不成熟，先占个坑供大家讨论。即初期阶段

	规范	成熟度	说明
1	CSS Painting API 1	CR	用JS自定义CSS图像类型
2	CSS Layout API Level 1	FPWD	用JS自定义布局
	Worklets 1	FPWD	在渲染引擎的各个阶段执行脚本，独立于主JS
3	CSS Animation Worklet 1	FPWD	可控制一组动画效果的脚本动画
4	CSS Typed OM 1	WD	将CSSOM的值的字符串转成JS对象，性能好点
5	CSS Properties and Values API 1	WD	注册新的CSS属性，可定义类型/继承/赋初始值
	Box Tree API 1	Idea	访问 boxes 信息的 API
	Font Metrics API	Idea	提供基本的字体指标
	CSS Parser API		提供CSS解析的API，移到了 WICG 仓库

7个今年还在更新维护中
Draft：Draft Community Group Report，社区小组报告草案
Idea：还在收集想法当中
WICG：Web Platform Incubator Community Group，Web平台孵化器社区小组

• Is Houdini ready yet?：浏览器兼容情况
• w3c/css-houdini-drafts：Github
• googlechromelabs/houdini-samples：浏览器已经支持了的，在线 demos

结合浏览器的实现情况及标准的进展，按成熟度降序排列：

• Painting, CSS Painting API #21
• Typed OM, CSS Typed OM #25
• Properties and Values
• Layout, CSS Layout API #26
• Worklets
• Animation Worklet, CSS Animation Worklet #24
  • 谈谈 Animation Worklet
• Box Tree
• Font Metrics
• Parser

[anjia]

移交到 WICG（Web Incubator Community Group）Web孵化器社区组的草案

• 目的是让Web开发人员参与新API的设计，确保既好用又实用
  • 在这待的时间不固定，因情况而定。一旦涉及到的大家觉得API成熟了，就可以继续推进了
  • Houdini 工作组努力将 AW 变成CR
• 也是让提案优雅消亡的一种方式
  • 意味着草案还没走出困境，可能改变，也可能最后就没了...

https://dassur.ma/things/animworklet/

目前，CSS Animation Worklet API 的最新代码又移回到了 CSS Houdini Drafts 里

---

https://github.com/WICG

要将提案/草案移交至 WICG，须至少有一个浏览器厂商对此 API 有兴趣

[anjia]

Houdini 简介

Houdini: Demystifying CSS, 揭开 CSS 的神秘面纱

Houdini 旨在提高 CSS 的可扩展性，它能让开发人员介入浏览器的渲染环节，让其更自主更灵活。

第一次提出是在2016年5月中旬的 Google I/O 大会上，且在后续的 AC/TPAC 会上有技术交流和更新
Houdini: Demystifying the Future of CSS - Google I/O 2016

下面是它涵盖的内容：

1. Wroklets
   • 是部分其它草案的基础，它本身并没很有用
   • 与 Web Workers 概念相似，但还引入 Worklet 是因为
     • 旨在让网页开发人员将自己的代码连接到 CSS 引擎及其周边系统
     • 适合处理大量的像素
   • 它用了 ES2015 里的类来定义方法集合，签名是由 worklet 预定义的类型
   • 轻量，生命周期短
2. CSS Paint API
3. Animation Wroklet
   • 它之前叫 Compositor worklet，然后重新设计了下，也改名了。点击查看更多细节
     • 最大的改变就是：代码不能运行在 Compositor 线程里了
     • 因为，一旦 Compositor 线程崩溃，整站就会卡死
   • 现在在AW里，代码是运行在一个 in-sync with compositor thread
     • 好处是，一旦代码性能太差，动画就失效/不执行了
     • 这样，AW的性能至少和 requestAnimationFrame 一样好了
       • 如果它的代码执行快，那就每帧更新；否则空闲时间时，主进程再执行它
   • 另，aw 到底是在哪个线程里执行，取决于属性本身
     • 如果是会引起重绘的，则 aw 会绑定到 main thread
     • 如果只是单纯的layer，则会运行在一个与 Compositor 同步的单独线程里
       • 尽量选择这个--因为动画会在低配设备上也会更流畅
     • 属性的分类同 csstrigger.com
   • 该草案已被移交到 WICG
   • 其它：
     • 目前，渲染引擎是分 layer 显示的，有些操作是在图形卡上执行
     • AW 旨在想在让动画期间，最小限度地重绘，最大限度地复用之前的帧
4. Layout worklet
   • 编写自己的布局
   • 可以这样用display: layout(myLayout)，让JS布局其子节点
5. Typed CSSOM
   • 在 Chrome 里几乎已完整实现
   • 类型化的 CSSOM
6. Properties and Values
   • 为自定义属性指定类型、默认值、用JS来使用继承
   • CSS的自定义属性，只是它没有类型
     • 目前为止，自定义属性只能有字符串值/简单的搜索和替换方法
     • 嗯~CSS自定义属性 CSS Variables: Why Should You Care?
7. Font Metrics

https://developers.google.com/web/updates/2016/05/houdini