一、css3 如何启用硬件加速
（1）将浏览器的渲染过程交给GPU（graphics processing unit）解决，而不是应用自带的比较慢软件的渲染器，能够让animation和transition更加顺畅。（GPU和CPU的渲染机制不一样）
（2）原理：创立一个新的复合图层（通过css的3D或者CSS transform；<video>和<canvas>标签；CSS filters；元素笼罩，比方z-index属性），不触发重绘。
（3）如何开启：translate3d,rotate3d,scale3d,transform
（4）有余：耗内存，所以不要让每个元素开启,只开启动画须要的元素；影响字体的抗锯齿成果。
二、flexible box弹性布局
1、任何一个容器都能够指定为flex布局 display: flex / inline-flex。
2、容器上的属性flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content
(1) flex-direction：row row-reserve column column-reserve
(2) flex-wrap：nowrap wrap wrap-reserves
(3) flex-flow: flex-direction和flex-wrap的简写模式。默认是：row nowrap
(4) justify-content(主轴如何对齐): flex-start flex-end center space-between space-around
(5) align-item(穿插轴如何对齐): flex-start flex-end center strecth baseline
(6) align-content: 作用同align-item，换行的时候才起作用，会笼罩align-item，单行的时候不起作用。flex-start flex-end center stretch space-between space-around
3、容器我的项目的属性order, flex-grow, flex-shrink, flex-basic, flex, align-self
(1) order: 定义我的项目的排列程序 数值越小 越靠前。默认是0
(2) flex-grow: 定义我的项目的放大比例，平分残余空间的规范。默认0，就算有残余空间，也不放大。
(3) flex-shrink: 定义了我的项目的放大比例。默认为1，如果空间不够 增等比例放大。若有一个为0，则为0的我的项目不放大。
(4) flex-basis: 当一个row元素同时被设置了flex-basis和width，flex-basis具备更高的优先级
(5) flex: 是flex-grow flex-shrink flex-basis的简写。默认值为0 1 auto，后两个值可选。倡议优先应用flex这个属性。快捷值有：auto(1 1 auto)、none(0 0 auto)
(6) align-self: 容许单个我的项目有和其余我的项目不一样的对齐形式，可笼罩align-items属性。默认值为auto，标识继承父元素的align-items属性，如果没有父元素，则等同于stretch。auto flex-start flex-end center baseline stretch
三、BFC（block formatting contexts）块级格式化上下文
1、作用：是个隔离了的独立容器，容器外面的元素不会在布局上影响到里面的元素。
2、个性
（1）同一个BFC容器上面的元素 下边距margin会产生重叠，要防止，则要放在不同的BFC容器
（2）能够蕴含浮动的元素（革除浮动）。因为浮动的元素会脱离一般的文档流。
（3）能够避免元素被浮动元素遮蔽（文字盘绕成果）。能够实现右边固定宽度（float：），左边自适应的成果。（通过触发另外一个元素的BRC实现）
3、如何成为BFC
（1）body根元素
（2）浮动元素：float处none外的值
（3）相对定位元素：position(absolute fixed)
（4）display为inline-block table-cells flex
（5）overflow除了visible以外的值（hidden，auto，scroll）
四、window.requestAnimationFrame(callback)
1、通知浏览器---心愿执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。
2、是浏览器用于定时循环操作的一个接口，相似于setTimeout，主要用途是按帧对网页进行重绘
（1）个别显示器1s刷新60次，所以均匀每16.7ms才刷新一次。然而如果想要小于16.7ms就刷新一次（适度绘制），可能呈现丢帧景象，导致动画不间断，卡顿。所以，setTimeout的定时器值最小举荐16.7ms。而requestAnimationFrame就是跟着浏览器的绘制频率走：浏览器每次要重绘，就会告诉requestAnimationFrame。
3、与setTimeout相比益处：有零碎来决定回调函数的执行机会，充分利用显示器的刷新机制，比拟节俭系统资源。当页面处于不可见或不可用状态时，浏览器就会进行动画，节俭CPU和内存耗费。
4、和css3的transition和animation相比：
（1）css3兼容性无限。
（2）css3不能利用所有属性，比方scrollTop的值
（3）css3反对的动画成果无限。