blog CSS Houdini

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, #21
Typed OM, #25
Properties and Values
Layout, #26
Worklets
Animation Worklet, #24
- 谈谈 Animation Worklet
Box Tree
Font Metrics
Parser

Oct 11 '18 09:10 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 有兴趣

Oct 12 '18 07:10 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

下面是它涵盖的内容：

Wroklets
- 是部分其它草案的基础，它本身并没很有用
- 与 Web Workers 概念相似，但还引入 Worklet 是因为
  - 旨在让网页开发人员将自己的代码连接到 CSS 引擎及其周边系统
  - 适合处理大量的像素
- 它用了 ES2015 里的类来定义方法集合，签名是由 worklet 预定义的类型
- 轻量，生命周期短
CSS Paint API
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 旨在想在让动画期间，最小限度地重绘，最大限度地复用之前的帧
Layout worklet
- 编写自己的布局
- 可以这样用display: layout(myLayout)，让JS布局其子节点
Typed CSSOM
- 在 Chrome 里几乎已完整实现
- 类型化的 CSSOM
Properties and Values
- 为自定义属性指定类型、默认值、用JS来使用继承
- CSS的自定义属性，只是它没有类型
  - 目前为止，自定义属性只能有字符串值/简单的搜索和替换方法
  - 嗯~CSS自定义属性 CSS Variables: Why Should You Care?
Font Metrics

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

Oct 12 '18 08:10 anjia

blog blog copied to clipboard

CSS Houdini

Houdini 的相关模块及各自进展

Houdini 简介

blog
blog copied to clipboard