解释下什么是虚拟DOM

·  阅读 61

解释下什么是虚拟DOM

先说说为什么有虚拟ODM 当我们操作页面浏览器会疯狂的重构和重绘,大部分的浏览器的性能都是这么消耗

虚拟DOM 分为三部,

  1. 渲染函数 ,用于生成虚拟DOM
  2. vnode 虚拟dom的数据结构完全可以做到代编一个真实的节点
  3. patch 算法 将vnode 渲染成真实的dom然后在铺在页面上

虚拟dom是啥 一个对象 vnode对象可能层级机构比较深 至少包含了三个属性 tag attr child

虚拟dom作用 最终的作用还是要渲染view,但是如果一个根节点变换的话,不至于整个dom结构全部更换,这个时候我们需要diff对比

为什么现在这么流行虚拟dom

  • 跨平台的优势,把所有的dom节点当作js之后无论是跨平台还是都会更好

  • js速度当然比原生dom快

  • 提升渲染性能 仅在同级的vnode里面进行diff ,递归进行同级的diff

diff算法实现

function createElement(vnode) {
  const { tag, attrs, children } = vnode
  const ele = document.createElement(tag)
  if(children) {
    children.forEach(item => {
      ele.appendChild(createElement(item))
    })
  }
  return ele
}

复制代码
function updateChild(vnode, newVnode) {
  var children = vnode.children || []
}

复制代码
分类:
前端
标签:
分类:
前端
标签: