前言

先介紹一個概念Virtual Dom，我猜大家或多或少都應該知道什么是Virtual Dom吧，簡單來說就是用js來模擬DOM中的節點。

Virtual Dom

下面就是一個Virtual Dom的結構，包含了標簽名，擁有的屬性，孩子節點，render函數

class Element {constructor(tagName, attrs, children) {this.tagName = tagName;this.attrs = attrs || {};this.children = children || [];}render () {//這個函數是用來生成真實DOM的，最后會把return的結果添加到頁面中去 } }

創建一棵個Virtual Dom Tree && 渲染

/** <ul id="list"><li class="a">txt_a</li><li class="a">txt_b</li> </ul> **/ //根據上面結構可以用一下方式創建一棵 Virtual Dom Tree let ul = Element('ul', { id: 'list' }, [Element('li', { class: 'a' }, ['txt_a']),Element('li', { class: 'b' }, ['txt_b']) ]);//ul 就是一棵個Virtual Dom Tree let ulDom = ul.render();//生成真實Dom document.body.appendChild(ulDom);//添加到頁面中

以上就是Virtual Dom Tree如何被轉換成真實Dom并添加到網頁中的過程，再這個過程中我把render函數給省略，只是為了讓你們先了解原理，具體實現可以以后再深究。我學一個東西的時候，習慣是先把整體原理弄清楚，再去深入學習相關的知識。

Diff 算法

在介紹Diff算法之前，再次聲明我只會列舉Diff算法中會用到的函數，并串聯它們之間的關系并不會給出具體實現的代碼

介紹

diff算法是進行虛擬節點Element的對比，并返回一個patchs對象，用來存儲兩個節點不同的地方，最后用patchs記錄的消息去局部更新Dom。

兩個樹如果完全比較的話需要時間復雜度為O(n^3)，如果對O(n^3)不太清楚的話建議去網上搜索資料。而在Diff算法中因為考慮效率的問題，只會對同層級元素比較，時間復雜度則為O(n)，說白了就是深度遍歷，并比較同層級的節點。

Diff只需下面兩句代碼

• 判斷兩棵Virtual Dom Tree 差異
• 把差異更新到真實Dom中去

let patchs = diff(oldTree, newTree);//獲取兩棵Virtual Dom Tree 差異 patch(ulDom, patchs);//找到對應的真實dom，進行部分渲染

Diff中所用到的函數

//深度遍歷樹，將需要做變更操作的取出來 //局部更新 DOM function patch(node,patchs){//代碼略 }// diff 入口，比較新舊兩棵樹的差異 function diff (oldTree, newTree) {let index = 0let patches = {} // 記錄每個節點差異的補丁dfs(oldTree, newTree, index, patches)return patches; } /*** dfs 深度遍歷查找節點差異* @param oldNode - 舊虛擬Dom樹* @param newNode - 新虛擬Dom樹* @param index - 當前所在樹的第幾層* @param patches - 記錄節點差異*/ function dfs (oldNode, newNode, index, patches){let currentPatch = [];//當前層的差異對比if (!newNode) {//如果節點不存不用處理，listdiff函數會處理被刪除的節點}else if (isTxt(oldNode) && isTxt(newNode)) {//isTxt用來判斷是否是文本，為了簡便這邊并沒有聲明if (newNode !== oldNode) currentPatch.push({ type: "text", content: newNode })//如果發現文本不同，currentPatch會記錄一個差異 }else if(oldNode.tagName === newNode.tagName && oldNode.key === newNode.key){//如果發現兩個節點一樣 則去判斷節點是屬性是否一樣，并記錄下來let attrsPatches = diffAttrs(oldNode, newNode)if (attrsPatches) {//有屬性差異則把差異記錄下來currentPatch.push({ type: "attrs", "attrs": attrsPatches })}// 遞歸遍歷子節點，并對子節點進行diff比較diffChildren(oldNode.children, newNode.children, index, patches)}else{//最后一種情況是，兩個節點完全不一樣，這樣只需要把舊節點之間替換就行//把當前差異記錄下來currentPatch.push({ type: "replace", node: newNode})}//如果有差異則記錄到當前層去if (currentPatch.length) {if (patches[index]) {patches[index] = patches[index].concat(currentPatch)} else {patches[index] = currentPatch}} } //判斷兩個節點的屬性差異 function diffAttrs(oldNode, newNode){let attrsPatches = {};//記錄差異let count = 0;//記錄差異的條數/**代碼略判斷兩個節點的屬性差異的代碼就略了，讓你們知道這里的代碼就是判斷兩個節點的屬性有哪些差異，如果有差異就記錄在attrsPatches這個對象中，并把它返回**/if(0 == count){return null;}else {return attrsPatches; } } //判斷孩子節點 function diffChildren(oldChild, newChild, index, patches){let { changes, list } = listDiff(oldChild, newChild, index, patches);if (changes.length) {//如果有差異則記錄到當前層去if (patches[index]) {patches[index] = patches[index].concat(changes);} else {patches[index] = changes;}}// 代碼略//遍歷當前數組oldChild && oldChild.forEach((item, i) => {// 代碼略let node;// 經過判斷后node節點是同時存在于oldChild 和 newChild中//則對節點進行遞歸遍歷 相當于 進入下一層 節點，let curIndex；dfs(item, node, curIndex, patches);// 代碼略})}//判斷oldNodeList, newNodeList 節點的位置差，主要是為了判斷哪些節點被移動、刪除、新增。 function listDiff(oldNodeList, newNodeList, index){let changes = [];//記錄 oldNodeList, newNodeList節點的位置差異，是被移動、刪除、新增let list = [];//記錄 oldNodeList，newNodeList 同時存在的節點/**具體判斷邏輯的代碼就略了**/return {changes,list}; }

如果大家對函數之間的調用還不明白的話可以看下面的圖

最后

Virtual Dom 算法的實現也就是以下三步

• 通過 JS 來模擬生成 Virtual Dom Tree
• 判斷兩個 Tree 的差異
• 渲染差異

上面省略了很多代碼，主要是為了讓大家快速了解Dom diff 的基本原理和流程，如果想更深入的了解，可以在網上查閱相關資料。

總結

以上是生活随笔為你收集整理的做diff_Virtual Dom amp;amp; Diff原理，极简版的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。