浏览器渲染线程互斥的概念
问题：css渲染会影响js渲染性能嘛？
答：会的，原因是在浏览器渲染过程渲染css和渲染js各开启一个线程去工作但是这两个线程是互斥的，当渲染css在工作，渲染js的线程将会停止工作，则如果页面css频繁进行重绘势必会降低js的渲染速度
回流的概念
当rander tree中的一部分或者全部因为元素的规模尺寸，布局，隐藏等改变而需要重新构建render tree 这个过程称为回流
例子：如页面布局，几何属性发生改变就会发生回流现象
重绘的概念
当render tree 的一些元素需要更新属性，而这些属性之影响外观，风格，但不影响布局，比如：background-color: 这个重新渲染的过程叫做重绘
重绘和回流的关系
回流必然会重绘，但重绘不一定会回流
触发回流的css属性
1、盒子模型相关的
width
height
padding
margin
display
border-width
border
min-height
2、定位属性以及浮动属性
top
bottom
left
right
position
float
clear
3、改变节点内部文字结构
test-algin
overflow-y
font-weight
overflow
font-family
line-height
vertival-align
white-space
font-size
触发重绘的属性
color
border-style
border-radius
visibility
text-decoration
background
background-image
background-position
background-repeat
background-size
outline-color
outline
outline-style
outline-width
box-shadow
性能解决思路
既然在css角度上来看，我们依然知道这这些元素会触发回流和重绘，那么解决方案也就很清晰，也就是我们尽量去寻找替代这些元素的方案减少回流和重绘即可
一个基础认识–新建DOM的过程
1，获取dom后分割多个图层
2，对图层节点计算样式结果(样式重计算)
3，为每节点生成图形和认识(回流和重新布局)
4，将每个节点绘制填充到图层位图中(重绘）
5，图层作为纹理上传至GPU
6，合并多个图层到页面上生成最终屏幕图象(图层重组)
性能解决方案
1，局限法：将频繁重绘的DOM元素单独作为一个图层，则此DOM元素的重绘和回流的影响只局限在这个图层中
具体实现：
1，3D或者透视变换css属性
2，使用加速视频解码的节点
3，使用拥有3D(webGL)上下文或者2D上下文的节点
4，混合插件（如flash）
5，对自己opacity做css动画或者使用一个动画webkit变换的元素
6，拥有加速cssg过滤器的元素
7，元素拥有一个包含复合层的后代节点（即子元素在自己的层里面）
8，元素有一个z-index较低且包含一个复合层的兄弟元素（即该元素在复合层上面渲染）
2，替换法：尽量避免使用触犯重绘回流的属性,替换
1，用translate替代top ：前者不会触发回流
2，用opacity替代visibility ：前者不会触发重绘（前提:独立图层否则整体回流重绘）
3，不要逐条修改DOM样式，预先定义好class，然后修改className
4，先将DOM离线，即将DOM先display:none,此操作会触发一次回流，但避免了后面多此
操作的反复回流，只会留一次，然后在其他修改完成情况下在现实出来
5，不要将DOM节点的属性值放在循环里当成循环变量，很要命
6，不要使用table布局，table布局可能因为很小的改动导致整体table重新布局
7，对动画新建图层，如canvas，vedio等标签本身就是独立图层
8，启用GPU加速，但是GPU如果处理的数据大需要和CPU进行频繁数据流动是个性能副
作用
性能查看
Chrome自带perfomance
性能消耗对比
新建图层提高性能是相对看的，但是“滥用”图层或许图层合成对性能开销更大，所以合理利用并做性能比较，再决定是否用新建图层的方式避免重绘和回流
图层查看
Chrome自带Layers
…
未完待续，如有错误，请留言指出！
