CSS Triggers

在学习浏览器那块，有一块时关于渲染的。

在此过程中发现了一个网站 CSS Triggers，说明哪些css可以触发浏览器的重新渲染（layout、Paint、Composite），所以这个网站是用来告诉开发者不同内核浏览器对css属性修改的重绘/回流情况，开发者知道了这些细节可以提高页面性能。

小而美的网站，感谢这两位大佬 Paul and Surma。

我在此简单做个记录，方便后续的使用。

说明

• 紫色代表如果layout，中文一般翻译成布局。
• 浅绿色代表Paint，一般翻译成重绘。
• 深墨绿色代表Composite，翻译成混合或者合成，重绘和回流任意发生一个就会引起Composite。

触发时间：

• Change from default：设置属性(从默认值修改，相当于一开始没设置css)
• Subsequernt updates：修改属性(对现有的属性值进行修改)。

如图所示，点击每个属性会有详细的说明。