Eingehende Analyse des virtuellen DOM in Vue-View.js-php.cn

Eingehende Analyse des virtuellen DOM in Vue

Die virtuelle DOM-Technologie macht das Rendern unserer Seite effizienter, reduziert Knotenoperationen und verbessert die Leistung. In diesem Artikel erhalten Sie eine ausführliche Analyse der technischen Prinzipien von Virtual DOM und der spezifischen Implementierung des Vue-Frameworks in vue. (Teilen von Lernvideos: vue-Video-TutorialVirtual DOM的技术原理和 Vue 框架的具体实现。（学习视频分享：vue视频教程）

一、真实`DOM`和其解析流程

本节我们主要介绍真实 DOM 的解析过程，通过介绍其解析过程以及存在的问题，从而引出为什么需要虚拟DOM。一图胜千言，如下图为 webkit 渲染引擎工作流程图

Eingehende Analyse des virtuellen DOM in Vue

所有的浏览器渲染引擎工作流程大致分为5步：创建 DOM 树 —> 创建 Style Rules -> 构建 Render 树 —> 布局 Layout -—> 绘制 Painting。

第一步，构建 DOM 树：用 HTML 分析器，分析 HTML 元素，构建一棵 DOM 树；
第二步，生成样式表：用 CSS 分析器，分析 CSS 文件和元素上的 inline 样式，生成页面的样式表；
第三步，构建 Render 树：将 DOM 树和样式表关联起来，构建一棵 Render 树（Attachment）。每个 DOM 节点都有 attach 方法，接受样式信息，返回一个 render 对象（又名 renderer），这些 render 对象最终会被构建成一棵 Render 树；
第四步，确定节点坐标：根据 Render 树结构，为每个 Render 树上的节点确定一个在显示屏上出现的精确坐标；
第五步，绘制页面：根据 Render 树和节点显示坐标，然后调用每个节点的 paint 方法，将它们绘制出来。

注意点：

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

2、Render 树是 DOM 树和 CSS 样式表构建完毕后才开始构建的？ 这三个过程在实际进行的时候并不是完全独立的，而是会有交叉，会一边加载，一边解析，以及一边渲染。

3、CSS 的解析注意点？ CSS 的解析是从右往左逆向解析的，嵌套标签越多，解析越慢。

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

二、`Virtual-DOM` 基础

2.1、虚拟 `DOM` 的好处

虚拟 DOM 就是为了解决浏览器性能问题而被设计出来的。如前，若一次操作中有 10 次更新 DOM 的动作，虚拟 DOM 不会立即操作 DOM，而是将这 10 次更新的 diff 内容保存到本地一个 JS 对象中，最终将这个 JS 对象一次性 attch 到 DOM 树上，再进行后续操作，避免大量无谓的计算量。所以，用 JS 对象模拟 DOM 节点的好处是，页面的更新可以先全部反映在 JS 对象(虚拟 DOM )上，操作内存中的 JS 对象的速度显然要更快，等更新完成后，再将最终的 JS 对象映射成真实的 DOM)

1. Echter `DOM` und sein Parsing-Prozess

🎜 In diesem Abschnitt stellen wir hauptsächlich den echten DOM führt durch die Einführung seines Parsing-Prozesses und bestehender Probleme dazu, warum virtuelles DOM benötigt wird. Ein Bild sagt mehr als tausend Worte, das Bild unten ist das Workflow-Diagramm der webkit-Rendering-Engine🎜

Eingehende Analyse des virtuellen DOM in Vue 🎜🎜 Alle Arbeitsabläufe der Browser-Rendering-Engine sind grob in 5 Schritte unterteilt: Erstellen DOM-Baum –> Stilregeln erstellen –> Render-Baum erstellen –> ZeichnenGemälde. 🎜

Der erste Schritt: Erstellen Sie einen DOM-Baum: Verwenden Sie den HTML-Parser, um HTML-Elemente zu analysieren und einen DOM-Baum zu erstellen.
Der zweite Schritt: Erstellen Sie ein Stylesheet: Verwenden Sie den CSS-Parser, Analysieren Sie CSS Dateien und Inline-Stile für Elemente, um das Stylesheet der Seite zu generieren.
Der dritte Schritt besteht darin, einen Render-Baum zu erstellen: Ordnen Sie den DOM-Baum dem Stylesheet zu, um einen Render-Baum zu erstellen (Anhang). Jeder DOM-Knoten verfügt über eine Attach-Methode, die Stilinformationen akzeptiert und ein Renderobjekt (auch Renderer genannt) zurückgibt. Diese Renderobjekte werden schließlich in einem Render-Baum erstellt. Der vierte Schritt besteht darin, die zu bestimmen Knotenkoordinaten: Bestimmen Sie gemäß der Render-Baumstruktur eine genaue Koordinate, die auf der Anzeige für jeden Knoten im Render-Baum angezeigt wird.
Der fünfte Schritt besteht darin, die Seite zu zeichnen: Zeigen Sie die Koordinaten gemäß dem Render an Baum und Knoten, und rufen Sie dann jeden Knoten auf. Die Malmethode zeichnet sie.

🎜Hinweise:🎜🎜1. Der Aufbau des DOM-Baums beginnt, wenn das Dokument geladen wird? Der Aufbau des DOM-Baums ist ein schrittweiser Prozess. Um eine bessere Benutzererfahrung zu erzielen, zeigt die Rendering-Engine den Inhalt so schnell wie möglich an gesamtes HTML Der Aufbau des render-Baums und -Layouts beginnt erst, nachdem die Dokumentanalyse abgeschlossen ist. 🎜🎜2. Der Render-Baum wird erstellt, nachdem der DOM-Baum und das CSS-Stylesheet erstellt wurden? Diese drei Prozesse sind bei der tatsächlichen Ausführung nicht völlig unabhängig, sondern überlappen sich und laden, analysieren und rendern gleichzeitig. 🎜🎜3. Worauf sollten Sie beim Parsen von CSS achten? CSS wird umgekehrt von rechts nach links analysiert. Je mehr Tags verschachtelt sind, desto langsamer ist die Analyse. 🎜🎜4. Wie hoch sind die Kosten für den Betrieb des echten DOM mit JS? Wenn Sie unser traditionelles Entwicklungsmodell, natives JS oder JQ, zum Betreiben von DOM verwenden, beginnt der Browser mit dem Aufbau des DOM-Baums Scratch, um den Vorgang einmal auszuführen. In einem Vorgang muss ich 10 DOM-Knoten aktualisieren. Nachdem der Browser die erste DOM-Anfrage erhält, weiß er nicht, dass es 9 weitere Aktualisierungsvorgänge gibt, also wird er dies tun Führen Sie den Prozess sofort aus und führen Sie ihn schließlich zehnmal aus. Beispielsweise ändert sich nach der ersten Berechnung unmittelbar nach der nächsten DOM-Aktualisierungsanforderung der Koordinatenwert dieses Knotens und die vorherige Berechnung ist unbrauchbar. Das Berechnen von DOM-Knotenkoordinatenwerten usw. ist eine Leistungsverschwendung. Auch wenn die Computerhardware schrittweise aktualisiert wurde, ist der Betrieb von DOM immer noch teuer und häufige Vorgänge führen immer noch zum Einfrieren der Seite, was sich stark auf die Benutzererfahrung auswirkt🎜

2. `Virtual-DOM`-Grundlagen

2.1 Virtuelle `DOM`-Vorteile

🎜 Virtual DOM wurde entwickelt, um Probleme mit der Browserleistung zu lösen. Wenn es wie zuvor 10 Aktionen zum Aktualisieren von DOM in einem Vorgang gibt, führt das virtuelle DOM nicht sofort DOM aus, sondern aktualisiert die 10 mal Der aktualisierte diff-Inhalt wird in einem lokalen JS-Objekt gespeichert, und schließlich wird dieses JS-Objekt attch an DOM-Baum und führen Sie dann nachfolgende Vorgänge aus, um viele unnötige Berechnungen zu vermeiden. Daher besteht der Vorteil der Verwendung eines JS-Objekts zum Simulieren eines DOM-Knotens darin, dass alle Seitenaktualisierungen im JS-Objekt (virtuelle DOM ), ist die Geschwindigkeit des Betriebs des JS-Objekts im Speicher offensichtlich schneller. Nach Abschluss der Aktualisierung wird das endgültige JS-Objekt zugeordnet zum echten DOM wird dem Browser überlassen, ihn zu zeichnen. 🎜

2.2. Algorithmusimplementierung

2.2.1. Verwenden Sie `JS`-Objekte, um `DOM`-Bäume zu simulieren`JS` 对象模拟 `DOM` 树

（1）如何用 JS 对象模拟 DOM 树

例如一个真实的 DOM 节点如下：

<div>
<p>Virtual DOM</p>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<div>Hello World</div>
</div>

Nach dem Login kopieren

我们用 JavaScript 对象来表示 DOM 节点，使用对象的属性记录节点的类型、属性、子节点等。

element.js 中表示节点对象代码如下：

/**
 * Element virdual-dom 对象定义
 * @param {String} tagName - dom 元素名称
 * @param {Object} props - dom 属性
 * @param {Array<element>} - 子节点
 */
function Element(tagName, props, children) {
    this.tagName = tagName
    this.props = props
    this.children = children
    // dom 元素的 key 值，用作唯一标识符
    if(props.key){
       this.key = props.key
    }
    var count = 0
    children.forEach(function (child, i) {
        if (child instanceof Element) {
            count += child.count
        } else {
            children[i] = '' + child
        }
        count++
    })
    // 子元素个数
    this.count = count
}

function createElement(tagName, props, children){
 return new Element(tagName, props, children);
}

module.exports = createElement;</element>

Nach dem Login kopieren

根据 element 对象的设定，则上面的 DOM 结构就可以简单表示为：

var el = require("./element.js");
var ul = el('div',{id:'virtual-dom'},[  el('p',{},['Virtual DOM']),
  el('ul', { id: 'list' }, [	el('li', { class: 'item' }, ['Item 1']),
	el('li', { class: 'item' }, ['Item 2']),
	el('li', { class: 'item' }, ['Item 3'])
  ]),
  el('div',{},['Hello World'])
])

Nach dem Login kopieren

现在 ul 就是我们用 JavaScript 对象表示的 DOM 结构，我们输出查看 ul 对应的数据结构如下：

Eingehende Analyse des virtuellen DOM in Vue

（2）渲染用 JS 表示的 DOM 对象

但是页面上并没有这个结构，下一步我们介绍如何将 ul 渲染成页面上真实的 DOM 结构，相关渲染函数如下：

/**
 * render 将virdual-dom 对象渲染为实际 DOM 元素
 */
Element.prototype.render = function () {
    var el = document.createElement(this.tagName)
    var props = this.props
    // 设置节点的DOM属性
    for (var propName in props) {
        var propValue = props[propName]
        el.setAttribute(propName, propValue)
    }

    var children = this.children || []
    children.forEach(function (child) {
        var childEl = (child instanceof Element)
            ? child.render() // 如果子节点也是虚拟DOM，递归构建DOM节点
            : document.createTextNode(child) // 如果字符串，只构建文本节点
        el.appendChild(childEl)
    })
    return el
}

Nach dem Login kopieren

我们通过查看以上 render 方法，会根据 tagName 构建一个真正的 DOM 节点，然后设置这个节点的属性，最后递归地把自己的子节点也构建起来。

我们将构建好的 DOM 结构添加到页面 body 上面，如下：

ulRoot = ul.render();
document.body.appendChild(ulRoot);

Nach dem Login kopieren

这样，页面 body 里面就有真正的 DOM 结构，效果如下图所示：

Eingehende Analyse des virtuellen DOM in Vue

2.2.2、比较两棵虚拟 `DOM` 树的差异 — `diff` 算法

diff 算法用来比较两棵 Virtual DOM 树的差异，如果需要两棵树的完全比较，那么 diff 算法的时间复杂度为O(n^3)。但是在前端当中，你很少会跨越层级地移动 DOM 元素，所以 Virtual DOM 只会对同一个层级的元素进行对比，如下图所示， div 只会和同一层级的 div 对比，第二层级的只会跟第二层级对比，这样算法复杂度就可以达到 O(n)。

Eingehende Analyse des virtuellen DOM in Vue

（1）深度优先遍历，记录差异

在实际的代码中，会对新旧两棵树进行一个深度优先的遍历，这样每个节点都会有一个唯一的标记：

Eingehende Analyse des virtuellen DOM in Vue

在深度优先遍历的时候，每遍历到一个节点就把该节点和新的的树进行对比。如果有差异的话就记录到一个对象里面。

// diff 函数，对比两棵树
function diff(oldTree, newTree) {
  var index = 0 // 当前节点的标志
  var patches = {} // 用来记录每个节点差异的对象
  dfsWalk(oldTree, newTree, index, patches)
  return patches
}

// 对两棵树进行深度优先遍历
function dfsWalk(oldNode, newNode, index, patches) {
  var currentPatch = []
  if (typeof (oldNode) === "string" && typeof (newNode) === "string") {
    // 文本内容改变
    if (newNode !== oldNode) {
      currentPatch.push({ type: patch.TEXT, content: newNode })
    }
  } else if (newNode!=null && oldNode.tagName === newNode.tagName && oldNode.key === newNode.key) {
    // 节点相同，比较属性
    var propsPatches = diffProps(oldNode, newNode)
    if (propsPatches) {
      currentPatch.push({ type: patch.PROPS, props: propsPatches })
    }
    // 比较子节点，如果子节点有'ignore'属性，则不需要比较
    if (!isIgnoreChildren(newNode)) {
      diffChildren(
        oldNode.children,
        newNode.children,
        index,
        patches,
        currentPatch
      )
    }
  } else if(newNode !== null){
    // 新节点和旧节点不同，用 replace 替换
    currentPatch.push({ type: patch.REPLACE, node: newNode })
  }

  if (currentPatch.length) {
    patches[index] = currentPatch
  }
}

Nach dem Login kopieren

从以上可以得出，patches[1] 表示 p ，patches[3] 表示 ul ，以此类推。

（2）差异类型

DOM 操作导致的差异类型包括以下几种：

节点替换：节点改变了，例如将上面的 div 换成 h1;
顺序互换：移动、删除、新增子节点，例如上面 div 的子节点，把 p 和 ul 顺序互换；
属性更改：修改了节点的属性，例如把上面 li 的 class 样式类删除；
文本改变：改变文本节点的文本内容，例如将上面 p 节点的文本内容更改为 “Real Dom”；

以上描述的几种差异类型在代码中定义如下所示：

var REPLACE = 0 // 替换原先的节点
var REORDER = 1 // 重新排序
var PROPS = 2 // 修改了节点的属性
var TEXT = 3 // 文本内容改变

Nach dem Login kopieren

（3）列表对比算法

子节点的对比算法，例如 p, ul, div 的顺序换成了 div, p, ul。这个该怎么对比？如果按照同层级进行顺序对比的话，它们都会被替换掉。如 p 和 div 的 tagName 不同，p 会被 div 所替代。最终，三个节点都会被替换，这样 DOM

(1) Verwendung JS-Objekt simuliert DOM-Baum 🎜🎜

Ein echter DOM-Knoten sieht beispielsweise wie folgt aus: 🎜

var ul1 = el('div',{id:'virtual-dom'},[  el('p',{},['Virtual DOM']),
  el('ul', { id: 'list' }, [	el('li', { class: 'item' }, ['Item 1']),
	el('li', { class: 'item' }, ['Item 2']),
	el('li', { class: 'item' }, ['Item 3'])
  ]),
  el('div',{},['Hello World'])
]) 
var ul2 = el('div',{id:'virtual-dom'},[  el('p',{},['Virtual DOM']),
  el('ul', { id: 'list' }, [	el('li', { class: 'item' }, ['Item 21']),
	el('li', { class: 'item' }, ['Item 23'])
  ]),
  el('p',{},['Hello World'])
]) 
var patches = diff(ul1,ul2);
console.log('patches:',patches);

Nach dem Login kopieren

Wir verwenden JavaScript code>-Objekt stellt den DOM-Knoten dar und verwendet die Eigenschaften des Objekts, um den Typ, die Attribute, Unterknoten usw. des Knotens aufzuzeichnen. 🎜

element.js stellt den Knotenobjektcode wie folgt dar: 🎜

function patch (node, patches) {
  var walker = {index: 0}
  dfsWalk(node, walker, patches)
}

function dfsWalk (node, walker, patches) {
  // 从patches拿出当前节点的差异
  var currentPatches = patches[walker.index]

  var len = node.childNodes
    ? node.childNodes.length
    : 0
  // 深度遍历子节点
  for (var i = 0; i <p>Entsprechend den Einstellungen des <code>element</code>-Objekts ist das obige <code>DOM Die Struktur kann einfach ausgedrückt werden als: 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">function applyPatches (node, currentPatches) {
  currentPatches.forEach(currentPatch => {
    switch (currentPatch.type) {
      case REPLACE:
        var newNode = (typeof currentPatch.node === 'string')
          ? document.createTextNode(currentPatch.node)
          : currentPatch.node.render()
        node.parentNode.replaceChild(newNode, node)
        break
      case REORDER:
        reorderChildren(node, currentPatch.moves)
        break
      case PROPS:
        setProps(node, currentPatch.props)
        break
      case TEXT:
        node.textContent = currentPatch.content
        break
      default:
        throw new Error('Unknown patch type ' + currentPatch.type)
    }
  })
}

Nach dem Login kopieren