vue源码学习-虚拟dom

真实dom和其解析流程

浏览器渲染引擎工作流程都差不多，大致分为5步，创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting

第一步，用HTML分析器，分析HTML元素，构建一颗DOM树(标记化和树构建)

第二步，用CSS分析器，分析CSS文件盒元素上的inline样式，生成页面样式表

第三步，将DOM树和样式表，关联起来，构建一棵Render树(这一过程又称为Attachment)。每个DOM节点都有attach方法，接受样式信息，返回一个render对象(又名renderer)。这些render对象最终会被构建成一棵render树。

第四步，有了Render树，浏览器开始布局，为每个Render树上的节点确定一个在显示屏上出现精确的坐标。

第五步，Render树和节点显示坐标都有了，就调用每个节点paint方法，把它们绘制出来。

DOM树的构建是文档加载完成开始的？构建DOM树是一个渐进的过程，为了用户体验，渲染引擎会尽快将内容显示在屏幕上。它不必等到整个HTML文档解析完毕之后才开始构建render树和布局。

Render树是DOM树和CSSOM树构建完毕后才开始构建的吗？这三个过程在实际进行的时候又不是完全独立，而是会有交叉。会造成一边加载，一边解析，一边渲染的工作现象。

CSS解析是从右往左逆向解析的(从DOM树的下-上解析比上-下解析效率高)，嵌套标签越多，解析越慢。

JS操作真实DOM的代价

用我们传统的开发模式，原生js或JQ操作DOM时，浏览器会从构建DOM树开始从头到尾的执行一遍流程。在一次操作中，我们需要更新10个DOM节点，浏览器收到第一个DOM请求后并不知道还有9次更新操作，因此会马上执行流程，最终执行10次。例如，第一次计算完，紧接着下一个DOM更新请求，这个节点的坐标值就变了，前一次计算为无用工。计算DOM节点坐标值等都是拜拜浪费的性能。即使计算机硬件一直在迭代更新，操作DOM的代价仍旧是昂贵的，频繁操作还是会出现页面卡顿，影响用户体验。

为什么需要虚拟DOM，它有什么好处？

web界面由DOM树（树的意思是数据结构来构成），当其中一部分发生变化时，起始就是对应某个DOM节点发生了变化，虚拟DOM就是为了解决浏览器性能问题而被设计出来的。如前，若一次操作中有10更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这10次更新的diff内容保存到本地的一个JS对象中，最终将这个js对象一次性attch到DOM树上，在进行后续的操作，避免大量无所谓的计算量。所以，用JS对象模拟DOM节点的好处是，页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制。

实现虚拟DOM

例如一个真实的DOM节点

<div id="real-container">
  <p>Real DOM</p>
  <div>cannot update</div>
  <ul>
    <li className="item">Item 1</li>
    <li className="item">Item 2</li>
    <li className="item">Item 3</li>
  </ul>
</div>

使用JS来模拟DOM节点实现虚拟DOM

cont tree = Element('div',{id: 'virtual-container},[
    Elemet('p',{},['Virtual DOM']),
    Element('div',{},['before update']),
    Element('ul',{},[
      Element('li',{class: 'item'},['Item 1']),
      Element('li',{class: 'item'},['item 2']),
      Element('li',{class: 'Item'},['Item 3'])
    ])
  ]
)
const root tree.render()
document.getElmentById('virtualDom').appendChild(root)

其中Element方法具体怎么实现的呢？

function Element(tagName,props,children) {
        console.log(this)
        if (!(this instanceof Element)) {
            return new Element(tagName, props, children)
        }
        this.tagName = tagName
        this.props = props || {}
        this.children = children || []
        let count = 0
        this.children.forEach((child) => {
            if (child instanceof Element) {
                count+=child.count
            }
            count++
        })
        this.count = count
    }

第一个参数是节点名(如div)，第二个参数是节点的属性(如class)，第三个参数是子节点(如ul的li)。除了这三个参数会被保存在对象上外，还保存了key和count。其相当于想成了虚拟DOM树。

有了JS对象后，最终还需要将其映射成真实的dom

Element.prototype.render = function(){
  const el = document.createElement(this.tagName)
  const props = this.props
  for(const propName in props){
    setAttr(el, propName, props[propName])
  }
  this.children.forEach((child) => {
    const childEl = (child instanceof Element) ? child.render():document.createTextNode(child)
  })
}

我们已经完成了创建虚拟DOM并将其映射成真实DOM，这样所有的更新都可以先反应在虚拟DOM上，如何反应？需要用到diff算法

vue核心之虚拟DOM（vdom）

在实际代码中，会对新旧两棵树进行一个深度的遍历，每个节点都会有一个标记，每遍历到一个节点就把该节点和新的树进行对比，如果有差异就记录到一个对象中。下面我们创建一个树，用于和之前的树进行比较，来看看diff算法是怎么操作的。

diff操作

在实际代码中，会对新旧两棵树进行一个深度的遍历，每个节点都会有一个标记。每到一个节点就把该节点和新的树进行对比，如果有差异就记录到一个对象中。

下面我们创建一个新树，用于和之前的树进行比较，来看看diff算法是怎么操作的。
old tree

const tree = Elment('div',{id: 'virtural-container'},[
  Element('p',{},['Virtual Dom']),
  Element('div',{},['before update']),
  Element('ul',{},[
    Element('li',{class:'item'},['Item 1']),
    Element('li',{class:'item'},['Item 2']),
    Element('li',{class:'item'},['Item 3'])
  ])
])
const root = tree.render()
doucument.getElementById('virtualDom').appendChild(root)

new tree

const tree = Elment('div',{id: 'virtural-container'},[
  Element('h3',{},['Virtual Dom']), // REPLACE
  Element('div',{},['after update']), // TEXT
  Element('ul',{calss: 'marginLeft10'},[ //PROPS
    Element('li',{class:'item'},['Item 1']),
    // Element('li',{class:'item'},['Item 2']), // REORDER remove
    Element('li',{class:'item'},['Item 3'])
  ])
])

平层diff，只有一下4种情况：

节点类型变了例如下图中的p变成了h3。我们将这个过程称之为REPLACE。直接将旧节点卸载并装载新节点。旧节点包括下面的子节点都将被卸载，如果心机诶单和旧节点仅仅是类型不同，但下面的所有子节点都一样时，这样做的效率不高。但为了避免O(n^3)的时间复杂度，这样时值得的。这样提醒了开发者，应该避免无谓的节点类型的变化，例如运行时将div变成p没有意义。
节点类型一样，仅仅属性或属性值变了。我们将这个过程称之为PROPS,此时不会触发节点卸载和装载，而是节点更新。

function diffProps(oldNode,newNode){
  const oldProps = oldNode.props
  const newProps = newOld.props
  let key
  const propsPatches = {}
  let isSame = true
  for(key in oldProps) {
    if(newProps[key] !== oldProps[key]) {
      isSame = false
      propsPatches[key] = newProps[key]
    }
  }
  for(key in newProps) {
    if(!oldProps.hasOwnProperty(key)){
      isSame = false
      propsPatches[key] = newProps[key]
    }
  }
  return isSame? null : propsPatches
}

文本变了，文本也是一个Text Node,也比较简单，直接修改文字内容就行了，我们将这个过程称之为TEXT。
移动/增加/删除子节点我们将这个过程称为REORDER。看一个例子，在A、B、C、D、E五个节点的B和C中的BC两个节点中间加入一个F节点。

我们简单粗暴的做法是遍历每一个新虚拟DOM的节点，与旧虚拟DOM对比相应节点对比，在旧DOM中是否存在，不同就卸载原来的安上新的。这样会对F后边每一个节点进行操作。卸载C，装载，卸载D，装载C，卸载E，装载D，装载E。效率太低。

如果我们在JSX里为数组或枚举型元素增加上key后，它能够根据key，直接找到具体位置进行操作，效率比较高。常见的最小编辑距离问题，可以用Levenshtein Distance算法来实现，时间复杂度是O(M*N),但通常我们只要一些简单的移动就能满足需要，降低精确性，将时间复杂度降低到O(max(M,N))即可。

映射成真实DOM

虚拟DOM有了，diff有了，现在就可以将diff应用到真实DOM上了，深度遍历DOM将diff的内容更新进去。

function dfsWalk(node,walker,patches) {
  const currentPatches = patches[walker.index]
  const len = node.childNodes? node.childNodes.length:0
  for(let i = 0; i< len;i++){
    walker.index++
    dfsWalk(node.childNodes[i],walker,patches)
  }
  if(currentPatches){
    applyPatches(node,currentPatches)
  }
}

function applyPatches(node, currentPatches) {
  currentPatches.forEach((currentPatch) => {
    switch (currentPatch.type) {
      case REPLACE:{
        const newNode = (typeof currentPatch.node === 'string')?document.createTextNode(currentPatch.node):node.patentNode.replaceChild(newNode,node)
        break;
      }
      case REORDER:
      reorderChildren(node, currentPatch.moves)
      break
      case PROPS:
      setProps(node,currentPatch.props)
      break
      case TEXT:
      if(node.textContent) {
        node.textContent = currentPatch.content
      } else {
        node.nodeValue = currentPatch.content
      }
      break
      default:
      throw new Error(`unknown patch type ${currentPatch.type}`)
    }
  })
}

我们会有两个虚拟DOM（js对象，new/old进行比较diff），用户交互我们操作数据变化new虚拟DOM，old虚拟DOM会映射成实际DOM（js对象生成的dom文档）通过DOM fragment操作给浏览器渲染。当修改new虚拟dom，会把newDom和oldDOM通过diff算法比较，得出diff结果数据表(用4中变换情况表示)。在把diff结果表通过DOM fragmeng更新到浏览器DOM中

虚拟DOM的存在的意义

vdom的真正意思是为了实现跨平台，服务端渲染，以及提供一个性能还算不错的dom更新策略。vdom让整个mvvm框架灵活起来。

diff算法只是为了虚拟DOM比较替换效率更高，通过diff算法得到diff算法结果数据表(需要进行哪些操作记录表)。原本操作的DOM在vue这边还是要操作的，子不过用到了js的DOM fragment来操作dom(统一计算出所有变化后统一更新一次DOM)进行浏览器DOM一次性更新。起始DOM fragment我们不用平时开发也能用，但是这样程序员写业务代码就用把DOM操作放到fragment里，这就是框架的价值，程序员才能专注于写业务代码。

了解vue虚拟DOM的参考——snabbdom.js

如果要我们自己去四线一个虚拟dom，大概过程应该有以下三步

compile，如何把真实DOM编译成vnode
diff，我们要如何知道oldVnode和newVnde之间的变化。
patch，如果把这些变化用打补丁的方式更新到真实的dom上去。

posted @ 2022-04-06 22:38 upupupupupgo 阅读(40) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

upupupupupgo