共计 2273 个字符，预计需要花费 6 分钟才能阅读完成。
一、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 反对的动画成果无限。
