BFC！Repaint！Reflow

zhoutao 发布于2019-08-29 14:05 / 487人阅读

摘要：很多人都问道是什么，为什么父元素加上定位会使得脱离文档流的子元素会自动撑开父元素是布局里的概念，是一块区域，一个容器，内部元素不管怎样的布局都不会影响到区域外的元素，加了这些属性后，父元素会被触发生成，在计算本身的宽高时，内部元素都会被解

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

GPU云服务器云服务器 repaint reflow bfc bfc布局

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112910.html

【CSS基础】CSS常见概念

摘要：在中主要通过四个部分来描述，分别为。对于元素，负值会完全覆盖前一个元素，会影响后面元素一起移动对于元素，元素脱离了普通文档流，对其他元素没有影响对于元素，可以通过负值进行覆盖，最常见的应用是三列布局。浏览器渲染过程不同的浏览器渲染过程实际上并不相同，但是依旧存在相一致的部分，大致过程如下所示：showImg(https://segmentfault.com/img/bVHJfZ?w...

hsluoyz 2019-08-30 14:07 评论0 收藏0
前端知识整理1

前端知识整理，包括html/css/js，但不限于这三大类，持续更新中。本人水平有限，如有错误或更好的答案，欢迎指正，望各位不吝指教。:） 1.HTML 2.CSS 2.1 css三栏布局实现方案题目：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应 1.浮动布局实现方法：左栏、右栏分别左右浮动，定宽300px，中间不设置宽度自适应缺点：浮动元素脱离文档流，需要清除浮...

sevi_stuo 2019-08-02 16:10 评论0 收藏0
前端知识整理1

前端知识整理，包括html/css/js，但不限于这三大类，持续更新中。本人水平有限，如有错误或更好的答案，欢迎指正，望各位不吝指教。:） 1.HTML 2.CSS 2.1 css三栏布局实现方案题目：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应 1.浮动布局实现方法：左栏、右栏分别左右浮动，定宽300px，中间不设置宽度自适应缺点：浮动元素脱离文档流，需要清除浮...

or0fun 2019-08-30 15:43 评论0 收藏0
前端知识整理1

前端知识整理，包括html/css/js，但不限于这三大类，持续更新中。本人水平有限，如有错误或更好的答案，欢迎指正，望各位不吝指教。:） 1.HTML 2.CSS 2.1 css三栏布局实现方案题目：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应 1.浮动布局实现方法：左栏、右栏分别左右浮动，定宽300px，中间不设置宽度自适应缺点：浮动元素脱离文档流，需要清除浮...

pubdreamcc 2019-08-23 16:43 评论0 收藏0
浏览器渲染那些事之 Reflow、Repaint

摘要：原文链接浏览器渲染那些事之浏览器内核渲染引擎在各个浏览器厂商你追我赶的形势下，截止今日，产生了很多不同的浏览器，各个浏览器本质大同小异，核心部分基本相似，由渲染引擎和引擎组成。原文链接浏览器渲染那些事之 Reflow、Repaint 浏览器内核（渲染引擎）在各个浏览器厂商你追我赶的形势下，截止今日，产生了很多不同的浏览器，各个浏览器本质大同小异，核心部分基本相似，由渲染引擎和 J...

morgan 2019-08-29 12:19 评论0 收藏0