admin 管理员组

文章数量: 887006

BFC！Repaint！Reflow

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

本文标签： BFC！Repaint！Reflow

版权声明：本文标题：BFC！Repaint！Reflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1732361379h1535314.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。