重排与重绘
当浏览器下载完页面中的所有组件（HTML标签、Javascript、CSS、图片）之后就会解析并生成两个内部数据结构
- DOM树 --- 表示页面结构
- 渲染树 --- 表示DOM节点如何显示
DOM树中的每个需要显示的节点在渲染树中至少存在一个对应的节点(隐藏的DOM元素在选人数中没有对应的节点)，渲染树中的节点被称为"帧(frames)"或"盒(boxes)",符合CSS模型的定义，理解页面元素为一个具有内边距(padding)，外边距(margins)，边框（border），和位置的盒子，一旦DOM和渲染树构建完成，浏览器就会开始显示(绘制"paint")页面元素
重排
当DOM的变化影响元素的几何属性(宽和高)：改变边框高度或段落增加文字，导致行数增加（浏览器需要重新计算元素的几何属性），同样其他几何属性和位置也会因此受到影响。浏览器会使渲染树中影响的部分失效，并重新构造渲染树,这个过程称之为重排(reflow)
- 产生重排的情况：
- 添加删除可见的DOM元素
- 元素位置发生改变
- 元素尺寸发生改变(包括：外边距、内边距、边框厚度、宽度、高度等属性改变)
- 内容改变,例如：文本改变或者图片被另外一个不同尺寸的图片替代
- 页面渲染器初始化
- 浏览器窗口尺寸改变
根据改变的范围和程度，渲染树种或大或小的而对应的部分也需要重新计算，有些会触发整个页面的重排 如：当滚动条出现
重绘
完成重排后，浏览器会重新绘制受影响的部分到屏幕中,该过程称之为"重绘(repaint)"
- 产生重排的情况：
- 改变颜色
- 改变图片（同尺寸）
渲染树变化的排队与刷新
由于每次重排都会产生计算消耗，大多数浏览器通队列化修改并批量执行来优化重排过程，然而，有些时候会经常不知不觉强制刷新队列并要求计划任务立刻执行。获取布局信息的操作都会导致列队刷新，比如以下方法：
- offsetTop, offsetLeft,offsetWidth,offsetHeight
- scrollTop, scrollLeft,scrollWidth,scrollHeight
- clientTop, clientLeft,clientWidth,clientHeight
- getComputedStyle(ele).styleKey Ele.getBoundingClientRect()
以上方需要返回最新布局信息，因此浏览器不得不执行渲染队列中的“待处理变化” 并处罚重排以返回正确的值，修改样式过程最好避免使用以上列出的属性。它们都会刷新渲染队列，即使你是在获取最近未发生改变或者与最新改变无关的布局信息
最小化重排和重绘
-
通过el.style.cssText来批量处理dom更改
el.style.cssText = 'boder-left:1px;border-right:2px;padding:5px'
//增加样式的时候只需要
el.style.cssText+= ';border-left:1px;'
-
批量修改DOM
-
使元素脱离文档流
-
修改
-
将元素带回文档中
-
有三种基本方法可以使DOM脱离文档
- 隐藏元素，应用修改，重新显示
- 文档片段(document fragment) 构建子树处理好再带回原文档中
- 将元素拷贝到一个脱离文档的节点中，修改副本，再替换原始元素
-
-
- 缓存布局信息避免重复获取导致产生的重排
var current = ele.offsetLeft; ele.style.left= current++ + 'px'; - 元素脱离动画流
- 使用绝对位置定位页面上的动画元素，使其脱离文档流
- 让元素动起来。当它扩大时，会临时覆盖部分页面，这只是一小区域重绘过程，不会产生重排并重绘页面大部分内容。
- 当动画结束时恢复定位
网友评论