BFC
很多人都问道BFC是什么,为什么父元素加上overflow:hidden/定位/inline-block会使得脱离文档流的子元素会自动撑开父元素?
- BFC
BFC是css布局里的概念,是一块区域,一个容器,内部元素不管怎样的布局都不会影响到区域外的元素,加了这些属性后,父元素会被触发生成BFC,在计算本身的宽高时,内部元素都会被解析到,此时父元素的宽高就会被撑开。
- hasLayout
hasLayout其实就是IE567的BFC,是i.e.浏览器特有的;
在IE中,一个元素要么自己对自身内容进行组织和尺寸计算,要么由自身内容自行撑开计算,所以采用hasLayout=true/false来避免这种矛盾,当hasLayout=true时,相当于元素产生新的BFC,那元素就会对自身内容进行组织和计算;当hasLayout=false时,就不会产生新的BFC,只能通过元素内容自行撑开
那如何将hasLayout值设为true?
display:inline-block;
height:值;
width:值;
float:left/right;
position:absolute;
Reflow 和 Repaint(影响前端性能的本源)
- 机制
浏览器在显示页面的时候,会先布局在进行渲染,布局则是解析HTML各个元素,构建DOM树节点,再解析css,构建cssTree,然后组合DomTree和CssTree,去除不可见元素,构建render树,再执行reflow回流,根据renderTree计算每个课件元素的布局,最后执行repaint通过绘制流程,将每个像素渲染到屏幕上
浏览器初始化渲染是都会执行一次reflow回流,这个工程主要是用来确定页面上每个元素在屏幕上的集合位置、属性,但每次执行一次reflow都会话费大量时间,消耗大量资源
- 如何触发reflow 和 repaint呢?
1、改变元素的font-size
2、改变元素盒模型:marginborderpaddingwidth
3、改变元素颜色、背景属性
4、特殊:offsetscrollclientgetComputeedStyle
机制:在修改页面元素样式的时候,浏览器会边reflow边缓存,如果执行新操作,为了得到新样式,浏览器会检查缓存是否需要reflow,这样就会耗时
- 那应该如何减少页面的回流和重绘呢?
1、减少js逐行修改元素的样式
2、离线处理DOM操作,如克隆节点,进行源节点替换
3、减少样式的重新计算,减少offsetscrollclient等
总之,减少操作DOM元素就行
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。