虚拟dom与直接操作dom

虚拟dom

document.createDocumentFragment()创建虚拟dom，然后再将虚拟dom替换掉原dom

直接操作dom

直接利用innerHTML或者style改变dom结构，频繁操作则会影响性能.

逐帧操作dom

使用window.requestAnimationFrame()，浏览器在下一次重绘之前调用你传入给该方法的函数。回调函数执行次数通常是每秒60次，但在大多数遵循W3C建议的浏览器中，回调函数执行次数通常与浏览器屏幕刷新次数相匹配。
window.requestAnimationFrame()执行后会返回一个id，如果要清除该事件则使用cancelAnimationFrame(id)
利用raf实现动画，walking dog

dog.gif

    <div ref="dog"
         class="dog">&#128021;</div>
//raf实现
    let start = 0
    const w = window.innerWidth
    let tr = true
    let _this = this
    const raf = function () {
      if (start > w && tr) {
        tr = false
      }
      if (start < 0 && !tr) {
        tr = true
      }
      if (tr) {
        _this.$refs.dog.style.transform = 'rotateY(180deg)'
        start += 1
      }
      else {
        _this.$refs.dog.style.transform = 'rotateY(360deg)'
        start -= 1
      }
      _this.$refs.dog.style.left = start + 'px'
    }

    let fun = function () {
      raf()
      window.requestAnimationFrame(fun)
    }
    fun()
//animation实现
.dog {
  position: fixed;
  top: 0;
  left: 0;
  transform: rotateY(180deg);
  animation: run 20s linear infinite;//js实现时注释掉改行
}

@keyframes run {
  0% {
    left: 0;
  }
  49% {
    transform: rotateY(180deg);//防止0-50中间旋转
  }
  50% {
    left: 100%;
    transform: rotateY(0);
  }
  99% {
    transform: rotateY(0);//防止50-100中间旋转
  }
  100% {
    left: 0;
  }
}

因为js是逐帧改变，整个过程貌似更加流畅

性能比较

虚拟dom>raf>>直接操作
操作1000个节点，依次用时10s、70s、1200s
documentFragment VS requestAnimationFrame VS Direct DOM Access

performance.gif