戴志誠(chéng) 程勁草

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

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

戴志誠(chéng) 程勁草

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

隨著Web前端的不斷發(fā)展，Web頁(yè)面變得越來(lái)越復(fù)雜，強(qiáng)交互性帶來(lái)頁(yè)面狀態(tài)的瘋漲，用于更新頁(yè)面的DOM操作也越來(lái)越多。然而頻繁的DOM操作使得頁(yè)面渲染緩慢，造成前端性能瓶頸。在分析造成此問(wèn)題原因的基礎(chǔ)上，介紹一種由虛擬DOM和Diff算法來(lái)優(yōu)化DOM操作的方法。通過(guò)分析傳統(tǒng)Tree-Diff與DOM-Diff算法，對(duì)現(xiàn)有Diff算法做出改進(jìn)。最后搭建測(cè)試平臺(tái)，對(duì)改進(jìn)后算法(Virtual-DOM)、ReactJS以及原生JS進(jìn)行渲染性能測(cè)試，并對(duì)測(cè)試結(jié)果進(jìn)行對(duì)比分析。測(cè)試結(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萬(wàn)[1]。Web項(xiàng)目的規(guī)模也在不斷擴(kuò)大、復(fù)雜度不斷提升，Web前端正高速發(fā)展。

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

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

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

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

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

1 DOM

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

1.1 DOM操作的弊端

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

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

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

圖2 瀏覽器渲染過(guò)程

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

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

1.2 DOM操作優(yōu)化

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

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

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

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

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

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

2) 對(duì)比兩棵虛擬DOM樹(shù)之間的差異。

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

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

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

虛擬DOM就是用JS對(duì)象來(lái)表示真實(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對(duì)象構(gòu)建一棵真正的DOM樹(shù)。具體流程如圖3所示。

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

2.2 DOM-Diff

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

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

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

2.2.2 DOM-Diff 算法

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

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

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

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

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

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

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

3) 對(duì)舊集合的節(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)沒(méi)有執(zhí)行任何操作，而是 A、B、C 節(jié)點(diǎn)全部執(zhí)行移動(dòng)操作的現(xiàn)象。

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

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

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

圖5 List-Diff算法流程

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

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

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

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

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

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

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

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

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

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

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

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

測(cè)試分為橫向測(cè)試和縱向測(cè)試，根據(jù)輸入的測(cè)試迭代次數(shù)和單次測(cè)試數(shù)據(jù)量不同，測(cè)試案例不同。橫向測(cè)試用作對(duì)比Virtual-DOM、ReactJS以及原生JS三者在渲染同一組隨機(jī)數(shù)據(jù)的性能優(yōu)劣?？v向測(cè)試用作自身的對(duì)比，對(duì)測(cè)試數(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映射到頁(yè)面中的過(guò)程，所以耗時(shí)會(huì)增加。同時(shí)可以發(fā)現(xiàn)Virtual-DOM的實(shí)驗(yàn)結(jié)果比ReactJS好，因?yàn)镽eactJS類庫(kù)很大，本身不止包含虛擬DOM，還有組件化，生命周期等，所以在簡(jiǎn)單的測(cè)試案例中一定比單純的Virtual-DOM來(lái)說(shuō)耗時(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) 綜合來(lái)看，更新數(shù)據(jù)時(shí)，Virtual-DOM以及ReactJS兩者使用虛擬DOM的效果都比沒(méi)有專門(mén)針對(duì)優(yōu)化的原生JS效果更好，且多次實(shí)驗(yàn)表明處理數(shù)據(jù)越多，效果越好。驗(yàn)證了虛擬DOM與Diff算法可以減少瀏覽器渲染時(shí)長(zhǎng)，優(yōu)化Web應(yīng)用的性能。

(2) 由于測(cè)試平臺(tái)是在Chrome瀏覽器上運(yùn)行，由于V8引擎的即時(shí)編譯(JIT)技術(shù)比較特殊，它對(duì)代碼進(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)該從第三次以后開(kāi)始觀察。

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

3) 過(guò)濾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 過(guò)濾10 000條數(shù)據(jù)

縱向比較：

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

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

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

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

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

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

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

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

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

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

4 結(jié) 語(yǔ)

本文介紹了基于虛擬DOM的頁(yè)面渲染優(yōu)化，改進(jìn)了DOM Diff算法，并實(shí)現(xiàn)了基于改進(jìn)后的Diff算法的一個(gè)Virtual-DOM類庫(kù)。通過(guò)實(shí)驗(yàn)對(duì)比相同情況下Virtual-DOM、ReactJS以及原生JS的渲染結(jié)果，得出結(jié)論：虛擬DOM在頁(yè)面頻繁變更的情況下可以很大程度地減少屏幕響應(yīng)時(shí)間，大大改善用戶體驗(yàn)，提升應(yīng)用性能。通過(guò)實(shí)驗(yàn)證明虛擬DOM與Diff算法的完美結(jié)合，保證了每次更新操作后頁(yè)面的高效渲染，使得用戶無(wú)需顧忌性能問(wèn)題而使用更直觀簡(jiǎn)介的開(kāi)發(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頁(yè)面數(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。國(guó)家科技支撐計(jì)劃子課題(2015BAH33F0202)。戴志誠(chéng)，副教授，主研領(lǐng)域：教育信息化。程勁草，碩士生。

TP302.7

A

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