高性能Javascript读书笔记--重排与重绘

重排与重绘

当浏览器下载完页面中的所有组件（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';
  

• 元素脱离动画流
  • 使用绝对位置定位页面上的动画元素，使其脱离文档流
  • 让元素动起来。当它扩大时，会临时覆盖部分页面，这只是一小区域重绘过程，不会产生重排并重绘页面大部分内容。
  • 当动画结束时恢复定位

结尾语： 一般来说，重排只影响渲染树中一小部分，但也可能影响很大的部分，甚至整个渲染树。浏览器所需要重排的次数越少，应用程序的响应速度就越快。重排时渲染树中需要重新结算的节点越多情况就会越糟糕，重排和重绘到时代价昂贵的操作，它们会导致web应用UI反应迟钝，所以应当尽量减少这类过程发生