浏览器渲染原理浏览器渲染过程在HTML的基础上构建HTML树（DOM）在CSS的基础上构建CSS树（CSSOM）将两棵树合并为一棵渲染树布局布局（文档流、盒模型、计算尺寸和位置）绘制绘图（绘制边框颜色、文字颜色、阴影等）Compose合成（按级联关系显示画面）transition和animation的区别1.transition需要触发如：点击事件，鼠标移动事件；而动画可以用@keyframe，你可以在不触发事件的情况下触发这个动画。2.Transition触发一次播放；而动画可以设置很多属性，比如循环次数，动画结束的状态等；3.Transition关注样式属性的变化，属性值与时间的关系是三次贝塞尔曲线；而动画作用于元素本身而不是样式属性，你可以使用关键帧的概念来实现更自由的动画效果；4、性能方面：浏览器有一个主线程和一个排版线程；主线程一般会运行js，页面布局，生成位图等，然后将生成的位图传递给排版线程，排版线程会通过GPU将位图绘制到页面，也会向主线程请求位图，ETC。;我们在使用animtion的时候，可以改变很多属性，比如当我们改变文档流的宽度，高度，postion等属性时，页面的回流和重绘对性能的影响比较大，但是当我们使用transition，我们一般使用tansfrom进行旋转缩放等，不会生成新的位图，当然也不会造成页面重排。
