16、render树、解析和加载、回流和重绘

解析和加载

• 加载是一个异步的过程 ，例如图片的请求渲染不会影响整个html的加载和渲染

解析的过程

• 形成dom tree ，render tree是个对象
• 形成css tree，根据样式表形成样式tree
• 将dom tree和css tree有机结合起来形成render tree
• render tree构建完毕后，开始渲染页面
• display none的元素、head、script元素不会包含在render tree里。

回流和重绘

• 回流：当页面的布局发生变化，渲染页面时，计算布局位置的过程叫做回流。
• 重绘：所有的回流操作，都会导致相关元素进行重绘。
  • 仅改变颜色及其他不影响元素物理变化的行为，会只导致重绘。
• 引起回流的操作有：
  • 页面首次加载、渲染、
  • 布局变化(增加或删除元素)、
  • display: none、visibility: hidden;不会引起回流，只会引起重绘
  • 边距、
  • 位置、
  • 大小(包括字体大小)
  • 页面渲染初始化
  • 改变浏览器窗口大小
  • 请求offset、client、scroll、width、height、getComputedStyle或ie的currentStyle等
• 引起回流的特征是元素发生了物理性变化
  • 回流比重绘更影响浏览器的性能
  • 如果在body子元素最前面添加元素，会导致整个页面重新渲染
  • 如果在body子元素最后面添加元素，只会绘制最后面的元素
  • 如果父节点发生回流，会导致所有子节点回流+重绘。
• 优化：
  • 减少回流的次数，尽量避免单个css属性挨个去处理。
    • 较好的方式是修改classname
    • 使用documentFragment或新创建的div对数据进行缓存，最后append到body中。
      • 如var fragment = document.createDocumentFragment();
      • fragment.appendChild(多个新创建的div);
      • document.body.append(fragment);
    • 使用el.style.cssText = 'width:' + wNum + 'px; height:' + hNum + 'px;';
    • 将元素的display设置为none，然后对元素的样式随意设置，最后将display设置为'block';
  • 减少回流影响的规模
    • 尽可能的在末尾添加或删除元素
  • 浏览器队列机制
    • 较新的浏览器会将多次回流操作放置到队列中，在固定的时间内刷新队列，批量执行回流操作，减少回流次数。
    • 当访问offset、client等属性时，会强制浏览器刷新队列(这样浏览器才能获取到精确的样式值)，因此尽量避免重复调用el.offset，要将其进行变量缓存。如果el.offset是动态变化的，使用getComputedStyle要比el.offset性能更好。
  • 动画相关
    • 要使用绝对定位动态操作top left等值，这样父级元素不会引起回流重绘
    • 但使用margin会导致父级元素回流和重绘。
  • table
    • 使用table元素性能要比其他元素差很多，属于弹性元素，内部封装了较多的东西，容易引起页面回流。