技術(shù)領(lǐng)域
本發(fā)明涉及web前端開發(fā)領(lǐng)域，具體的說是一種提高web頁面渲染性能的裝置。
背景技術(shù)：
在web開發(fā)中，有一些業(yè)務場景，需要實時的將變化的數(shù)據(jù)體現(xiàn)到UI層面上，這時就需要對DOM進行操作。調(diào)用瀏覽器的接口對頁面的DOM進行操作，從性能上來講非常的昂貴，所以在web開發(fā)中，都盡量避免頻繁的對DOM進行操作。但是對于一些業(yè)務復雜、功能多樣的頁面，手工對DOM的操作進行管理，通常是極其復雜的。
本發(fā)明提出一種提高web頁面渲染性能的裝置，使用JAVASCRIPT進行開發(fā)，夠能自動的管理復雜的DOM操作，提高web頁面渲染性能。渲染的流程基本包括：首先，計算CSS（層疊樣式表）樣式，然后，構(gòu)建渲染樹，確定布局：定位坐標和大小，是否換行，各種position, overflow, z-index屬性等，然后根據(jù)渲染樹對頁面進行渲染，正式開畫。JavaScript是一種直譯式腳本語言，是一種動態(tài)類型、弱類型、基于原型的語言，內(nèi)置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動態(tài)功能。
技術(shù)實現(xiàn)要素：
本發(fā)明針對目前技術(shù)發(fā)展的需求和不足之處，提供一種提高web頁面渲染性能的裝置。
本發(fā)明所述一種提高web頁面渲染性能的裝置，解決上述技術(shù)問題采用的技術(shù)方案如下：所述一種提高web頁面渲染性能的裝置，在瀏覽器端用javascript實現(xiàn)了一套DOM 接口，其結(jié)構(gòu)主要包括：接口模塊、緩沖模塊、裝載模塊和輸出模塊；其中，緩沖模塊通過裝載模塊獲取真實的DOM結(jié)構(gòu)，接口模塊接收DOM操作，所有DOM操作通過接口模塊流經(jīng)緩沖模塊，通過緩沖模塊計算出實際DOM結(jié)構(gòu)需要做的最小變動，再通過輸出模塊提交給瀏覽器執(zhí)行。
優(yōu)選的，所述接口模塊提供一系列操作dom的接口，包括對DOM的創(chuàng)建、刪除、修改、追加，整體上覆蓋了瀏覽器源生的DOM接口，使得所有的DOM操作都能夠流經(jīng)緩沖模塊。
優(yōu)選的，所述緩沖模塊是該裝置的核心，通過裝載模塊獲取真實DOM結(jié)構(gòu)，同時使用javascript來模擬DOM節(jié)點；所述緩沖模塊中設置有差異比較器，差異比較器對模擬的DOM節(jié)點修改前后的差異進行計算，計算出實際DOM結(jié)構(gòu)需要做的最小變動。
優(yōu)選的，所述緩沖模塊中的差異比較器主要負責比較兩顆DOM樹，以及記錄DOM節(jié)點之間的差異；所述差異比較器使用一個DOM樹算法，只對同級別DOM節(jié)點進行比較；每個DOM節(jié)點都有一個編號，在深度優(yōu)先遍歷的過程中，若對應的DOM節(jié)點有變化，則把相應的變化類別記錄下來。
優(yōu)選的，通過緩存模塊的差異比較器，計算出兩顆模擬的DOM節(jié)點之間的差異；通過輸出模塊提交給瀏覽器執(zhí)行，來修改真實的DOM結(jié)構(gòu)。
優(yōu)選的，當頁面的數(shù)據(jù)變化時，該裝置自動管理頁面上所有的dom變化，并且在內(nèi)存里對這些變化進行統(tǒng)一的標記與識別，最后將最終的匯總結(jié)果和更新部分提交給頁面渲染。
本發(fā)明所述一種提高web頁面渲染性能的裝置與現(xiàn)有技術(shù)相比具有的有益效果是：
本發(fā)明在瀏覽器端使用JAVASCRIPT開發(fā)該裝置，用javascript構(gòu)建的DOM樹性能比瀏覽器的DOM要好很多；該裝置在瀏覽器端實現(xiàn)了一套DOM 接口，引入一個緩沖層；進行頁面開發(fā)時，所有的DOM操作都會通過DOM接口，經(jīng)過該緩沖層；通過該緩沖層計算實際DOM結(jié)構(gòu)需要做的最小變動，最后，僅僅將需要變化的部分進行實際的瀏覽器DOM更新；通過本發(fā)明夠能自動的管理復雜的DOM操作，最大化減少針對DOM的操作，提高web頁面渲染性能。
說明書附圖
附圖1為所述提高web頁面渲染性能的裝置的構(gòu)造示意圖。
具體實施方式
為使本發(fā)明的目的、技術(shù)方案和優(yōu)點更加清楚明白，以下結(jié)合具體實施例，對本發(fā)明所述一種提高web頁面渲染性能的裝置進一步詳細說明。
針對一些業(yè)務復雜、功能多樣的頁面，手工對DOM進行操作極其復雜的問題，本發(fā)明公開了一種提高web頁面渲染性能的裝置，在瀏覽器端用javascript實現(xiàn)了一套DOM 接口，引入一個緩沖層；進行頁面開發(fā)時，所有的DOM操作都會通過DOM接口，經(jīng)過該緩沖層。每當有OM操作的請求時，在緩存層內(nèi)重新構(gòu)建整個DOM樹；然后，分析整個DOM樹和上一次的DOM樹進行對比，得到DOM結(jié)構(gòu)的區(qū)別；最后，僅僅將需要變化的部分進行實際的瀏覽器DOM更新。該裝置夠能自動的管理復雜的DOM操作，最大化減少針對DOM的操作，提高web頁面渲染性能。
實施例：
本實施例所述一種提高web頁面渲染性能的裝置，在瀏覽器端用javascript實現(xiàn)了一套DOM 接口，如附圖1所示，該裝置的結(jié)構(gòu)主要包括：接口模塊、緩沖模塊、裝載模塊和輸出模塊；其中，緩沖模塊通過裝載模塊獲取真實的DOM結(jié)構(gòu)，接口模塊接收DOM操作，所有DOM操作通過接口模塊流經(jīng)緩沖模塊，通過緩沖模塊計算出實際DOM結(jié)構(gòu)需要做的最小變動，再通過輸出模塊提交給瀏覽器執(zhí)行。
所述接口模塊提供一系列操作dom的接口，包括對DOM的創(chuàng)建、刪除、修改、追加等，整體上覆蓋了瀏覽器源生的DOM接口，使得所有的DOM操作都能夠流經(jīng)緩沖模塊。
所述緩沖模塊是該裝置的核心，其首先通過裝載模塊獲取真實DOM結(jié)構(gòu)，同時使用javascript來模擬DOM節(jié)點，模擬的DOM節(jié)點包括便簽、屬性和子節(jié)點。所述緩沖模塊中設置有差異比較器。在用JS對象表示DOM結(jié)構(gòu)后，從接口模塊進來的DOM操作，首先作用在這個JS模擬的DOM節(jié)點上，然后，差異比較器對模擬的DOM節(jié)點修改前后的差異進行計算，計算出實際DOM結(jié)構(gòu)需要做的最小變動，最后，通過輸出模塊提交給瀏覽器執(zhí)行。
所述緩沖模塊中的差異比較器主要負責比較兩顆DOM樹，以及記錄DOM節(jié)點之間的差異。由于，計算兩棵樹之間差異的常規(guī)算法復雜度為O(n3)，一個文檔的DOM結(jié)構(gòu)有上百個節(jié)點是很正常的情況，這種復雜度無法應用于實際項目。很少存在跨級別的修改DOM節(jié)點，通常是修改節(jié)點的屬性、調(diào)整子節(jié)點的順序、添加子節(jié)點等。本實施例中，所述差異比較器使用一個有效的DOM樹算法，只對同級別DOM節(jié)點進行比較，避免了diff算法的復雜性。對DOM樹采取同級比較，節(jié)點之間的差異可以歸結(jié)為4種類型：修改節(jié)點屬性、修改節(jié)點文本內(nèi)容、替換原有節(jié)點、調(diào)整子節(jié)點，包括移動、刪除等。每個DOM節(jié)點都有一個編號，在深度優(yōu)先遍歷的過程中，若對應的DOM節(jié)點有變化，則把相應的變化類別記錄下來。
本實施例所述提高web頁面渲染性能的裝置，通過緩存模塊的差異比較器，計算出兩顆模擬的DOM節(jié)點之間的差異后，然后通過輸出模塊提交給瀏覽器執(zhí)行，來修改真實的DOM結(jié)構(gòu)。
當頁面的數(shù)據(jù)變化時，本實施例所述提高web頁面渲染性能的裝置，會自動的管理頁面上所有的dom變化，并且在內(nèi)存里對這些變化進行統(tǒng)一的標記與識別，最后將最終的匯總結(jié)果和更新部分提交給頁面渲染。該裝置能夠批量處理DOM結(jié)構(gòu)的更新，在一個事件循環(huán)中的兩次數(shù)據(jù)變化會被合并，例如：連續(xù)的先將節(jié)點內(nèi)容從A變更為B，然后又從B變更為A，那么緩沖層的自動處理機構(gòu)會認為UI沒有發(fā)生任何變化。
上述具體實施方式僅是本發(fā)明的具體個案，本發(fā)明的專利保護范圍包括但不限于上述具體實施方式，任何符合本發(fā)明的權(quán)利要求書的且任何所屬技術(shù)領(lǐng)域的普通技術(shù)人員對其所做的適當變化或替換，皆應落入本發(fā)明的專利保護范圍。