动画的原理
其实我们能够看到动画，就是脑子的一个bug。当我们观看一个物体运动时候，如果在一秒内他的像能不间断的改变很多次时，此时我们肉眼就会因视觉残象产生错觉，误以为这是活动的画面。此时引入概念如下：
- 帧：每个静止的画面就叫做帧
- 播放速度：每秒24帧（视频）或者每秒30帧（游戏）以上播放，肉眼就觉得它在动了
对此，我们用js也能实现一个简单的动画，请看代码链接：运动的盒子
这段代码的原理就是之前说的，没过1000/60毫秒，就进行一次运动(移动1px)，于是就看着像在运动一样了。 看一下此时的性能，这边插播一个如何查看chrome性能的方法：F12调出调试器，然后在任意界面按Ese,此时就能找到这么一个框，此时按
，会弹出一个框，此时按
Rendering,然后选择出来的
打钩就行
之后，我们就可以欢乐的看浏览器的刷新率了，此时来看浏览器，当我们的div运动的时候，render一直是绿的，证明此时浏览器一直在刷新！证明此时动画是不断地靠render刷新出来的，对浏览器的性能考验极大。
所以针对这个情况，我们该用transition来做，此时，我们需要改一下刚刚的代码思想，我们是用的一个setInterval来写的，如果用css，其实需要两个class,显示的时候我们用一个class,开始动画的时候我们切换为另一个class，这样效果就写好了，这也是实际开发中css写法。还是同样的效果，请看用transition的代码此时打开浏览器性能查看发现只有开始和结束的时候页面变绿了一下，其他时候一直保持着静止的状态，证明transition的优化是有效果的。
浏览器渲染原理
对于上面不同的方法会有不同的性能，对此，我们来看看浏览器的相关渲染原理吧。
- 浏览器的渲染过程分以下几个步骤
- 根据HTML构建HTML树（DOM）
- 根据CSS构建CSS树（CSSOM）
- 将两棵树合并成一颗渲染树（render tree）
- Layout布局（文档流，盒模型，计算大小和位置）
- Paint绘制（把边框颜色，文字颜色，阴影等画出来）
- Compose合成
而对应不同的css属性，js在增加样式的时候更新的方式也是不同的，总共有三种更新方式。
这是对应三种方式的具体情况：
- 三种更新方式：
- 第一种，全走 div.remove()此时会触发当前消失，其他元素relayout
- 第二种，跳过layout 改变背景颜色的时候，就会直接跳过repaint+composite
- 第三种，跳过layout和paint 比如transform,只需要composit 对于每个属性，到底加了那个会触发什么，有一个网站就很好的解答了这些问题，到时候用了自己查就好了。网站
CSS动画优化
所以，针对上面讲的浏览器渲染的过程，面试的时候会问CSS的动画优化，这边把答案写一下：
- JS优化 使用requestAnimationFtame代替setTimeout或setInterval
- CSS优化
使用will-change或者translate
至此，今日的难点结束了，最后，做两个用transition和animate做的会转的太极图作为结束语吧。
transition
animate
