- 浏览器使用流式布局模型 (Flow Based Layout)。
- 浏览器会把
HTML
解析成DOM
,把CSS
解析成CSSOM
,DOM
和CSSOM
合并就产生了Render Tree
。
- 有了
RenderTree
,我们就知道了所有节点的样式,然后计算他们在页面上的大小和位置,最后把节点绘制到页面上。
- 由于浏览器使用流式布局,对
Render Tree
的计算通常只需要遍历一次就可以完成,但table
及其内部元素除外,他们可能需要多次计算,通常要花3倍于同等元素的时间,这也是为什么要避免使用table
布局的原因之一。
回流/重排
回流的基本概念
当Render Tree
中部分或全部元素的尺寸、结构、或某些属性发生改变时,浏览器重新渲染部分或全部文档的过程称为回流。
会引起浏览器回流的操作
- 页面首次渲染
- 浏览器窗口大小发生改变
- 元素尺寸或位置发生改变
- 元素内容变化(文字数量或图片大小等等)
- 元素字体大小变化
- 添加或者删除可见的DOM元素
- 激活CSS伪类(例如:
:hover
)
- 查询某些属性或调用某些方法,比如说:
offsetTop
(当前元素相对于其 offsetParent 元素的顶部内边距的距离)、
offsetLeft
(当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界偏移的像素值)、 offsetWidth
、
offsetHeight
、
scrollTop
(对象最顶端和窗口中可见内容最顶端之间的距离)、
scrollLeft
(对象左边界和窗口中目前可见内容最左端之间的距离)、
scrollWidth
(对象的滚动宽度)、
scrollHeight
(对象的滚动高度)、
clientTop
(元素顶部边框的高度)、
clientLeft
、
clientWidth
、
clientHeight
除此之外,当我们调用getComputedStyle
方法,或者IE里的currentStyle
时,也会触发回流,原理是一样
重绘
重绘的概念
当页面中元素样式的改变并不影响它在文档流中的位置时(例如:color
、background-color
、visibility
等),浏览器会将新样式赋予给元素并重新绘制它,这个过程称为重绘。
浏览器优化机制
现代的浏览器都是很聪明的,由于每次重排都会造成额外的计算消耗,因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程。浏览器会将修改操作放入到队列里,直到过了一段时间或者操作达到了一个阈值,才清空队列。但是!当你获取布局信息的操作的时候,会强制队列刷新,比如当你访问以下属性或者使用以下方法:
offsetTop、offsetLeft、offsetWidth、offsetHeight
scrollTop、scrollLeft、scrollWidth、scrollHeight
clientTop、clientLeft、clientWidth、clientHeight
getComputedStyle()
getBoundingClientRect
如何减少回流和重绘
- 合并多次对DOM和样式的修改
- 批量修改DOM
使元素脱离文档流;对其进行多次修改;将元素带回到文档中
- 避免触发同步布局事件
避免频繁读取会引发回流/重绘的属性,如果确实需要多次使用,就用一个变量缓存起来。
- 对具有复杂动画的元素使用绝对定位,使它脱离文档流,否则会引起父元素及后续元素频繁回流。
- 尽量避免使用table布局、避免使用CSS表达式(如
calc()
)
- 尽可能再DOM树的最末端改变
class
隐藏元素的方法
●display: none
:渲染树不会包含该渲染对象,因此该元素不会在页面中占据位置,也不会响应绑定的监听事件。
● visibility: hidden
:元素在页面中仍占据空间,但是不会响应绑定的监听事件。
● opacity: 0
:将元素的透明度设置为 0,以此来实现元素的隐藏。元素在页面中仍然占据空间,并且能够响应元素绑定的监听事件。
● position: absolute
:通过使用绝对定位将元素移除可视区域内,以此来实现元素的隐藏。
● z-index: 负值
:来使其他元素遮盖住该元素,以此来实现隐藏。
● clip/clip-path
:使用元素裁剪的方法来实现元素的隐藏,这种方法下,元素仍在页面中占据位置,但是不会响应绑定的监听事件。
● transform: scale(0,0)
:将元素缩放为 0,来实现元素的隐藏。这种方法下,元素仍在页面中占据位置,但是不会响应绑定的监听事件。
学习参考
1.浏览器的回流与重排
2.你真的了解回流和重绘吗