虛擬dom原理指的是什么-創(chuàng)新互聯(lián)
這篇文章給大家分享的是有關(guān)虛擬dom原理指的是什么的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。
虛擬dom原理： 當(dāng)用原生js或jquery等庫去操作DOM時(shí)，瀏覽器會(huì)從構(gòu)建DOM樹開始講整個(gè)流程執(zhí)行一遍，所以頻繁操作DOM會(huì)引起不需要的計(jì)算，導(dǎo)致頁面卡頓，影響用戶體驗(yàn)，而Virtual DOM能很好的解決這個(gè)問題。
虛擬dom原理：
1. 為什么需要虛擬DOM
先介紹瀏覽器加載一個(gè)網(wǎng)頁需要經(jīng)歷那些過程；我們只討論頁面解析流程，不考慮網(wǎng)絡(luò)請(qǐng)求過程。
瀏覽器內(nèi)核拿到html文件后，大致分為一下5個(gè)步驟：
解析html元素，構(gòu)建dom 樹
解析CSS，生成頁面css規(guī)則樹（Style Rules）
將dom樹 和 css規(guī)則樹關(guān)聯(lián)起來，生成render樹
布局（layout/ reflow），瀏覽器會(huì)為Render樹上的每個(gè)節(jié)點(diǎn)確定在屏幕上的尺寸、位置
繪制Render樹，繪制頁面像素信息到屏幕上，這個(gè)過程叫paint
當(dāng)你用原生js 或jquery等庫去操作DOM時(shí)，瀏覽器會(huì)從構(gòu)建DOM樹開始講整個(gè)流程執(zhí)行一遍，所以頻繁操作DOM會(huì)引起不需要的計(jì)算，導(dǎo)致頁面卡頓，影響用戶體驗(yàn)。而Virtual DOM能很好的解決這個(gè)問題。它用javascript對(duì)象表示virtual node(VNode)，根據(jù)VNode 計(jì)算出真實(shí)DOM需要做的最小變動(dòng)，然后再操作真實(shí)DOM節(jié)點(diǎn)，提高渲染效率。
2. Virtual DOM
虛擬DOM用javascript對(duì)象來表示VNode，VNode的結(jié)構(gòu)如下：
虛擬節(jié)點(diǎn)（vNode）結(jié)構(gòu)
下面是虛擬DOM的算法流程圖：
虛擬DOM算法流程圖
React Diff算法
高效的diff算法能夠保證進(jìn)行對(duì)實(shí)際的DOM進(jìn)行最小的變動(dòng)。但是標(biāo)準(zhǔn)的的 Diff 算法復(fù)雜度需要 O(n^3)，這顯然無法滿足性能要求。要達(dá)到每次界面都可以整體刷新界面的目的，勢(shì)必需要對(duì)算法進(jìn)行優(yōu)化。React里結(jié)合 Web 界面的特點(diǎn)做出了兩個(gè)簡單的假設(shè)，使得 Diff 算法復(fù)雜度直接降低到 O(n)。
1. 兩個(gè)相同組件產(chǎn)生類似的 DOM 結(jié)構(gòu)，不同的組件產(chǎn)生不同的 DOM 結(jié)構(gòu)；
2. 對(duì)于同一層次的一組子節(jié)點(diǎn)，它們可以通過的 id 進(jìn)行區(qū)分。
算法上的優(yōu)化是 React 整個(gè)界面 Render 的基礎(chǔ)，保證了整體界面渲染的性能。
不同節(jié)點(diǎn)類型的比較
為了在樹之間進(jìn)行比較，我們首先要能夠比較兩個(gè)節(jié)點(diǎn)，在 React 中即比較兩個(gè)虛擬 DOM 節(jié)點(diǎn)，當(dāng)兩個(gè)節(jié)點(diǎn)不同時(shí)，應(yīng)該如何處理。這分為兩種情況：（1）節(jié)點(diǎn)類型不同 ，（2）節(jié)點(diǎn)類型相同，但是屬性不同。
節(jié)點(diǎn)類型不同：直接刪除原節(jié)點(diǎn)， 插入新節(jié)點(diǎn)。
React 的 DOM Diff 算法實(shí)際上只會(huì)對(duì)樹進(jìn)行逐層比較，兩棵樹只會(huì)對(duì)同一層次的節(jié)點(diǎn)進(jìn)行比較如下所述。
dom樹
React 只會(huì)對(duì)相同顏色方框內(nèi)的 DOM 節(jié)點(diǎn)進(jìn)行比較，即同一個(gè)父節(jié)點(diǎn)下的所有子節(jié)點(diǎn)。當(dāng)發(fā)現(xiàn)節(jié)點(diǎn)已經(jīng)不存在，則該節(jié)點(diǎn)及其子節(jié)點(diǎn)會(huì)被完全刪除掉，不會(huì)用于進(jìn)一步的比較。這樣只需要對(duì)樹進(jìn)行一次遍歷，便能完成整個(gè) DOM 樹的比較。
相同類型節(jié)點(diǎn)的比較
React 會(huì)對(duì)屬性進(jìn)行重設(shè)從而實(shí)現(xiàn)節(jié)點(diǎn)的轉(zhuǎn)換。
感謝各位的閱讀！關(guān)于“虛擬dom原理指的是什么”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
當(dāng)前題目：虛擬dom原理指的是什么-創(chuàng)新互聯(lián)
URL分享：http://m.jiaotiyi.com/article/djigph.html