• / 12
  • 下載費用:30 金幣  

頁面排版方法及系統.pdf

關 鍵 詞:
頁面 排版 方法 系統
  專利查詢網所有資源均是用戶自行上傳分享,僅供網友學習交流,未經上傳用戶書面授權,請勿作他用。
摘要
申請專利號:

CN201310533531.2

申請日:

2013.10.31

公開號:

CN103678486A

公開日:

2014.03.26

當前法律狀態:

駁回

有效性:

無權

法律詳情: 發明專利申請公布后的駁回IPC(主分類):G06F 17/30申請公布日:20140326|||專利申請權的轉移IPC(主分類):G06F 17/30變更事項:申請人變更前權利人:北京優視網絡有限公司變更后權利人:優視科技有限公司變更事項:地址變更前權利人:100080 北京市海淀區蘇州街29號維亞大廈16層10-20室變更后權利人:100083 北京市海淀區成府路28號優盛大廈A座12層登記生效日:20140811|||實質審查的生效IPC(主分類):G06F 17/30申請日:20131031|||公開
IPC分類號: G06F17/30 主分類號: G06F17/30
申請人: 北京優視網絡有限公司
發明人: 王曉振
地址: 100080 北京市海淀區蘇州街29號維亞大廈16層10-20室
優先權:
專利代理機構: 北京鴻元知識產權代理有限公司 11327 代理人: 陳英俊;龔潔
PDF完整版下載: PDF下載
法律狀態
申請(專利)號:

CN201310533531.2

授權公告號:

|||||||||

法律狀態公告日:

2017.08.18|||2014.09.03|||2014.04.23|||2014.03.26

法律狀態類型:

發明專利申請公布后的駁回|||專利申請權、專利權的轉移|||實質審查的生效|||公開

摘要

本發明提供了一種頁面排版方法及系統,其中的方法包括:在解析頁面時,如果本地緩存庫中有頁面的排版樹,且頁面中的緩存標簽與存儲在本地緩存庫中的緩存標簽相同時,則從本地緩存庫中復制頁面的排版樹;根據頁面節點元素的緩存標簽,找到頁面節點元素的更新節點,生成與更新節點相對應的排版樹節點;將生成的與更新節點相對應的排版樹節點替換更新節點原有的排版樹節點;在排版樹內,對生成的與更新節點相對應的排版樹節點、更新節點的父親節點以及更新節點的祖先節點進行重新排版。通過本發明能夠減少重建樹的節點、降低排版的次數、提高頁面顯示的速度。

權利要求書

權利要求書
1.  一種頁面排版方法,包括:
在解析頁面時,如果本地緩存庫中緩存有所述頁面的排版樹,且所述頁面中的緩存標簽與存儲在所述本地緩存庫中的緩存標簽相同時,則從所述本地緩存庫中復制所述頁面的排版樹;
根據頁面節點元素的緩存標簽,找到所述頁面節點元素的更新節點,生成與所述更新節點相對應的排版樹節點;
將生成的與所述更新節點相對應的排版樹節點替換所述更新節點原有的排版樹節點;
在排版樹內,對生成的與所述更新節點相對應的排版樹節點、所述更新節點的父親節點以及所述更新節點的祖先節點進行重新排版。

2.  如權利要求1所述的頁面排版方法,其中,在解析所述頁面時,如果在所述本地緩存庫中沒有查找到所述頁面的排版樹,則解析所述頁面,生成所述頁面的排版樹,然后將生成的所述頁面的排版樹保存到所述本地緩存庫中。

3.  如權利要求1所述的頁面排版方法,其中,如果所述頁面中的緩存標簽與存儲在所述本地緩存庫中的緩存標簽不相同,則刪除所述本地緩存庫中的所述頁面的排版樹,然后將解析所述頁面生成的排版樹保存到所述本地緩存庫中。

4.  如權利要求1至3任一項所述的頁面排版方法,其中,在將生成的與所述更新節點相對應的排版樹節點替換所述更新節點原有的排版樹節點的過程中,
將所述更新節點原有的排版樹節點刪除,然后插入生成的與更新節點相對應的排版樹節點。

5.  一種頁面排版系統,包括:
排版樹復制單元,用于在解析頁面時,當本地緩存庫中緩存有所述頁面的排版樹,且所述頁面中的緩存標簽與存儲在所述本地緩存庫中的緩存標簽相同時,從所述本地緩存庫中復制所述頁面的排版樹;
排版樹節點生成單元,用于根據頁面節點元素的緩存標簽,找到所述頁面節點元素的更新節點,生成與所述更新節點相對應的排版樹節點;
排版樹節點更新單元,用于將生成的與所述更新節點相對應的排版樹節點替換所述更新節點原有的排版樹節點;
排版單元,用于對生成的與所述更新節點相對應的排版樹節點、所述更新節點的父親節點以及所述更新節點的祖先節點進行重新排版。

6.  如權利要求5所述的頁面排版系統,其中,所述排版樹復制單元在解析所述頁面時,如果在所述本地緩存庫中沒有查找到所述頁面的排版樹,則解析所述頁面,生成所述頁面的排版樹,然后將生成的所述頁面的排版樹保存到所述本地緩存庫中。

7.  如權利要求5所述的頁面排版系統,其中,所述排版樹復制單元進一步包括:
排版樹處理單元,用于當所述頁面中的緩存標簽與存儲在所述本地緩存庫中的緩存標簽不相同時,刪除所述本地緩存庫中的所述頁面的排版樹,然后將解析所述頁面生成的排版樹保存到所述本地緩存庫中。

8.  如權利要求5至7任一項所述的頁面排版系統,其中,所述排版樹節點更新單元在將生成的與所述更新節點相對應的排版樹節點替換所述更新節點原有的排版樹節點的過程中,
將所述更新節點原有的排版樹節點刪除,然后插入生成的與更新節點相對應的排版樹節點。

說明書

說明書頁面排版方法及系統
技術領域
本發明涉及移動瀏覽器技術領域,更為具體地,涉及一種頁面排版方法及系統。 
背景技術
隨著互聯網的興起和發展,人們了解信息的方式不再局限于傳統的紙媒,通過網頁人們同樣可以了解到更多的信息資訊,因此,這也使例如新浪、搜狐等眾多門戶網站得以發展。 
然而信息傳播的快速以及信息種類的繁多,致使當今的門戶網站所包含的信息量也日益增多。通常一個門戶網站的首頁包含了上千個頁面的鏈接,而由于信息的快速傳播以及高速更新,一個門戶網站的首頁每天更新數十次已成為常態。 
以用戶使用移動瀏覽器觀看一個門戶網站的首頁為例,假設用戶觀看首頁時,此時有一條新聞發生了更新,如果用戶這時刷新頁面,則相當于重新加載整個門戶網站的首頁。對于重新加載整個門戶網站的首頁而言,則相當于重新對整個頁面進行布局排版。也就是說,對于重新加載下來的頁面,會重新生成一份DOM樹及一份排版樹,然后根據排版樹將整個頁面渲染出來,最終將渲染效果呈現在用戶眼前。 
在上述示例中,網頁內容只是更新了一小部分,網頁的整體排版布局并沒有發生任何變化,發生變化的只是頁面的內容(即一部分文字)。而通過上述示例也能夠看出,在頁面整體排版布局沒有發生任何變化,只更新頁面內容的情況下,現有的頁面排版同樣會刪除已有的DOM樹及排版樹,然后重新生成這兩個樹并進行排版操作。而通常門戶網站的首頁不會頻繁更新頁面布局,頻繁更新的只是頁面的內容。如此,即使頻繁更新頁面內容也需要將整個頁面重新布局排版,無疑將造成無端的浪費,進而影響到頁面的顯示速度。 
發明內容
鑒于上述問題,本發明的目的是提供一種頁面排版方法及系統,以降低頁面排版的次數,提高頁面顯示的速度。 
根據本發明的一個方面,提供一種頁面排版方法,包括: 
在解析所述頁面時,如果本地緩存庫中緩存有頁面的排版樹,且頁面中的緩存標簽與存儲在本地緩存庫中的緩存標簽相同時,則從本地緩存庫中復制頁面的排版樹; 
根據頁面節點元素的緩存標簽,找到頁面節點元素的更新節點,生成與更新節點相對應的排版樹節點; 
將生成的與更新節點相對應的排版樹節點替換更新節點原有的排版樹節點; 
在排版樹內,對生成的與更新節點相對應的排版樹節點、更新節點的父親節點以及更新節點的祖先節點進行重新排版。 
其中,在解析頁面時,如果在本地緩存庫中沒有查找到頁面的排版樹,則解析頁面,生成頁面的排版樹,然后將生成的頁面的排版樹保存到本地緩存庫中。 
另一方面,本發明還提供一種頁面排版系統,包括: 
排版樹復制單元,用于在解析頁面時,當本地緩存庫中緩存有頁面的排版樹,且頁面中的緩存標簽與存儲在本地緩存庫中的緩存標簽相同時,從本地緩存庫中復制頁面的排版樹; 
排版樹節點生成單元,用于根據頁面節點元素的緩存標簽,找到頁面節點元素的更新節點,生成與更新節點相對應的排版樹節點; 
排版樹節點更新單元,用于將生成的與更新節點相對應的排版樹節點替換更新節點原有的排版樹節點; 
排版單元,用于對生成的與更新節點相對應的排版樹節點、更新節點的父親節點以及更新節點的祖先節點進行重新排版。 
利用上述根據本發明的頁面排版方法及系統,通過緩存排版樹,從而只對發生變化的頁面內容進行更新,實現減少重建樹的節點,降低排版的次數, 進而達到提高頁面顯示速度的目的。 
為了實現上述以及相關目的,本發明的一個或多個方面包括后面將詳細說明并在權利要求中特別指出的特征。下面的說明以及附圖詳細說明了本發明的某些示例性方面。然而,這些方面指示的僅僅是可使用本發明的原理的各種方式中的一些方式。此外,本發明旨在包括所有這些方面以及它們的等同物。 
附圖說明
通過參考以下結合附圖的說明及權利要求書的內容,并且隨著對本發明的更全面理解,本發明的其它目的及結果將更加明白及易于理解。在附圖中: 
圖1為根據本發明實施例的頁面排版方法流程示意圖; 
圖2為根據本發明實施例的頁面排版的詳細流程示意圖; 
圖3-1為網頁更新前的效果圖; 
圖3-2為網頁更新后的效果圖; 
圖4為根據本發明實施例的頁面排版系統的邏輯結構框圖。 
在所有附圖中相同的標號指示相似或相應的特征或功能。 
具體實施方式
以下將結合附圖對本發明的具體實施例進行詳細描述。 
為了清楚說明本發明提供的頁面排版方法,下面先對本發明中涉及到的部分名詞做出解釋說明: 
排版樹:webkit是一個開源的瀏覽器引擎,其中每個html頁面對應于一顆排版樹,排版樹用于布局,具體負責DOM(Document Object Model,文件對象模型)樹如何顯示在屏幕上。從MVC(Model-View-Controller,模型-視圖-控制器)的角度來看,DOM樹屬于MVC中的V部分,即視圖部分。每生成一個DOM節點,就會去創建對應的排版節點。但是,雖然大部分DOM節點與排版節點是一一對應,但并不是所有DOM節點都與排版節點絕對一一對應。 
圖1示出了根據本發明實施例的頁面排版方法流程。 
如圖1所示,本發明提供的頁面排版方法包括: 
S110:在解析頁面時,如果本地緩存庫中緩存有頁面的排版樹,且頁面中的緩存標簽與存儲在本地緩存庫中的緩存標簽相同時,則從本地緩存庫中復制頁面的排版樹。 
具體地,移動瀏覽器在解析頁面時,根據在頁面中增加的緩存標簽,確認頁面的排版樹可以在移動瀏覽器的本地緩存庫中進行緩存。 
需要說明的是,緩存標簽的作用表示此頁面元素可以進行緩存,以及利用此緩存標簽判斷頁面元素在緩存中對應的備份是否可用和指示此頁面元素的變化情況。 
其中,如果該頁面的排版樹不可以在移動瀏覽器的本地緩存庫中進行緩存,則只能進行正常的頁面解析及排版流程。也就是說,在不允許讀取該頁面的排版樹在本地緩存庫中進行緩存的情況下,則無法使用本發明所提供的頁面排版方法,只能按照常規的頁面解析及排版流程進行頁面的排版。 
當確認頁面的排版樹可以在移動瀏覽器的本地緩存庫中進行緩存時,在本地緩存庫中查找該頁面的排版樹,如果在本地緩存庫中沒有查找到該頁面的排版樹,則移動瀏覽器通過正常流程解析該頁面,生成該頁面的排版樹,然后將生成的該頁面的排版樹保存到本地緩存庫中。 
S120:根據頁面節點元素的緩存標簽,找到頁面節點元素的更新節點,生成與更新節點相對應的排版樹節點。 
具體地,根據增加的頁面節點元素的緩存標簽,找到頁面節點元素的更新節點,生成與更新節點相對應的排版樹節點。 
其中,如果頁面中的緩存標簽與存儲在本地緩存庫中的緩存標簽不相同,則刪除本地緩存庫中的頁面的排版樹,然后將解析頁面生成的排版樹保存到本地緩存庫中。 
也就是說,移動瀏覽器在解析頁面時,發現該頁面中的緩存標簽與存儲在本地緩存庫中的緩存標簽不一致,則說明該頁面的整體排版已經發生變化,需要更新本地緩存庫中的緩存。在更新緩存的過程中,首先刪除存儲在緩存庫中的該頁面的排版樹,然后重新解析該頁面,并且重新生成該頁面的排版樹,然后重新緩存到本地緩存庫中。 
具體地,根據增加的頁面節點元素的緩存標簽,當有頁面內容發生更新 時,將該緩存標簽標記為更新狀態。當瀏覽器解析到該節點元素時,根據增加的頁面節點元素的緩存標簽來判斷該頁面內容(即節點元素)是否發生了更新。如果該節點元素發生了更新,則刪除原節點元素的排版樹節點,然后重新生成新的該節點元素的排版樹節點。 
S130:將生成的與更新節點相對應的排版樹節點替換更新節點原有的排版樹節點。 
具體地,在復制的頁面的排版樹中,用更新節點的排版樹節點替換與更新節點對應排版樹節點,并打開更新節點的排版樹節點及其父親節點、祖先節點的排版開關。 
其中,在用更新節點的排版樹節點替換更新節點對應排版樹節點的過程中,將與更新節點對應的排版樹節點刪除,然后插入更新節點排版樹節點。 
也就是說,在將生成的與更新節點相對應的排版樹節點替換更新節點原有的排版樹節點的過程中,將更新節點原有的排版樹節點刪除,然后插入生成的與更新節點相對應的排版樹節點。 
S140:在排版樹內,對生成的與更新節點相對應的排版樹節點、更新節點的父親節點以及更新節點的祖先節點進行重新排版。 
具體地,在完成所有更新節點的排版樹節點的替換后,在排版樹內,對打開排版開關的所有排版樹節點進行重新排版。 
其中,在完成重新排版后進入渲染流程,并將渲染效果(即最終的網頁效果)呈現給用戶。 
通過圖1所示的流程可以看出,本發明根據頁面中增加的緩存標簽,將移動瀏覽器在解析頁面時,生成的排版樹進行緩存,然后再根據頁面中增加的頁面節點元素的緩存標簽,將只發生變化的節點元素進行重新構造,同時將只發生變化的節點元素進行重新排版,從而減少頁面排版的時間,提升網頁更新顯示的速度。 
為了更為詳細地說明本發明提供的頁面排版的流程,圖2示出了根據本發明實施例的頁面排版的詳細流程。 
需要說明的是,在進入圖2所示的流程之前,在網頁端需要增加該頁面的緩存標簽,以標記該頁面的DOM樹與排版樹可以進行緩存,以及標記節點 元素的內容是否發生變化。 
其中,webkit中每個html頁面對應于一棵DOM樹,DOM樹用于描述html頁面的信息。從MVC(Model View Controller,模型視圖控制器)的角度來看,DOM樹屬于MVC中的M部分,即模型部分。 
接下來,如圖2所示: 
S201:移動瀏覽器接收網頁數據。 
S202:移動瀏覽器解析該頁面的緩存標簽,判斷是否允許讀取DOM樹與排版樹的緩存,如果允許進入S204,否則進入S203。 
S203:進入正常的解析、排版流程。 
S204:查看本地緩存庫中是否緩存有該頁面的DOM樹與排版樹,且該頁面的緩存標簽與存儲在移動瀏覽器的緩存庫中的緩存標簽是否相同,如果是進入S206,否則進入S205。 
也就是說,如果緩存庫中沒有該頁面的DOM樹與排版樹,或者緩存庫中有該頁面的DOM樹與排版樹,但緩存標簽不相同,則進入S205;如果緩存庫存中有該頁面的DOM樹與排版樹,且緩存標簽也相同,則進入S206。 
S205:清空本地緩存庫中的數據,進行正常的解析、排版流程,在完成排版后,將新的DOM樹與排版樹緩存到本地緩存庫中。 
S206:從本地緩存庫中復制一份DOM樹與排版樹。 
S207:移動瀏覽器在繼續解析該頁面時,根據增加的該頁面的節點元素的緩存屬性,找到更新的節點元素,生成對應的DOM樹節點和排版樹節點。 
S208:將更新的節點元素所對應的原節點元素的DOM樹內的節點刪除,并插入新生成的DOM樹節點。 
S209:將更新的節點元素所對應的原節點元素的排版樹內的節點刪除,并插入新生成的排版樹節點,同時打開更新的節點元素及其父親、祖先節點的排版開關。 
S210:完成全部更新節點的替換后,對打開排版開關的排版樹內的全部節點重新進行排版。 
S211:完成排版后進入渲染流程,最終將網頁效果呈現給用戶。 
通過圖2所示的流程可以看出,采用本發明提供的頁面排版方法,在頁面內容發生變化后,能夠大大減少分配節點及排版節點的操作,節省了排版 時間,提高了頁面的刷新速度。 
以下將以兩個實例對本發明提供的頁面排版方法進行更為詳細地說明。 
實例一 
在網站首頁內增加緩存標簽: 
<meta name=“cache DOM tree”version=”123456”> 
該緩存標簽表明該頁面可以使用緩存的DOM樹,當前頁面使用的DOM樹的版本是”123456”。 
<meta name=“cache render tree”version=”234567”> 
該緩存標簽表明該頁面可以使用緩存的排版樹,當前頁面使用的排版樹的版本是”234567”。 
實例二 
在頁面內增加該頁面節點元素的緩存屬性 
<li volitate><a href="http://news.sina.com.cn/c/2013-09-10/192628182198.shtml"target="_blank">出席夏季達沃斯答問</a><a href="http://news.sina.com.cn/c/2013-09-10/181628181738.shtml" 
target="_blank">稱當農民對任總理受益匪淺</a></li> 
該頁面節點元素增加了volitate關鍵字,瀏覽器在解析到這個關鍵字時,會查看對應的節點內容是否發生了變化,如果沒有發生變化,則保留原節點,否則刪除并創建新的節點,同時打開該元素對應的排版節點的排版開關。 
圖3-1與圖3-2分別為網頁更新前與更新后的效果對比圖,其中圖3-1示出了網頁更新前的效果,圖3-2示出了網頁更新后的效果。對于圖3-2,其元素對應如下: 
<ul class="uni-blk-list01list-a"><li><a class="videoNewsLeft"href="http://video.sina.com.cn/news/"target="_blank">新聞</a>|<a target="_blank"href="http://video.sina.com.cn/news/">多地上調最低工資標準</a></li> 
<li volitate><a target="_blank"href="http://video.sina.com.cn/vlist/news/zt/xlyhw/?opsubject_id=top1#114377138"class="videoNewsLeft">網聊傷人詞匯</a><a target="_blank" href="http://video.sina.com.cn/vlist/news/zt/xlyhw/?opsubject_id=top1#114383361">2014放假安排</a></li> 
<li volitate><a target="_blank"href="http://video.sina.com.cn/vlist/news/zt/zsgdtrz/?opsubject_id=top1#114361952"class="videoNewsLeft">一卡通全國推行</a><a target="_blank"href="http://video.sina.com.cn/vlist/news/zt/gzfwbz/?opsubject_id=top1#114363193">電信發力4G</a></li> 
<li><a target="_blank"href="http://video.sina.com.cn/vlist/news/zt/topvideos/?opsubject_id=top1#114328443"class="videoNewsLeft">乘客墜地鐵隧道</a><a volitate target="_blank"href="http://video.sina.com.cn/vlist/news/zt/topvideos/?opsubject_id=top1#114337261">感動社區人物</a></li> 
<li><a target="_blank"href="http://video.sina.com.cn/vlist/news/zt/topvideos/?opsubject_id=top1#114331366"class="videoNewsLeft">人民幣升值</a><a volitate target="_blank"href="http://video.sina.com.cn/vlist/news/zt/18newsroom/?opsubject_id=top1#114387151">中東部迎大風降溫</a></li> 
</ul> 
改變的頁面節點元素被標記為“volitate”,即意味著該頁面內容發生了變化,需要移動瀏覽器對變化的內容進行刷新處理。 
與上述方法相對應,本發明還提供一種頁面排版系統,圖4示出了根據本發明實施例的頁面排版系統的邏輯結構。 
如圖4所示,本發明提供的頁面排版系統400包括排版樹復制單元410、排版樹節點生成單元420、排版樹節點更新單元430和排版單元440。 
其中,排版樹復制單元410用于在解析頁面時,當本地緩存庫中緩存有頁面的排版樹,且頁面中的緩存標簽與存儲在本地緩存庫中的緩存標簽相同時,從本地緩存庫中復制頁面的排版樹;排版樹節點生成單元420用于根據頁面節點元素的緩存標簽,找到頁面節點元素的更新節點,生成與更新節點相對應的排版樹節點。 
排版樹節點更新單元430用于在將生成的與更新節點相對應的排版樹節點替換更新節點原有的排版樹節點; 
排版單元440用于對生成的與更新節點相對應的排版樹節點、更新節點的父親以及更新節點的祖先節點進行重新排版。 
本發明根據頁面中增加的緩存標簽,將移動瀏覽器在解析頁面時,生成的排版樹進行緩存,然后再根據頁面中增加的頁面節點元素的緩存標簽,將只發生變化的節點元素進行重新構造,同時將只發生變化的節點元素進行重新排版,從而減少頁面排版的時間,提升網頁更新顯示的速度。 
在本發明的一個或者多個實施方式中,排版樹復制單元410在解析頁面時,如果在本地緩存庫中沒有查找到頁面的排版樹,則解析頁面,生成頁面的排版樹,然后將生成的頁面的排版樹保存到本地緩存庫中。 
在本發明的一個或者多個實施方式中,排版樹復制單元410進一步包括排版樹處理單元,用于當頁面中的緩存標簽與存儲在本地緩存庫中的緩存標簽不相同時,刪除本地緩存庫中的頁面的排版樹,然后將解析頁面生成的排版樹保存到本地緩存庫中。 
在本發明的一個或者多個實施方式中,樹節點更新單元430在將生成的與更新節點相對應的排版樹節點替換更新節點原有的排版樹節點的過程中,將更新節點原有的排版樹節點刪除,然后插入生成的與更新節點相對應的排版樹節點。 
如上參照附圖以示例的方式描述了根據本發明的頁面排版方法及系統。但是,本領域技術人員應當理解,對于上述本發明所提出的頁面排版方法及系統,還可以在不脫離本發明內容的基礎上做出各種改進。因此,本發明的保護范圍應當由所附的權利要求書的內容確定。 

關于本文
本文標題:頁面排版方法及系統.pdf
鏈接地址:http://www.pqsozv.live/p-6180533.html
關于我們 - 網站聲明 - 網站地圖 - 資源地圖 - 友情鏈接 - 網站客服 - 聯系我們

[email protected] 2017-2018 zhuanlichaxun.net網站版權所有
經營許可證編號:粵ICP備17046363號-1 
 


收起
展開
钻石光影