前言
在学习css3的时候知道了transform设置过渡时间duration就可以让大部分数值类的属性进行过渡，在伸缩类的动画上我一直用的是width和height之类的属性，但是实际效果可以看到很明显的一个动画卡顿，后来在各方查找资料之后发现原来是因为浏览器的执行原理的问题，浏览器有一个渲染引擎，它是负责将所有的可视的dom渲染在屏幕上，当然了浏览器的动画肯定也是由它来执行的。
那么怎么渲染呢？
浏览器在执行js脚本的时候是单线程执行的，但是有两个执行线程，主线程和合成线程。
主线程负责来解析javascript脚本和html、css，解析并计算他们的各自的布局样式，然后生成到一个或多个位图中。
合成线程在拿到位图之后通过GPU渲染到屏幕上，并提示主线程哪些元素是屏幕即将显示的元素（类似于懒加载）
具体渲染流程如下：
1、拿到html之后创建文本对象模型
2、拿到css之后创建css对象模型
3、基于以上两项执行js脚本
4、合并html和css形成渲染树
5、使用渲染树来布局所有的元素
6、渲染所有的元素
那么为什么width、height、padding、margin类的元素会卡顿呢？
假如我们在设置了duration为1秒钟，动画效果是width从0px到100px。也就是说在这1秒钟内浏览器主线程从0px>1px>2px...>100px要执行100次解析步骤，合成线程同时也要执行100次渲染步骤，加起来就是在1秒钟内线程要执行200次，对于cpu来说这的确不是难事，但是浏览器上不可能只有一个动画，线程也不可能只执行这一个事件，积少成多动画自然就会卡顿了。
如何解决？
在transform属性之中有一个translate的值，它可以指定元素进行某一个数字的偏移。可以是X轴Y轴和Z轴的过渡，也可以是3d和2d的转换，具体可以自行百度，使用translate进行上面的效果时，浏览器的执行步骤就变成了主线程计算1次translateX的偏移，然后交给合成线程去渲染100次px的偏移，相较于width来说是少了99次计算，但是对于比较大的数值来说对于性能提升是很可观的
注意事项
在后来的项目中基本就放弃了width之类的元素做动画了，但是还是发现了一个问题，在使用了translateY进行位移之后后面的元素是不会自动跟随的
可以看到使用translateY之后的元素并不会紧跟着移动。所以具体还得看项目的实际情况来决定用哪个
