戴志誠 程勁草

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

基于虛擬DOM的Web前端性能優(yōu)化研究

戴志誠 程勁草

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

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

Web前端性能優(yōu)化 虛擬DOM Diff算法 ReactJS

0 引 言

截止至2016年11月，Web網(wǎng)站總個(gè)數(shù)約14億4 000萬[1]。Web項(xiàng)目的規(guī)模也在不斷擴(kuò)大、復(fù)雜度不斷提升，Web前端正高速發(fā)展。

在Web1.0時(shí)代，前端開發(fā)的主要職責(zé)是根據(jù)后臺(tái)提供的數(shù)據(jù)將網(wǎng)頁內(nèi)容排版呈現(xiàn)出來，簡單直接。但是這種基于服務(wù)器端來維護(hù)狀態(tài)，然后整體刷新頁面的方式對瀏覽器的渲染性能消耗很大。

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

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

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

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

1 DOM

DOM是用于操作XML和HTML文檔的應(yīng)用接口。在富客戶端網(wǎng)頁應(yīng)用中， UI的更改大部分是通過DOM操作實(shí)現(xiàn)局部更新。

1.1 DOM操作的弊端

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

圖1 DOM與JS引擎的關(guān)系

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

圖2 瀏覽器渲染過程

而DOM操作會(huì)修改生成的DOM樹或CSS規(guī)則樹，導(dǎo)致渲染樹的結(jié)構(gòu)發(fā)生變化，從而產(chǎn)生重繪(Repaint)或者重排(Reflow)[5]。重繪是指元素的幾何屬性(如寬、高等)并沒有發(fā)生變化，只是元素的外觀(如背景色)發(fā)生改變。重排是指元素的位置或尺寸發(fā)生了改變，瀏覽器需要重新執(zhí)行布局過程，導(dǎo)致渲染樹的一部分或全部發(fā)生變化。重繪和重排是瀏覽器渲染的重要?jiǎng)幼鳎瑢η岸诵阅艿挠绊懛浅４骩6]。

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

1.2 DOM操作優(yōu)化

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

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

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

2 虛擬DOM分析與改進(jìn)

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

1) 用JS模擬真實(shí)的DOM。

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

3) 將差異應(yīng)用到舊的頁面上。

下面將從這三個(gè)方面來分析虛擬DOM，并對現(xiàn)有的DOM-Diff算法進(jìn)行改進(jìn)。

2.1 用JS對象模擬真實(shí)DOM

虛擬DOM就是用JS對象來表示真實(shí)DOM節(jié)點(diǎn)的信息與結(jié)構(gòu)，保留它的節(jié)點(diǎn)類型、基本屬性還有層次關(guān)系。這比創(chuàng)建真實(shí)的DOM節(jié)點(diǎn)代價(jià)小很多，而且虛擬DOM已經(jīng)包含了創(chuàng)建真實(shí)DOM所需要的所有信息，最后完全可以用這個(gè)JS對象構(gòu)建一棵真正的DOM樹。具體流程如圖3所示。

圖3 創(chuàng)建JS對象

2.2 DOM-Diff

DOM-Diff是整個(gè)虛擬DOM理論的核心。整個(gè)DOM-Diff的流程概括為：當(dāng)頁面狀態(tài)發(fā)生變化時(shí)，重新構(gòu)造一棵新的JS對象樹，用新的對象樹和舊的對象樹進(jìn)行比較，利用DOM-Diff算法，記錄兩棵對象樹的差異。

2.2.1 傳統(tǒng) Tree-Diff 算法

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

2.2.2 DOM-Diff 算法

大部分頁面變更前和變更后DOM樹的結(jié)構(gòu)基本相似，且很少會(huì)有跨層級DOM元素移動(dòng)，所以可以舍棄很多復(fù)雜的移位比較。這里DOM-Diff算法，參考ReactJS對傳統(tǒng)Tree Diff算法做出兩點(diǎn)假設(shè)：

1) 只對樹中同層級的節(jié)點(diǎn)進(jìn)行差異對比，而對于不同層級的節(jié)點(diǎn)僅進(jìn)行創(chuàng)建或刪除操作。當(dāng)發(fā)現(xiàn)某個(gè)節(jié)點(diǎn)在新的樹中已被刪除，那么其所有的子節(jié)點(diǎn)也會(huì)被一同刪掉，不會(huì)再遞歸進(jìn)行子節(jié)點(diǎn)的差異比較。算法復(fù)雜度由此降為O(n)。

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

2.2.3 DOM- Diff 算法改進(jìn)與實(shí)現(xiàn)

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

1) 對新集合的節(jié)點(diǎn)進(jìn)行循環(huán)遍歷，通過唯一的key判斷舊集合中是否存在相同的節(jié)點(diǎn)。

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

3) 對舊集合的節(jié)點(diǎn)進(jìn)行循環(huán)遍歷，刪除新集合中不存在的節(jié)點(diǎn)。

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

圖4 隊(duì)尾移動(dòng)至隊(duì)首

當(dāng)節(jié)點(diǎn)數(shù)量過大或者更新操作過于頻繁時(shí)，上述情況在一定程度上也會(huì)影響到ReactJS的渲染性能，針對這一現(xiàn)象我們做了如下改進(jìn)。

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

圖5 List-Diff算法流程

2.3 將差異補(bǔ)丁應(yīng)用到舊頁面

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

圖6 將補(bǔ)丁應(yīng)用到舊頁面

3 實(shí)驗(yàn)分析

3.1 實(shí)驗(yàn)環(huán)境及內(nèi)容

實(shí)驗(yàn)工具為Chrome瀏覽器54.0版本。

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

3.2 實(shí)驗(yàn)結(jié)果與分析

3.2.1 測試平臺(tái)與測試數(shù)據(jù)展示

測試平臺(tái)與測試數(shù)據(jù)如圖7所示。

圖7 測試平臺(tái)展示

3.2.2 測試結(jié)果與分析

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

橫向比較：

1) 插入10 000條數(shù)據(jù)

實(shí)驗(yàn)結(jié)果與分析：

如圖8所示，添加數(shù)據(jù)時(shí)Virtual-DOM平均用時(shí)208.6毫秒、ReactJS平均用時(shí)865.9毫秒、原生JS平均用時(shí)66毫秒，原生JS的實(shí)驗(yàn)結(jié)果最佳。

圖8 插入10 000條數(shù)據(jù)

原因是ReactJS以及Virtual-DOM都有先構(gòu)建一個(gè)虛擬DOM，再將這個(gè)內(nèi)存中的虛擬DOM映射到頁面中的過程，所以耗時(shí)會(huì)增加。同時(shí)可以發(fā)現(xiàn)Virtual-DOM的實(shí)驗(yàn)結(jié)果比ReactJS好，因?yàn)镽eactJS類庫很大，本身不止包含虛擬DOM，還有組件化，生命周期等，所以在簡單的測試案例中一定比單純的Virtual-DOM來說耗時(shí)會(huì)增加。

2) 修改10 000條數(shù)據(jù)

實(shí)驗(yàn)結(jié)果與分析：

如圖9所示，修改數(shù)據(jù)時(shí)Virtual-DOM平均用時(shí)219.4毫秒、ReactJS平均用時(shí)571.4毫秒、原生JS平均用時(shí)3 355.1毫秒，Virtual-DOM的實(shí)驗(yàn)結(jié)果最佳。

圖9 修改10 000條數(shù)據(jù)

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

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

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

3) 過濾10 000條數(shù)據(jù)

實(shí)驗(yàn)結(jié)果與分析：

如圖10所示，修改數(shù)據(jù)時(shí)Virtual-DOM平均用時(shí)96.9毫秒、ReactJS平均用時(shí)292.6毫秒、原生JS平均用時(shí)772.6毫秒，Virtual-DOM的實(shí)驗(yàn)結(jié)果最佳。原因同更新操作。

圖10 過濾10 000條數(shù)據(jù)

縱向比較：

1) 插入0～10 000條數(shù)據(jù)

實(shí)驗(yàn)結(jié)果與分析：

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

圖11 插入0～10 000條數(shù)據(jù)

2) 修改0～10 000條數(shù)據(jù)與過濾0～10 000條數(shù)據(jù)

實(shí)驗(yàn)結(jié)果與分析：

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

圖12 修改0～10 000條數(shù)據(jù)

圖13 過濾0～10 000條數(shù)據(jù)

圖14 縱向修改測試擬合結(jié)果

4 結(jié) 語

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

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

[2] 楊俊峰,黎建輝,楊風(fēng)雷.深層網(wǎng)站Ajax頁面數(shù)據(jù)采集研究綜述[J].計(jì)算機(jī)應(yīng)用研究,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ìn)方法[J].計(jì)算機(jī)應(yīng)用與軟件,2014,31(1):246-248.

[7] 王成,李少元,鄭黎曉,等.Web前端性能優(yōu)化方案與實(shí)踐[J].計(jì)算機(jī)應(yīng)用與軟件,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技術(shù)棧[M].北京:人民郵電出版社,2016:172-183.

[10] 蔡山,張浩,陳洪輝,等.基于最小二乘法的分段三次曲線擬合方法研究[J].科學(xué)技術(shù)與工程,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。國家科技支撐計(jì)劃子課題(2015BAH33F0202)。戴志誠，副教授，主研領(lǐng)域：教育信息化。程勁草，碩士生。

TP302.7

A

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