无意间又得知一个宝藏网站CSS triggers，这个网站是Chrome开发者Paul Lewis创造了一个页面解析参考，当给定的CSS属性变更时它会发挥自己的作用。例如,一些属性将触发重绘和合成,但不会引发布局。我们可以很容易地通过CSS Triggers来发现这些变化。
我们都知道浏览器渲染有两个概念：Layout（重排） 和 Paint（重绘）以及不常提及的Composite（合成），具体的就不细述了，主要讲css样式值变更都会触发哪些操作
然后呢还需要知道几个名词：Blink、Gecko、Webkit、EdgeHTML
| Browser | Rendering Engine | JavaScript Engine |
|---|---|---|
| IE | MSHTML | JScript/Chakra |
| Microsoft Edge | EdgeHTML | Chakra |
| Firefox | Gecko | SpiderMonkey |
| Safari | Webkit | JavaScriptCore |
| Chrome | Blink | V8 |
| Opera | Presto | Carakan |
还有两个：change from default 、 Subsequent updates:
- change from default：页面初始化的时候的css样式值
- Subsequent updates：css样式值发生了改变
这样我们就可以看懂这个网站是干什么的了：就是查询当某一个CSS样式变更时对浏览器渲染过程的影响，举个例子：
当color这个属性值发生变化的时候，Chrome、Firefox、Edge都只是触发了Paint 和 Composite，并没有触发Layout，而Safari三者都触发了。这样就造成了性能的浪费。
所以这个网站有助于我们编写性能更加高效的css样式
