基于虛擬DOM的Web前端性能優化研究

戴志誠 程勁草

(華中師范大學國家數字化學習工程技術研究中心 湖北 武漢 430079)

基于虛擬DOM的Web前端性能優化研究

戴志誠 程勁草

(華中師范大學國家數字化學習工程技術研究中心 湖北 武漢 430079)

隨著Web前端的不斷發展，Web頁面變得越來越復雜，強交互性帶來頁面狀態的瘋漲，用于更新頁面的DOM操作也越來越多。然而頻繁的DOM操作使得頁面渲染緩慢，造成前端性能瓶頸。在分析造成此問題原因的基礎上，介紹一種由虛擬DOM和Diff算法來優化DOM操作的方法。通過分析傳統Tree-Diff與DOM-Diff算法，對現有Diff算法做出改進。最后搭建測試平臺，對改進后算法(Virtual-DOM)、ReactJS以及原生JS進行渲染性能測試，并對測試結果進行對比分析。測試結果表明：虛擬DOM確實可以優化瀏覽器的渲染性能，且在特定的情況下，DOM-Diff改進算法效果比ReactJS更理想。

Web前端性能優化 虛擬DOM Diff算法 ReactJS

0 引 言

截止至2016年11月，Web網站總個數約14億4 000萬[1]。Web項目的規模也在不斷擴大、復雜度不斷提升，Web前端正高速發展。

在Web1.0時代，前端開發的主要職責是根據后臺提供的數據將網頁內容排版呈現出來，簡單直接。但是這種基于服務器端來維護狀態，然后整體刷新頁面的方式對瀏覽器的渲染性能消耗很大。

在Web2.0時代，Ajax通信與局部頁面更新機制的出現，解決了頁面整體刷新導致的用戶體驗差的問題[2]。jQuery + 模板引擎的技術方案成為當時的主流。通過編寫模板，將數據通過模板引擎渲染成視圖，最后用新生成的視圖替換舊的視圖，達到更新頁面的目的。但是這里存在著一個潛在的性能問題：如果數據量很大，最終渲染出來的DOM節點數也會很多，這樣當視圖需要更新時，每次都是先移除之前的DOM節點，然后再插入新的DOM節點，因為DOM操作是比較耗時的，所以會造成不小的性能開銷。

隨著頁面的交互變得豐富細膩、內容變得龐大復雜，為了更好地維護狀態和更新視圖，前端MVC(Model-View Control)框架應運而生，比如著名的Backbone和AngularJS。這些框架的出現簡化了前端的開發流程，屏蔽了瀏覽器間的兼容性問題，提高了開發效率。但是因為它們的視圖層(View)仍然是基于模板而設計的，與基于jQuery + 模板引擎的方式別無二致，只不過這些工作是由框架自動完成，但并沒有解決存在大量DOM操作的問題[3]。

為了同時兼顧開發效率與Web前端性能問題， Facebook率先提出了虛擬DOM的概念，并在其基礎之上構建了React框架[4]。其基本思想是在視圖需要更新時，首先生成當前頁面的虛擬DOM，然后通過DOM-Diff算法，計算之前頁面的虛擬DOM和現在頁面的虛擬DOM之間的差異。接著將這些差異應用到舊的頁面上，這樣就盡可能地減少了對DOM的操作，提升了視圖的渲染性能。

本文通過分析虛擬DOM的實現原理，并對現有的虛擬DOM核心算法進行改進，實現了一個基于虛擬DOM的基礎類庫Virtual-DOM，并搭建性能測試平臺，對比分析Virtual-DOM與React以及原生JS在渲染同一頁面下的性能表現。驗證了虛擬DOM可以通過減少DOM操作數來縮短Web頁面渲染時間，改進后的算法能進一步減少對處在同一層級元素的DOM操作，進一步縮短頁面的渲染時間，提升用戶體驗。

1 DOM

DOM是用于操作XML和HTML文檔的應用接口。在富客戶端網頁應用中， UI的更改大部分是通過DOM操作實現局部更新。

1.1 DOM操作的弊端

在瀏覽器中DOM與JS代碼執行引擎是兩個不同的模塊，如圖1所示。通過JS代碼調用DOM實際上屬于外部函數調用，每次調用都需要保存當前上下文，調用DOM接口，然后再恢復上下文。其性能損耗較模塊間調用大很多。

圖1 DOM與JS引擎的關系

其次，瀏覽器的渲染流程大致如圖2所示。首先通過解析HTML文檔來構建DOM樹，解析CSS產生CSS規則樹；然后根據DOM樹和CSS規則樹來構建渲染樹；再執行布局過程，計算每個元素的位置；最后繪制這些元素到頁面上[5]。

圖2 瀏覽器渲染過程

而DOM操作會修改生成的DOM樹或CSS規則樹，導致渲染樹的結構發生變化，從而產生重繪(Repaint)或者重排(Reflow)[5]。重繪是指元素的幾何屬性(如寬、高等)并沒有發生變化，只是元素的外觀(如背景色)發生改變。重排是指元素的位置或尺寸發生了改變，瀏覽器需要重新執行布局過程，導致渲染樹的一部分或全部發生變化。重繪和重排是瀏覽器渲染的重要動作，對前端性能的影響非常大[6]。

頻繁的DOM操作會導致頁面多次重繪或重排，造成頁面渲染緩慢，從而嚴重影響性能，也是前端性能瓶頸之所在。

1.2 DOM操作優化

DOM操作帶來的性能消耗是無法避免的，優化的重點就在于盡可能地減少DOM操作。比如：① 將多次DOM操作合并為單次DOM操作(批量操作)；② 把DOM元素隱藏后修改(對脫離頁面布局流的DOM元素的操作不會導致渲染樹的變化，也就不會導致重繪或重排)等[7]。

以上的優化方法簡單明了，但是在實際的大型項目中可操作性不強，原因有二：① 在大型項目中，靠人工去優化代碼，工作量太多，成本增加；② 即使花費大量的人力物力去優化代碼，但由于開發人員的水平參差不齊，無法保證最終的結果能達到預期的優化程度。

而虛擬DOM就是為了解決此問題而誕生的。它自動地計算出新的頁面和舊的頁面之間的差異，然后將這些差異以DOM操作的形式應用到舊的頁面上，不僅使頁面的DOM操作降到最低，而且整個過程不需要開發人員參與，完全自動化。

2 虛擬DOM分析與改進

虛擬DOM的核心思想就是通過計算新舊頁面之間的差異，然后將這些差異應用到舊的頁面上，所以它主要由三個部分組成：

1) 用JS模擬真實的DOM。

2) 對比兩棵虛擬DOM樹之間的差異。

3) 將差異應用到舊的頁面上。

下面將從這三個方面來分析虛擬DOM，并對現有的DOM-Diff算法進行改進。

2.1 用JS對象模擬真實DOM

虛擬DOM就是用JS對象來表示真實DOM節點的信息與結構，保留它的節點類型、基本屬性還有層次關系。這比創建真實的DOM節點代價小很多，而且虛擬DOM已經包含了創建真實DOM所需要的所有信息，最后完全可以用這個JS對象構建一棵真正的DOM樹。具體流程如圖3所示。

圖3 創建JS對象

2.2 DOM-Diff

DOM-Diff是整個虛擬DOM理論的核心。整個DOM-Diff的流程概括為：當頁面狀態發生變化時，重新構造一棵新的JS對象樹，用新的對象樹和舊的對象樹進行比較，利用DOM-Diff算法，記錄兩棵對象樹的差異。

2.2.1 傳統 Tree-Diff 算法

計算兩棵樹形結構之間轉換需要的最少操作步驟的算法有很多，相關的研究也很多[8]。傳統的Diff算法通過循環遞歸對節點進行一次對比，復雜度為O(n3),其中n是節點的總數。如果樹形結構包含1 000個節點，就會需要進行上10億次的差異比較。對于前端渲染場景來說，這種指數型的性能消耗代價太高，明顯不能滿足這種頻繁更新的頁面渲染需求。

2.2.2 DOM-Diff 算法

大部分頁面變更前和變更后DOM樹的結構基本相似，且很少會有跨層級DOM元素移動，所以可以舍棄很多復雜的移位比較。這里DOM-Diff算法，參考ReactJS對傳統Tree Diff算法做出兩點假設：

1) 只對樹中同層級的節點進行差異對比，而對于不同層級的節點僅進行創建或刪除操作。當發現某個節點在新的樹中已被刪除，那么其所有的子節點也會被一同刪掉，不會再遞歸進行子節點的差異比較。算法復雜度由此降為O(n)。

2) 對于同一層的一組子節點，可以通過唯一的Key值進行區分定位，在對列表進行添加和刪除操作時，只需要給出新的列表元素的順序，就可以有效地復用DOM元素[9]。

2.2.3 DOM- Diff 算法改進與實現

以上DOM-Diff算法思想，已被應用于ReactJS類庫中。通過對ReactJS源碼進行分析，發現ReactJS進行同層元素(有唯一的key)對比的過程如下：

1) 對新集合的節點進行循環遍歷，通過唯一的key判斷舊集合中是否存在相同的節點。

2) 如果存在相同節點就進行移動操作。在移動前需要將當前結點在舊集合中的位置(child._mountIndex)與訪問過的節點在舊集合中最右的位置(lastIndex)比較。如果(child._mountIndex < lastIndex)，則進行節點移動操作，否則不執行該操作。不存在相同節點的節點則執行插入操作。

3) 對舊集合的節點進行循環遍歷，刪除新集合中不存在的節點。

分析如圖4所示情況，舊集合的節點為：A、B、C、D，新集合的節點為D、A、B、C，理論上新舊集合轉換需要的最小操作步驟為1，即僅D節點發生移動。但是因為D節點在舊集合的位置最大，其他節點的(_mountIndex < lastIndex)，所以造成 D節點沒有執行任何操作，而是 A、B、C 節點全部執行移動操作的現象。

圖4 隊尾移動至隊首

當節點數量過大或者更新操作過于頻繁時，上述情況在一定程度上也會影響到ReactJS的渲染性能，針對這一現象我們做了如下改進。

在做虛擬DOM元素的同層差異對比時，先順序Diff，判斷當前結點在舊集合中的位置是否小于舊集合中訪問過的最右的位置，若小于，進行移動操作(child._mountIndex < lastIndex)；然后再逆序Diff，判斷當前結點在舊集合中的位置是否大于舊集合中訪問過的最右的位置時，若大于，進行移動操作(child._mountIndex > lastIndex)；最后比較哪種運算需要的操作少，就記錄少的操作到差異對象數組中。具體流程如圖5所示。

圖5 List-Diff算法流程

2.3 將差異補丁應用到舊頁面

將差異補丁應用到舊的頁面，是整個虛擬DOM的最后一個環節。通過對差異補丁進行遍歷，根據每個補丁的類型(增加、修改或移動)，將其應用到與之對應的舊頁面上的DOM元素(對DOM元素只想相應的增加、修改或移動操作)，至此舊頁面變成新頁面，視圖完成更新。整個過程如圖6所示。

圖6 將補丁應用到舊頁面

3 實驗分析

3.1 實驗環境及內容

實驗工具為Chrome瀏覽器54.0版本。

搭建虛擬DOM性能測試平臺，對Virtual-DOM、ReactJS以及原生JS進行渲染性能測試，使用他們分別來動態添加、修改、過濾一定的隨機列表數據，再將他們渲染到各自的容器中，記錄并分析每組實驗中三者的渲染時間。比較Virtual-DOM對瀏覽器渲染的優化程度。

3.2 實驗結果與分析

3.2.1 測試平臺與測試數據展示

測試平臺與測試數據如圖7所示。

圖7 測試平臺展示

3.2.2 測試結果與分析

測試分為橫向測試和縱向測試，根據輸入的測試迭代次數和單次測試數據量不同，測試案例不同。橫向測試用作對比Virtual-DOM、ReactJS以及原生JS三者在渲染同一組隨機數據的性能優劣。縱向測試用作自身的對比，對測試數據進行曲線擬合，分析算法本身的復雜度以及算法的穩定性。

橫向比較：

1) 插入10 000條數據

實驗結果與分析：

如圖8所示，添加數據時Virtual-DOM平均用時208.6毫秒、ReactJS平均用時865.9毫秒、原生JS平均用時66毫秒，原生JS的實驗結果最佳。

圖8 插入10 000條數據

原因是ReactJS以及Virtual-DOM都有先構建一個虛擬DOM，再將這個內存中的虛擬DOM映射到頁面中的過程，所以耗時會增加。同時可以發現Virtual-DOM的實驗結果比ReactJS好，因為ReactJS類庫很大，本身不止包含虛擬DOM，還有組件化，生命周期等，所以在簡單的測試案例中一定比單純的Virtual-DOM來說耗時會增加。

2) 修改10 000條數據

實驗結果與分析：

如圖9所示，修改數據時Virtual-DOM平均用時219.4毫秒、ReactJS平均用時571.4毫秒、原生JS平均用時3 355.1毫秒，Virtual-DOM的實驗結果最佳。

圖9 修改10 000條數據

(1) 綜合來看，更新數據時，Virtual-DOM以及ReactJS兩者使用虛擬DOM的效果都比沒有專門針對優化的原生JS效果更好，且多次實驗表明處理數據越多，效果越好。驗證了虛擬DOM與Diff算法可以減少瀏覽器渲染時長，優化Web應用的性能。

(2) 由于測試平臺是在Chrome瀏覽器上運行，由于V8引擎的即時編譯(JIT)技術比較特殊，它對代碼進行了兩次編譯，第一次粗編譯，第二次會把執行次數很多的函數進行精細編譯。所以前兩次點擊運行的時候所耗的時間 = 框架被編譯的時間(JIT) + 執行時間，之后執行的時間 = 執行時間。所以第三次以后才是真實的執行時間，應該從第三次以后開始觀察。

(3) ReactJS耗時是Virtual-DOM的三倍。驗證了改進的DOM-Diff算法的可行性與有效性。

3) 過濾10 000條數據

實驗結果與分析：

如圖10所示，修改數據時Virtual-DOM平均用時96.9毫秒、ReactJS平均用時292.6毫秒、原生JS平均用時772.6毫秒，Virtual-DOM的實驗結果最佳。原因同更新操作。

圖10 過濾10 000條數據

縱向比較：

1) 插入0～10 000條數據

實驗結果與分析：

如圖11所示，經過曲線擬合，Virtual-DOM、ReactJS以及原生JS三者的時間復雜度都是O(n)，結果呈線性、算法穩定。由斜率可以看到，隨著測試數據的不斷增加，Virtual-DOM的性能也是可以被接收的。當然ReactJS也是可以被優化的，但這里不做過多討論。

圖11 插入0～10 000條數據

2) 修改0～10 000條數據與過濾0～10 000條數據

實驗結果與分析：

對Virtual-DOM、ReactJS以及原生JS三者進行修改數據和過濾數據縱向測試，結果如圖12、圖13所示。依據最小二乘法的擬合原理[10]，借助MATLAB工具對縱向測試中的實驗數據進行擬合，并將縱向修改測試的擬合結果如圖14所示。原生JS的時間復雜度為O(n2), Virtual-DOM與ReactJS的時間復雜度為O(n)。同樣驗證了當頁面需要頻繁操作DOM時，虛擬DOM會帶來更好的性能和用戶體驗。

圖12 修改0～10 000條數據

圖13 過濾0～10 000條數據

圖14 縱向修改測試擬合結果

4 結 語

本文介紹了基于虛擬DOM的頁面渲染優化，改進了DOM Diff算法，并實現了基于改進后的Diff算法的一個Virtual-DOM類庫。通過實驗對比相同情況下Virtual-DOM、ReactJS以及原生JS的渲染結果，得出結論：虛擬DOM在頁面頻繁變更的情況下可以很大程度地減少屏幕響應時間，大大改善用戶體驗，提升應用性能。通過實驗證明虛擬DOM與Diff算法的完美結合，保證了每次更新操作后頁面的高效渲染，使得用戶無需顧忌性能問題而使用更直觀簡介的開發方式。

[1] Netcraft.November 2016 Web Server Survey[EB/OL].https://news.netcraft.com/archives/2016/11/22/november-2016-web-server-survey.html.

[2] 楊俊峰,黎建輝,楊風雷.深層網站Ajax頁面數據采集研究綜述[J].計算機應用研究,2013,30(6):1606-1610,1616.

[3] Huey Petersen.Angular Is Show[EB/OL].Hueypetersen.com/posts/2013/06/17/angular_is_slow/.

[4] Pete Hunt.Why did we build React?[EB/OL].https://facebook.github.io/react/blog/2013/06/05/why-react.html.

[5] Incapsula.How browsers work[EB/OL].http://taligarsiel.com/Projects/howbrowserswork1.htm.

[6] 趙小廈,范冰冰,夏嵬.基于WebKit的一種渲染改進方法[J].計算機應用與軟件,2014,31(1):246-248.

[7] 王成,李少元,鄭黎曉,等.Web前端性能優化方案與實踐[J].計算機應用與軟件,2014,31(12):89-95,147.

[8] Bille P.A survey on tree edit distance and related problems[J].Theoretical Computer Science,2005,337:217-239.

[9] 陳屹.深入React技術棧[M].北京:人民郵電出版社,2016:172-183.

[10] 蔡山,張浩,陳洪輝,等.基于最小二乘法的分段三次曲線擬合方法研究[J].科學技術與工程,2007,2(3):352-355.

RESEARCHOFOPTIMIZATIONFORWEBFRONT-ENDPERFORMANCEBASEDONVIRTUALDOM

Dai Zhicheng Cheng Jingcao

(NationalEngineeringResearchCenterforE-Learning,CentralChinaNormalUniversity,Wuhan430079,Hubei,China)

With the constant development of the web front-end, web page has become more complex. Strong interaction leads to a crazy rise in page status. DOM operation for updating the page will also increase. However, frequent DOM operation makes slow page rendering, resulting in front-end performance bottlenecks. Therefore, based on the analysis of the causes of this problem, a method of optimizing DOM operation by virtual DOM and Diff algorithm was introduced. Moreover, by analyzing the traditional Tree-Diff and DOM-Diff algorithm, the existing Diff algorithm was improved. Finally, a test platform was built to test the rendering performance of the improved algorithm (Virtual-DOM), ReactJS and native JS, and the test results were compared and analyzed. The experimental results show that the virtual DOM can really optimize the rendering performance of the browser. And in certain circumstances, the improved DOM-Diff algorithm is better than ReactJS.

Web front-end performance optimization Virtual DOM Diff algorithm ReactJS

2016-12-25。國家科技支撐計劃子課題(2015BAH33F0202)。戴志誠，副教授，主研領域：教育信息化。程勁草，碩士生。

TP302.7

A

10.3969/j.issn.1000-386x.2017.12.004