css triggers这个网站怎么用？？？

Question

无意中看到一个网站css triggers

在网上看到的简介就只是“Chrome开发者Paul Lewis创造了一个页面解析参考,当给定的CSS属性变更时它会发挥自己的作用。例如,一些属性将触发重绘和合成,但不会引发布局。我们可以很容易地通过CSS Triggers来发现这些变化。”

不是很明白是什么意思，到底咋用，有没有使用过的前辈能够指点一下的。。。o(╯□╰)o

网站内容大抵就是下图这样的。。。

Answer 1

紫色代表如果layout，中文一般翻译成回流，浅绿色代表Paint，一般翻译成重绘，深墨绿色代表Composite，翻译成混合，重绘和回流任意发生一个就会引起混合。
Change from default：设置属性(从默认值修改，相当于一开始没设置css)，Subsequernt updates：修改属性(对现有的属性值进行修改)。你当前看的属性是align-content，在这种情况下，B/G/W/E四种内核因为内核不同对修改/设置align-content引起的重绘/回流的情况各不相同，所以这个网站是用来告诉开发者不同内核浏览器对css属性修改的重绘/回流情况，开发者知道了这些细节可以提高页面性能。
浏览器渲染Rendering那些事：repaint、reflow/relayout、restyle

Answer 2

很明显，这就是个普通的表格，左边是属性，然后右边第一列是不同浏览器在该属性从默认改为其他时的行为，第二列是该属性再次变化时进行的行为，然后三个颜色条代表了相应的布局之类是否变化。