BFC很多人问什么是BFC，为什么在父元素上加上overflow:hidden/positioning/inline-block，就会让子元素脱离文档流自动展开父元素？BFC是css布局中的一个概念。它是一个区域，一个容器。无论内部元素如何布局，都不会影响到区域外的元素。添加这些属性后，会触发父元素生成BFC，并计算自己的宽度。为高时，会解析内部元素，拉伸父元素的宽高。hasLayoutasLayout其实就是IE567的BFC，是ie浏览器特有的；在IE中，一个元素要么自己组织内容并计算自己的大小，要么自己计算内容，所以使用hasLayout=true/false来避免这种矛盾，当hasLayout=true时，相当于元素生成一个新的BFC，元素会组织计算自己的内容；当hasLayout=false时，不会产生新的BFC，只能由元素内容支持如何设置hasLayout值为true？显示：内联块；高度：值；宽度：值；浮动：左/右；位置：绝对；Reflow和Repaint（影响前端性能的源头）机制浏览器在显示页面时，会先渲染布局，而布局是解析HTML元素，构建DOM树节点，然后解析css，构建cssTree，然后组合DomTree和CssTree，去除不可见元素，构建渲染树，然后执行回流。根据renderTree计算每个课件元素的布局，最后执行repaint通过绘制过程将每个像素渲染到屏幕上。浏览器在初始化渲染时，会进行reflow回流。本项目主要用于确定页面中各个元素在屏幕上的位置。但是每次执行回流都会触发回流和重绘，耗费大量时间和资源。1.改变element2的字体大小。更改元素框模型：marginborderpaddingwidth3。更改element4的颜色和背景属性。特殊：offsetscrollclientgetComputeedStyle机制：当修改页面元素的样式时，浏览器会在回流的同时进行缓存。如果执行了新的操作，为了获取新的样式，浏览器会检查缓存是否需要回流，这需要时间那么如何减少页面的回流和重绘呢？1.减少js逐行修改元素的样式2.离线处理DOM操作，比如克隆节点，替换源节点3.减少样式的重新计算，减少offsetscrollclient等简而言之就是减少对DOM元素的操作
