1.BFC
BFC全称为块格式化上下文 (Block Formatting Context) ，是 Web 页面中盒模型布局的 CSS 渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。
浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及 overflow 值不为visiable 的块级盒子，都会为他们的内容创建新的 BFC（块级格式上下文）。
在 BFC 中，盒子从顶端开始垂直的一个接一个排列，两个盒子之间的垂直间距由他们的 margin 值决定，在同一个 BFC 中，两个相邻块级盒子的垂直外边距会产生折叠。
在 BFC 中，每一个盒子的左外边缘会触碰到容器的左边缘，对于从右到左的格式来说，则触碰到右边缘。即使在浮动里也是这样的（尽管一个盒子的 line boxes 会因为浮动而收缩），除非这个盒子的内部创建了一个新的 BFC（由于浮动，在这种情况下盒子本身将会变得更窄）
2.盒模型
标准盒模型：box-sizing:content-box
IE盒模型：box-sizing:border-box
3.重排和重绘
页面渲染的流程：解析HTML绘制dom数，解析Css绘制css树，dom和css组合渲染，计算节点渲染到屏幕上，当dom 结构发生改变时会触发重排，重排一定会触发重绘。
当一个元素的外观改变出发重绘，当元素的大小位置发生改变时触发重排。
重排和重绘都会消耗浏览器性能，尽量避免。
避免一条一条修改dom样式
避免dom 节点属性循环里当变量
避免大量元素使用hover
分离读写操作
避免使用table布局
避免多层内联样式
避免布局信息改变时查询布局信息
当需要对DOM元素进行一系列的操作时，可以先使元素脱离文档流，再对其进行一些列操作，然后再把元素带回文档中
脱离文档流方法：
隐藏元素，施加修改，重新显示
使用document fragment在当前DOM之外构建一个子树，再把它拷贝回文档
将元素元素拷贝到另一个脱离文档的节点中，修改副本，完成后再替换原始元素
