React虛擬DOM淺析

來源:互聯網
上載者:User

標籤:

轉帖: http://www.alloyteam.com/2015/10/react-virtual-analysis-of-the-dom/?hmsr=toutiao.io&bsh_bid=928783684

在Web開發中,需要將資料的變化即時反映到UI上,這時就需要對DOM進行操作,但是複雜或頻繁的DOM操作通常是效能瓶頸產生的原因,為此,React引入了虛擬DOM(Virtual DOM)的機制。

  1. 什麼是虛擬DOM?
  2. 虛擬DOM VS 直接操作原生DOM?
  3. 虛擬DOM VS MVVM?
  4. 對React虛擬DOM的誤解?
一、什麼是虛擬DOM?

        在React中,render執行的結果得到的並不是真正的DOM節點,結果僅僅是輕量級的JavaScript對象,我們稱之為virtual DOM。

        虛擬DOM是React的一大亮點,具有batching(批處理)和高效的Diff演算法。這讓我們可以無需擔心效能問題而”毫無顧忌”的隨時“重新整理”整個頁面,由虛擬 DOM來確保只對介面上真正變化的部分進行實際的DOM操作。在實際開發中基本無需關心虛擬DOM是如何運作的,但是理解其運行機制不僅有助於更好的理解React組件的生命週期,而且對於進一步最佳化 React程式也會有很大協助。

 二、虛擬DOM VS 直接操作原生DOM?

       如果沒有 Virtual DOM,簡單來說就是直接重設 innerHTML。這樣操作,在一個大型列表所有資料都變了的情況下,還算是合理,但是,當只有一行資料發生變化時,它也需要重設整個 innerHTML,這時候顯然就造成了大量浪費。

比較innerHTML 和Virtual DOM 的重繪過程如下:

innerHTML: render html string + 重新建立所有 DOM 元素

Virtual DOM: render Virtual DOM + diff+ 必要的 DOM 更新

        和 DOM 操作比起來,js 計算是非常便宜的。Virtual DOM render + diff 顯然比渲染 html 字串要慢,但是,它依然是純 js 層面的計算,比起後面的 DOM 操作來說,依然便宜了太多。當然,曾有人做過驗證說React的效能不如直接操作真實DOM,代碼如下:

function Raw() {    var data = _buildData(),        html = "";    ...    for(var i=0; i<data.length; i++) {        var render = template;        render = render.replace("{{className}}", "");        render = render.replace("{{label}}", data[i].label);        html += render;    }    ...    container.innerHTML = html;    ...}

該測試案例中雖然構造了一個包含1000個Tag的String,並把它添加到DOM樹中,但是只做了一次DOM操作。然而,在實際開發過程中,這1000個元素更新可能分布在20個邏輯塊中,每個邏輯塊中包含50個元素,當頁面需要更新時,都會引起DOM樹的更新,上述代碼就近似變成了如下格式:

function Raw() {    var data = _buildData(),         html = "";     ...     for(var i=0; i<data.length; i++) {         var render = template;         render = render.replace("{{className}}", "");         render = render.replace("{{label}}", data[i].label);         html += render;         if(!(i % 50)) {            container.innerHTML = html;        }    }     ... }

這樣來看,React的效能就遠勝於原生DOM操作了。

        而且,DOM 完全不屬於Javascript (也不在Javascript 引擎中存在).。Javascript 其實是一個非常獨立的引擎,DOM其實是瀏覽器引出的一組讓Javascript操作HTML文檔的API而已。在即時編譯的時代,調用DOM的開銷是很大的。而Virtual DOM的執行完全都在Javascript 引擎中,完全不會有這個開銷。

        React.js 相對於直接操作原生DOM有很大的效能優勢, 很大程度上都要歸功於virtual DOM的batching 和diff。batching把所有的DOM操作搜集起來,一次性提交給真實的DOM。diff演算法時間複雜度也從標準的的Diff演算法的O(n^3)降到了O(n)。這裡留到下一次部落格單獨講。

 

 

 

三、虛擬DOM VS MVVM?         相比起 React,其他 MVVM 系架構比如 Angular, Knockout 以及 Vue、Avalon 採用的都是資料繫結:通過 Directive/Binding 對象,觀察資料變化並保留對實際 DOM 元素的引用,當有資料變化時進行對應的操作。MVVM 的變化檢查是資料層面的,而 React 的檢查是 DOM 結構層面的。MVVM 的效能也根據變動檢測的實現原理有所不同:Angular 的髒檢查使得任何變動都有固定的 O(watcher count) 的代價;Knockout/Vue/Avalon 都採用了依賴收集,在 js 和 DOM 層面都是 O(change):

 

  • 髒檢查:scope digest+ 必要 DOM 更新
  • 依賴收集:重新收集依賴 + 必要 DOM 更新

        可以看到,Angular 最不效率的地方在於任何小變動都有的和 watcher 數量相關的效能代價。但是!當所有資料都變了的時候,Angular 其實並不吃虧。依賴收集在初始化和資料變化的時候都需要重新收集依賴,這個代價在小量更新的時候幾乎可以忽略,但在資料量龐大的時候也會產生一定的消耗。
        MVVM 渲染列表的時候,由於每一行都有自己的資料範圍,所以通常都是每一行有一個對應的 ViewModel 執行個體,或者是一個稍微輕量一些的利用原型繼承的 "scope" 對象,但也有一定的代價。所以,MVVM 列表渲染的初始化幾乎一定比 React 慢,因為建立 ViewModel / scope 執行個體比起 Virtual DOM 來說要昂貴很多。這裡所有 MVVM 實現的一個共同問題就是在列表渲染的資料來源變動時,尤其是當資料是全新的對象時,如何有效地複用已經建立的 ViewModel 執行個體和 DOM 元素。假如沒有任何複用方面的最佳化,由於資料是 “全新” 的,MVVM 實際上需要銷毀之前的所有執行個體,重新建立所有執行個體,最後再進行一次渲染!這就是為什麼題目裡連結的 angular/knockout 實現都相對比較慢。相比之下,React 的變動檢查由於是 DOM 結構層面的,即使是全新的資料,只要最後渲染結果沒變,那麼就不需要做無用功。
        Angular 和 Vue 都提供了列表重繪的最佳化機制,也就是 “提示” 架構如何有效地複用執行個體和 DOM 元素。比如資料庫裡的同一個對象,在兩次前端 API 呼叫裡面會成為不同的對象,但是它們依然有一樣的 uid。這時候你就可以提示 track by uid 來讓 Angular 知道,這兩個對象其實是同一份資料。那麼原來這份資料對應的執行個體和 DOM 元素都可以複用,只需要更新變動了的部分。或者,你也可以直接 track by $index 來進行 “原地複用”:直接根據在數組裡的位置進行複用。在題目給出的例子裡,如果 angular 實現加上 track by $index 的話,後續重繪是不會比 React 慢多少的。甚至在 dbmonster 測試中,Angular 和 Vue 用了 track by $index 以後都比 React 快: dbmon (注意 Angular 預設版本無最佳化,最佳化過的在下面)

        在比較效能的時候,要分清楚初始渲染、小量資料更新、大量資料更新這些不同的場合。Virtual DOM、髒檢查 MVVM、資料收集 MVVM 在不同場合各有不同的表現和不同的最佳化需求。Virtual DOM 為了提升小量資料更新時的效能,也需要針對性的最佳化,比如 shouldComponentUpdate 或是 immutable data。

  • 初始渲染:Virtual DOM > 髒檢查 >= 依賴收集
  • 小量資料更新:依賴收集 >> Virtual DOM + 最佳化 > 髒檢查(無法最佳化) > Virtual DOM 無最佳化
  • 大量資料更新:髒檢查 + 最佳化 >= 依賴收集 + 最佳化 > Virtual DOM(無法/無需最佳化)>> MVVM 無最佳化

(該段落借鑒了知乎的相關回答)

 

 

四、對React虛擬DOM的誤解?

        React 從來沒有說過 “React 比原生操作 DOM 快”。React給我們的保證是,在不需要手動最佳化的情況下,它依然可以給我們提供過得去的效能。

        React掩蓋了底層的 DOM 操作,可以用更聲明式的方式來描述我們目的,從而讓代碼更容易維護。下面還是借鑒了知乎上的回答:沒有任何架構可以比純手動的最佳化 DOM 操作更快,因為架構的 DOM 操作層需要應對任何上層 API 可能產生的操作,它的實現必須是普適的。針對任何一個 benchmark,我都可以寫出比任何架構更快的手動最佳化,但是那有什麼意義呢?在構建一個實際應用的時候,你難道為每一個地方都去做手動最佳化嗎?出於可維護性的考慮,這顯然不可能。

 在Web開發中,需要將資料的變化即時反映到UI上,這時就需要對DOM進行操作,但是複雜或頻繁的DOM操作通常是效能瓶頸產生的原因,為此,React引入了虛擬DOM(Virtual DOM)的機制。

  1. 什麼是虛擬DOM?
  2. 虛擬DOM VS 直接操作原生DOM?
  3. 虛擬DOM VS MVVM?
  4. 對React虛擬DOM的誤解?

 

一、什麼是虛擬DOM?

        在React中,render執行的結果得到的並不是真正的DOM節點,結果僅僅是輕量級的JavaScript對象,我們稱之為virtual DOM。

        虛擬DOM是React的一大亮點,具有batching(批處理)和高效的Diff演算法。這讓我們可以無需擔心效能問題而”毫無顧忌”的隨時“重新整理”整個頁面,由虛擬 DOM來確保只對介面上真正變化的部分進行實際的DOM操作。在實際開發中基本無需關心虛擬DOM是如何運作的,但是理解其運行機制不僅有助於更好的理解React組件的生命週期,而且對於進一步最佳化 React程式也會有很大協助。

二、虛擬DOM VS 直接操作原生DOM?

       如果沒有 Virtual DOM,簡單來說就是直接重設 innerHTML。這樣操作,在一個大型列表所有資料都變了的情況下,還算是合理,但是,當只有一行資料發生變化時,它也需要重設整個 innerHTML,這時候顯然就造成了大量浪費。

比較innerHTML 和Virtual DOM 的重繪過程如下:

innerHTML: render html string + 重新建立所有 DOM 元素

Virtual DOM: render Virtual DOM + diff + 必要的 DOM 更新

        和 DOM 操作比起來,js 計算是非常便宜的。Virtual DOM render + diff 顯然比渲染 html 字串要慢,但是,它依然是純 js 層面的計算,比起後面的 DOM 操作來說,依然便宜了太多。當然,曾有人做過驗證說React的效能不如直接操作真實DOM,代碼如下:

React虛擬DOM淺析

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.