先介紹瀏覽器加載壹個網頁需要經歷那些過程；我們只討論頁面解析流程，不考慮網絡請求過程。
瀏覽器內核拿到html文件後，大致分為壹下5個步驟：
1. 解析html元素，構建dom 樹
2. 解析CSS，生成頁面css規則樹（Style Rules）
3. 將dom樹 和 css規則樹關聯起來，生成render樹
4. 布局（layout/ reflow），瀏覽器會為Render樹上的每個節點確定在屏幕上的尺寸、位置
5. 繪制Render樹，繪制頁面像素信息到屏幕上，這個過程叫paint
當妳用原生js 或jquery等庫去操作DOM時，瀏覽器會從構建DOM樹開始講整個流程執行壹遍，所以頻繁操作DOM會引起不需要的計算，導致頁面卡頓，影響用戶體驗。而Virtual DOM能很好的解決這個問題。它用javascript對象表示virtual node(VNode)，根據VNode 計算出真實DOM需要做的最小變動，然後再操作真實DOM節點，提高渲染效率。
2. Virtual DOM
虛擬DOM用javascript對象來表示VNode，VNode的結構如下：
虛擬節點（vNode）結構
下面是虛擬DOM的算法流程圖：
虛擬DOM算法流程圖
React Diff算法
高效的diff算法能夠保證進行對實際的DOM進行最小的變動。但是 標準的的 Diff 算法 復雜度需要 O(n^3)，這顯然無法滿足性能要求。要達到每次界面都可以整體刷新界面的目的，勢必需要對算法進行優化。React裏結合 Web 界面的特點做出了兩個簡單的假設，使得 Diff 算法復雜度直接降低到 O(n)。
1. 兩個相同組件產生類似的 DOM 結構，不同的組件產生不同的 DOM 結構；
2. 對於同壹層次的壹組子節點，它們可以通過唯壹的 id 進行區分。
算法上的優化是 React 整個界面 Render 的基礎，保證了整體界面渲染的性能。
不同節點類型的比較
為了在樹之間進行比較，我們首先要能夠比較兩個節點，在 React 中即比較兩個虛擬 DOM 節點，當兩個節點不同時，應該如何處理。這分為兩種情況：（1）節點類型不同 ，（2）節點類型相同，但是屬性不同。
節點類型不同：直接刪除原節點， 插入新節點。
React 的 DOM Diff 算法實際上只會對樹進行逐層比較，兩棵樹只會對同壹層次的節點進行比較如下所述。
dom樹
React 只會對相同顏色方框內的 DOM 節點進行比較，即同壹個父節點下的所有子節點。當發現節點已經不存在，則該節點及其子節點會被完全刪除掉，不會用於進壹步的比較。這樣只需要對樹進行壹次遍歷，便能完成整個 DOM 樹的比較。
相同類型節點的比較
React 會對屬性進行重設從而實現節點的轉換。