title: CSS Triggers
author: Gamehu
tags:

  - css
categories:
  - 前端
date: 2018-09-11 14:46:00

---

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

{% asset_img render.png %}

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

小而美的网站，感谢这两位大佬 [Paul](https://twitter.com/aerotwist) and [Surma](https://twitter.com/DasSurma)。

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





### 说明

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



#### 触发时间：

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

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

{% asset_img css.png %}