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

问题描述

问 题

无意中看到一个网站css triggers

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

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

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

解决方案

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

这篇关于css triggers这个网站怎么用？？？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！