前端渲染性能優(yōu)化及其應(yīng)用

倪新勇

（南京郵電大學(xué)，江蘇 南京 210000）

常規(guī)而言，想要針對應(yīng)用進(jìn)行優(yōu)化，一般會考慮到從硬件和軟件兩個方面實現(xiàn)提升。如果是針對硬件，常規(guī)的優(yōu)化方案主要包括擴(kuò)大帶寬、服務(wù)集群等部署后端應(yīng)用方式，而這些性能的提升都是依靠大量的硬件資金投入，購入相應(yīng)的硬件設(shè)備以此提升處理數(shù)據(jù)的性能。而如果是針對軟件進(jìn)行優(yōu)化，基本是軟件編碼流程優(yōu)化或者算法提升軟件的處理性能，此相對比之下，從軟件的方向進(jìn)行技術(shù)優(yōu)化實現(xiàn)應(yīng)用的性能提升更加具有實際意義。本文選定應(yīng)用軟件編碼中的前端方向，通過虛擬DOM 技術(shù)，研究針對應(yīng)用中的Web 界面的前端優(yōu)化。

1 瀏覽器渲染機(jī)制

若要針對前端性能進(jìn)行優(yōu)化，首先要了解整個應(yīng)用頁面的渲染流程。而想要了解頁面的渲染過程，瀏覽器渲染性能是必須要掌握的核心內(nèi)容。瀏覽器是通過解析器負(fù)責(zé)對語法的解析，依據(jù)解析后的內(nèi)容渲染整個網(wǎng)頁。

瀏覽器進(jìn)行渲染的前提條件是瀏覽器在與用戶的功能交互過程中產(chǎn)生了網(wǎng)絡(luò)請求，之后向服務(wù)器端發(fā)送數(shù)據(jù)和請求對應(yīng)需要的資源，完成此步驟后，需要完成的就是把從服務(wù)器中請求的資源渲染到頁面中對應(yīng)的位置處。

1.1 瀏覽器渲染過程

瀏覽器把服務(wù)器端請求到的數(shù)據(jù)渲染成為應(yīng)用頁面的整個過程是十分迅速的，其流程如下。

第一步，借助HTML 解析器，對數(shù)據(jù)中的HTML 元素節(jié)點解析之后以此構(gòu)建出DOM 樹。

第二步，借助CSS 解析器，對數(shù)據(jù)中CSS 樣式文件包含的元素樣式和元素內(nèi)連樣式進(jìn)行解析并構(gòu)建CSSOM 樹，也就是應(yīng)用頁面的元素樣式表。

第三步，將DOM 樹和CSSOM 樹放在一起，根據(jù)節(jié)點結(jié)合構(gòu)建渲染樹。其中的每個DOM 節(jié)點都含有掛載方法，對應(yīng)各自節(jié)點的樣式信息。

第四步，渲染樹構(gòu)建完，根據(jù)渲染樹中記錄的信息，瀏覽器開始調(diào)用layout（布局），為渲染樹上的每一個節(jié)點確定其在顯示頁面中出現(xiàn)的坐標(biāo)位置。

第五步，在渲染樹上的節(jié)點的顯示坐標(biāo)全部確定之后，接下來瀏覽器就會就調(diào)用每個節(jié)點paint（繪制）方法，將它們按照之前完成的樣式表和坐標(biāo)位置一一對應(yīng)后繪制出來顯示在頁面上。頁面渲染流程如圖1 所示。

圖1 頁面渲染流程圖

瀏覽器構(gòu)建DOM 樹并渲染頁面的整個流程是一個循環(huán)漸進(jìn)過程，并不是線性接力過程，這些過程在瀏覽器的流程不是完全獨立的，而是會有某個過程和時間點的交叉。

1.2 瀏覽器渲染機(jī)制的問題

除了上述的瀏覽器頁面渲染流程之外，還有兩個經(jīng)常會觸發(fā)且會對瀏覽器的渲染性能產(chǎn)生影響的操作：

（1）回流。當(dāng)頁面上某些元素節(jié)點位置信息發(fā)生變化時，瀏覽器會因為這些改動而重新從最底層開始計算該節(jié)點的位置，驗證并計算渲染樹。

（2）重繪。當(dāng)頁面上某些元素節(jié)點樣式信息發(fā)生變化時（這些元素變化時不影響整個頁面的位置信息布局），瀏覽器會因為這些改動重新記錄節(jié)點的元素樣式，并更新渲染樹，進(jìn)行重畫操作。

這兩個操作都是在原本的頁面內(nèi)容渲染好之后又發(fā)生了資源的變動時，觸發(fā)的瀏覽器渲染機(jī)制對頁面的部分內(nèi)容重新渲染，他們之間的區(qū)別主要是在于對頁面的整體布局是否產(chǎn)生影響。在實際應(yīng)用的頁面中，這兩種操作都會對頁面的渲染性能產(chǎn)生影響，降低頁面加載速率，但是這兩種機(jī)制的出現(xiàn)在頁面的正常使用過程中是不可避免的，是屬于功能交互所帶來的額外耗費。但是如果在一個頁面功能多且繁雜的應(yīng)用中，頻繁地觸發(fā)回流和重繪，則會給瀏覽器的渲染引擎帶來工作量和性能耗費。

當(dāng)頁面頻繁地刷新或者出現(xiàn)用戶頁面交互產(chǎn)生的回流和重繪時，會出現(xiàn)很多需要處理和渲染的數(shù)據(jù)致使瀏覽器產(chǎn)生大量的DOM 操作，而一段時間過多的DOM操作需要瀏覽器頻繁的執(zhí)行渲染流程，這不僅會占用瀏覽器很大的硬件性能，甚至?xí)绊懙街匦落秩撅@示頁面速度，從而對應(yīng)用的響應(yīng)速度產(chǎn)生不好的影響，尤其是多次變動導(dǎo)致的頁面重新渲染帶來的耗費。

2 虛擬DOM 技術(shù)

依據(jù)瀏覽器渲染流程，以及元素變動時帶來的額外渲染流程對性能耗費問題，只要能夠減少頁面中DOM操作的頻率，就可以實現(xiàn)對應(yīng)用性能的優(yōu)化。而減少DOM 操作的頻率，就要在一定時間內(nèi)，把這些DOM 操作一起掛載到頁面中。可以利用JavaScript 模擬出一整個應(yīng)用頁面中所有元素節(jié)點，從而構(gòu)造出一棵依據(jù)DOM 樹中節(jié)點信息模仿而來的虛擬DOM 樹。而頁面中多次改動的變動信息由JavaScript 記錄之后，再讓瀏覽器根據(jù)這些節(jié)點的變動信息而對頁面進(jìn)行一次性渲染。由JavaScript 模擬構(gòu)建虛擬DOM 樹，根據(jù)頁面的變動，得出頁面變動前后的差異，再渲染出頁面，這就是虛擬DOM 技術(shù)。

假設(shè)應(yīng)用頁面中的變動中是五十個節(jié)點發(fā)生位置信息的變動，按照之前介紹的常規(guī)的瀏覽器渲染流程，每存在一次DOM 操作，瀏覽器都將對整個頁面進(jìn)行一遍繪制，總共要進(jìn)行五十次的頁面繪制，這對瀏覽器的性能耗費是十分巨大的。而采用虛擬DOM 技術(shù)，并不會短時間內(nèi)立即執(zhí)行那么多次的DOM 操作，而是將某段時間內(nèi)五十次更新操作中的變動信息保存到本地JavaScript 對象中，之后依據(jù)這個JavaScript 對象將五十次更新信息一次性掛載到DOM 樹上，瀏覽器額外繪制一次頁面就完成了如此多的內(nèi)容更新。

使用虛擬DOM 技術(shù)相比于直接進(jìn)行DOM 操作具有很多優(yōu)勢，包括：虛擬DOM 技術(shù)使用JavaScript 為主，而不需要額外其他生產(chǎn)環(huán)境作為編譯支撐，且因為JavaScript 編寫的，有跨平臺能力；由于JavaScript 的執(zhí)行速度相對較快，虛擬DOM 通過多次操作JavaScript 記錄頁面變動減少了直接操作DOM 的次數(shù)，所以虛擬DOM顯著地提高了頁面渲染效率。

2.1 虛擬DOM 技術(shù)實現(xiàn)原理

一個應(yīng)用頁面一般由很多個元素節(jié)點組合嵌套構(gòu)成基本骨架，某一個元素節(jié)點的改變可能會導(dǎo)致附近有所聯(lián)系的節(jié)點也會產(chǎn)生連鎖變化。應(yīng)用頁面包含的內(nèi)容信息量越大，這種關(guān)聯(lián)變化就會產(chǎn)生越大的影響。如果頻繁地進(jìn)行DOM 操作修改頁面布局，會使應(yīng)用頁面出現(xiàn)明顯的卡頓，而使用虛擬DOM 可以直接減少修改頁面產(chǎn)生的DOM 操作的次數(shù)，提升流暢度。

虛擬DOM 樹是根據(jù)真實DOM 樹模仿出來的，它們兩個是節(jié)點一一對應(yīng)的同種樹狀數(shù)據(jù)結(jié)構(gòu)，同時每個節(jié)點也都會包含相應(yīng)全部屬性，而這些節(jié)點的屬性，不管在真正DOM 樹中的節(jié)點屬性還是在虛擬DOM 樹中的節(jié)點屬性都是一樣的，這是使用JavaScript 是對DOM 樹的一種抽象模仿表示。頁面中更新產(chǎn)生的所有的DOM 操作都會提前在虛擬DOM 上執(zhí)行，這樣會產(chǎn)生對應(yīng)新的頁面的DOM 結(jié)構(gòu)的新虛擬DOM 樹。新舊兩棵虛擬DOM 樹進(jìn)行對比，得出差異點，之后瀏覽器根據(jù)這個差異點定位到實際需要更新的節(jié)點，在頁面中進(jìn)行局部渲染。

2.2 虛擬DOM 技術(shù)的實現(xiàn)流程

步驟一：在最先首次頁面加載顯示時，根據(jù)真實DOM 結(jié)構(gòu)，使用JavaScript 模擬其結(jié)構(gòu)并構(gòu)建出對應(yīng)的虛擬DOM 樹，之后根據(jù)DOM 樹渲染成應(yīng)用展示頁面。

步驟二：變動產(chǎn)生后，根據(jù)新的改動后的結(jié)構(gòu)使用JavaScript 模擬出新虛擬DOM 樹，并且和步驟一中形成的舊的虛擬DOM 樹進(jìn)行比較，新舊虛擬DOM 樹的區(qū)別就是需要計算出并且記錄的差異對象。

步驟三：記錄步驟二中所記錄的差異對象，之后應(yīng)用到步驟一中的真正DOM 樹上，讓瀏覽器進(jìn)行頁面的重新渲染以此實現(xiàn)頁面的內(nèi)容更新。

2.2.1 模擬虛擬DOM 樹

要對以上的三個步驟進(jìn)行實現(xiàn)，完成實現(xiàn)虛擬DOM技術(shù)的應(yīng)用，首先要用JavaScript 模擬表示頁面中DOM結(jié)構(gòu)。借助JavaScript 對象，涵蓋節(jié)點中應(yīng)該有的屬性就可以很方便地表示DOM 節(jié)點。通過JavaScript 對象的屬性表達(dá)記錄這些節(jié)點信息。這個過程中構(gòu)建真正DOM樹，并且也構(gòu)建出了虛擬DOM 樹，這棵虛擬DOM 樹與真正的DOM 樹包含的信息都是一樣的。

2.2.2 對比新舊虛擬DOM 樹

當(dāng)頁面中的數(shù)據(jù)發(fā)生改動，產(chǎn)生了改變頁面結(jié)構(gòu)的變動時，先通過JavaScript 模擬出最新頁面的虛擬DOM樹，然后新舊虛擬DOM 進(jìn)行對比，得到頁面中變動節(jié)點的信息。

在正常頁面中的真實DOM 樹結(jié)構(gòu)會很復(fù)雜，而根據(jù)其模仿出來的虛擬DOM 樹也會包含大量的節(jié)點，想要快速對比新舊兩棵虛擬DOM 樹，并得出它們之間的不同，需要有一個能實現(xiàn)快速對比的DIFF 算法。想要實現(xiàn)真正高效的虛擬DOM 樹需要重點對比兩個問題，比較兩棵DOM 樹的方法和記錄節(jié)點之間差異的方法。

通常來說，真正完整地比較新舊兩棵虛擬DOM 樹是具有相當(dāng)大的計算量的，根據(jù)前端頁面中的通常操作來講，頁面中數(shù)據(jù)的更新很少會是跨級別的修改DOM節(jié)點。所以，在此優(yōu)化過程中只需考慮同級別的節(jié)點互相比較。

2.2.3 差異對象的應(yīng)用

根據(jù)之前得到的差異對象，同時結(jié)合舊的虛擬DOM樹，得到在真實DOM 樹中需要修改的節(jié)點，進(jìn)行真正的DOM 操作，對應(yīng)修改真實的DOM 結(jié)構(gòu)。

2.3 驗證虛擬DOM 的性能

上文陳述了虛擬DOM 帶來的好處以及理論上對應(yīng)用頁面的性能提升。為了驗證虛擬DOM 是否真的帶來了性能的提升，設(shè)計實驗驗證對比直接操作DOM 和使用虛擬DOM 技術(shù)渲染頁面的不同性能。根據(jù)常規(guī)應(yīng)用操作考慮，設(shè)置實驗的步驟，對數(shù)據(jù)進(jìn)行常規(guī)操作增加節(jié)點測試兩種不同的方案會對頁面渲染性能帶來什么樣不同的影響，得到直接操作DOM 和使用虛擬DOM 技術(shù)對頁面節(jié)點更新的性能對比。實驗的具體流程為，首先創(chuàng)建框架ul節(jié)點，之后使用ul 節(jié)點，在其內(nèi)初始化li 節(jié)點之后，進(jìn)行增加節(jié)點的操作，并增加對不同數(shù)量的節(jié)點變化響應(yīng)時間的記錄，結(jié)果如圖2 所示。

圖2 虛擬DOM 和直接操作DOM 性能消耗對比圖

由圖2 數(shù)據(jù)可知，隨著需要操作節(jié)點數(shù)量的不斷增加，使用虛擬DOM 技術(shù)實現(xiàn)應(yīng)用中節(jié)點更新的速度更高。

3 基于虛擬DOM 的應(yīng)用

一個成熟的應(yīng)用首先要確保頁面的流暢度和實現(xiàn)交互功能的響應(yīng)速度，使用虛擬DOM 技術(shù)優(yōu)化頁面的渲染速度。根據(jù)虛擬DOM 技術(shù)以及其他的工程化的編碼思路，在此基礎(chǔ)上構(gòu)建一個可視化構(gòu)建商城頁面應(yīng)用，可用于用戶快速生成H5 頁面。商城頁面構(gòu)建應(yīng)用中包含有很多對節(jié)點進(jìn)行改動的操作，同時為了構(gòu)建商城頁面的各個顯示部分和功能需求，還會存在很多的節(jié)點變動，是可以發(fā)揮出虛擬DOM 優(yōu)勢的理想應(yīng)用。

3.1 應(yīng)用結(jié)構(gòu)

為了完成可視化構(gòu)建商城頁面的應(yīng)用，最重點核心的功能是把商城頁面功能模塊搭建并組合起來，應(yīng)用主要分為構(gòu)成組件列表，效果預(yù)覽畫布，具體組件屬性控制調(diào)整列表三大模塊，如圖3 所示。

圖3 可視化商城構(gòu)建應(yīng)用頁面展示圖

圖3 中，左側(cè)組件列表中包含頁面中常用的商城頁面結(jié)構(gòu)，包括標(biāo)題，文字段介紹詳細(xì)內(nèi)容，輪播圖，魔方柵格顯示圖片等。用戶可以在組件列表中拖拽需要的功能，會在中間預(yù)覽畫布模塊中顯示相應(yīng)的部分，并在右側(cè)組件屬性控制模塊中調(diào)整具體的屬性。

3.2 具體實現(xiàn)

在應(yīng)用的構(gòu)成組件列表中，每一個組件都可以使用JSON 數(shù)據(jù)格式詳細(xì)地描述該組件的信息。應(yīng)用過程中組件信息通過操作傳入后，應(yīng)用解析組件屬性數(shù)據(jù)，生成相應(yīng)的該組件的屬性控制面板。例如一個商品標(biāo)題，其構(gòu)造是一個基礎(chǔ)的Form 表單，其中包含屬性有標(biāo)題（label），類型（type），值（value），占位符（placeholder）等屬性，以代碼的形式展示為：

此標(biāo)題為基礎(chǔ)類型的組件，更復(fù)雜的一系列信息，也可以通過組合形式，把每一個小組件為一個對象或者數(shù)組，多個組件嵌套形成大的復(fù)合類型組件。

4 結(jié)束語

本文介紹的虛擬DOM 技術(shù)，能夠在頁面頻繁變動需要重新渲染頁面時，能夠高效地定位到發(fā)生變動的節(jié)點處，完成頁面的渲染。虛擬DOM 能夠高效地定位需要修改的節(jié)點并完成渲染。因此，虛擬DOM 是一種提升渲染速度的有效手段。但是在頁面更新并不頻繁時，渲染速度只能和直接進(jìn)行DOM 操作的方案旗鼓相當(dāng)，甚至頁面變動節(jié)點數(shù)量特小時，渲染速度相對較弱。所以在實際項目開發(fā)過程中，要根據(jù)產(chǎn)品頁面的需求，決定是否選擇使用虛擬DOM 技術(shù)。如果只是單純的靜態(tài)展示頁面，不具有過多的交互功能和節(jié)點變動時，使用直接操作DOM 樹的方案更加方便；若頁面包含文檔過多且頻繁更新，選擇使用虛擬DOM 技術(shù)則更加具有優(yōu)勢。