BFC!Repaint!Reflow

 阅读约 3 分钟

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元素就行

阅读 855更新于 2017-12-21

推荐阅读
前端
用户专栏

不再收起身后的羽翼,像那跨越七海的风一般,在碧蓝的未来描绘我的梦想

41 人关注
43 篇文章
专栏主页
目录