CSS Triggers.md 1.2 KB
title: CSS Triggers author: Gamehu tags:
- css categories:
- 前端 date: 2018-09-11 14:46:00
在学习浏览器那块，有一块时关于渲染的。
{% asset_img render.png %}
在此过程中发现了一个网站 CSS Triggers，说明哪些css可以触发浏览器的重新渲染（layout、Paint、Composite），所以这个网站是用来告诉开发者不同内核浏览器对css属性修改的重绘/回流情况，开发者知道了这些细节可以提高页面性能。
小而美的网站，感谢这两位大佬 Paul and Surma。
我在此简单做个记录，方便后续的使用。
说明
- 紫色代表如果layout，中文一般翻译成布局。
- 浅绿色代表Paint，一般翻译成重绘。
- 深墨绿色代表Composite，翻译成混合或者合成，重绘和回流任意发生一个就会引起Composite。
触发时间：
- Change from default：设置属性(从默认值修改，相当于一开始没设置css)
- Subsequernt updates：修改属性(对现有的属性值进行修改)。
如图所示，点击每个属性会有详细的说明。
{% asset_img css.png %}