写在前面
在讨论今天的主角之前，我们要先了解一下浏览器的渲染机制。以Google,Firefox,Safari为例，Firefox 使用Geoko——Mozilla 自主研发的渲染引擎，Safari 和Chrome 都使用 webkit。
我们主要以 Webkit的主流程为例
- 浏览器使用流式布局模型 (Flow Based Layout)
- 解析
HTML生成DOM树 - 解析
CSS生成CSSOM规则树 - 将
DOM树与CSSOM规则树合并在一起生成渲染树Render Tree - 根据渲染树遍历拿到每个节点开始布局，计算每个节点的位置大小信息
- 将渲染树每个节点绘制到屏幕
回流（Reflow）
上面我们知道，我们会根据 Render Tree 去遍历渲染，所以当我们的节点发生改变时，浏览器重新渲染部分节点或者全部文档，我们称这个过程为回流
大致整理会导致回流的一些操作
- 页面首次渲染
- 浏览器窗口大小发生改变
- 元素尺寸或位置发生改变
- 元素内容变化（文字数量或图片大小等等）
- 元素字体大小变化
- 添加或者删除可见的DOM元素
- 激活CSS伪类（例如：:hover）
- 查询某些属性或调用某些方法
主要有下面几个API
盒子操作相关
-
elem.offsetLeft,elem.offsetTop,elem.offsetWidth,elem.offsetHeight,elem.offsetParent -
elem.clientLeft,elem.clientTop,elem.clientWidth,elem.clientHeight -
elem.getClientRects(),elem.getBoundingClientRect()
滚动相关
-
elem.scrollBy(),elem.scrollTo() -
elem.scrollIntoView(),elem.scrollIntoViewIfNeeded() -
elem.scrollWidth,elem.scrollHeight -
elem.scrollLeft,elem.scrollTop
其他
上述主要是我们经常使用的一些API,其他还有一个api已经有热心网友帮我们整理出来了
我们可以看一下
What forces layout / reflow
重绘（Repaint）
当我们操作的节点上的元素并不导致元素位置发生变化时，比如color,background-color,visibility(注意虽然节点隐藏了，但是元素还在，并且位置也不会发生变化)
浏览器会将新的样式赋值给这些节点，我们称这个过程为重绘
影响
按照常理也很好理解，因为位置，大小等发生的回流操作相比于仅仅是颜色的变化，带给我们的视觉直观感受来说，回流是比较大的。
事实上，回流确实比重绘的成本更大，并且有时候并不是只回流一个元素，甚至会带动父元素或者子元素一起回流。
现代浏览器会对频繁的回流或重绘操作进行优化，浏览器会维护一个队列，当我们页面发生回流或重绘时，有时候并不是立即执行，而是先放入维护的队列中，到达一定时间后统一去进行绘制
当你访问以下属性或方法时，浏览器会立刻清空队列
clientWidth、clientHeight、clientTop、clientLeft
offsetWidth、offsetHeight、offsetTop、offsetLeft`
scrollWidth、scrollHeight、scrollTop、scrollLeft
width、height
getComputedStyle()
getBoundingClientRect()
所以当我们需要使用如上api获取数据时，我们要注重渲染时机以及取值时机
避免重绘与回流
- 避免使用
table布局。 - 尽可能在
DOM树的最末端改变class。 - 避免设置多层内联样式。
- 将动画效果应用到
position属性为absolute或fixed的元素上。 - 避免使用
CSS表达式（例如：calc()）。 - 避免频繁操作样式，最好一次性重写
style属性，或者将样式列表定义为class并一次性更改class属性。
-避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。 - 也可以先为元素设置
display: none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。 - 避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。
- 对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。
总结
我们把页面文档比作一个积木的话，我们抽离中间或者底部的一个积木块，我们的积木会重新找到重心并且稳固下来，我们把这个过程称之为回流
我们在某个积木上涂上颜色，这并不会造成整个积木的稳定，我们把这个过程叫做重绘
或者说，我们简单理解会引起元素位置变化的就会reflow,会引起位置变化的，只是在以前的位置进行改变背景颜色等，只会repaint
网友评论