專利名稱：在瀏覽器中處理頁面的方法及設(shè)備的制作方法
技術(shù)領(lǐng)域：
本發(fā)明涉及計算機技術(shù)領(lǐng)域，具體涉及一種在瀏覽器中處理頁面的方法及設(shè)備。
背景技術(shù)：
隨著互聯(lián)網(wǎng)的發(fā)展，網(wǎng)站提供的內(nèi)容越來越豐富，吸引了越來越多的用戶瀏覽。然而，網(wǎng)站大量內(nèi)容的展示同時也拖慢了網(wǎng)頁的顯示速度，于是延時呈現(xiàn)技術(shù)應(yīng)運而生。延時呈現(xiàn)，是指在網(wǎng)頁中先不解析和渲染還沒有被用戶瀏覽到的部分，而等到用戶向下瀏覽至相應(yīng)位置時才加載、解析和渲染并顯示該部分的內(nèi)容。例如，當(dāng)有些用戶只瀏覽網(wǎng)頁中某一范圍內(nèi)的內(nèi)容時，網(wǎng)頁中的其它范圍內(nèi)的內(nèi)容就不需要加載了。這樣，可以有效地加快網(wǎng)頁顯示速度，還可以降低服務(wù)器的消耗。然而在現(xiàn)有技術(shù)中，只能對頁面中的圖片進行延時呈現(xiàn)處理，對其它的頁面元素則無法進行延時呈現(xiàn)。

發(fā)明內(nèi)容
鑒于上述問題，提出了本發(fā)明以便提供一種克服上述問題或者至少部分地解決上述問題的在瀏覽器中處理頁面的方法及設(shè)備方法。依據(jù)本發(fā)明的一個方面，提供了一種在瀏覽器中處理頁面的方法，包括步驟對頁面中需要延時呈現(xiàn)的元素進行注冊；在瀏覽器中解析和渲染該頁面中未注冊的元素；判斷是否要解析和渲染所注冊的元素，如果要解析和渲染，則在瀏覽器中解析和渲染所注冊的元素，否則存儲所注冊的元素；以及呈現(xiàn)所渲染的、位于瀏覽器的當(dāng)前窗口中的元素?？蛇x地，其中對頁面中需要延時呈現(xiàn)的元素進行注冊的步驟包括將需要延時呈現(xiàn)的元素嵌入到自定義類型的script標簽中。可選地，判斷是否要解析和渲染所注冊的元素包括步驟判斷所注冊的元素是否位于瀏覽器的當(dāng)前窗口中?？蛇x地，判斷是否要解析和渲染所注冊的元素包括步驟判斷頁面是否在瀏覽器的窗口中滾動。可選地，該方法還包括步驟當(dāng)瀏覽器的當(dāng)前窗口上呈現(xiàn)的內(nèi)容發(fā)生變化時，判斷是否要解析和渲染所存儲的已注冊的元素，如果要解析和渲染，則解析和渲染所注冊的元素。根據(jù)本發(fā)明的另一個方面，提供一種在瀏覽器中處理頁面的設(shè)備，包括元素注冊器，被配置為對頁面中需要延時呈現(xiàn)的元素進行注冊；元素解析和渲染器，被配置為在瀏覽器中解析和渲染該頁面中未注冊的元素；元素解析和渲染判定器，被配置為判斷是否要解析和渲染所注冊的元素，如果要解析和渲染，則由元素解析和渲染器在瀏覽器中解析和渲染所注冊的元素；元素暫存器，被配置為存儲元素解析和渲染判定器判斷為不解析和渲染的已注冊元素；以及元素呈現(xiàn)器，被配置為呈現(xiàn)由元素解析和渲染器所解析和渲染的、位于瀏覽器的當(dāng)前窗口中的元素。
可選地，其中元素注冊器將需要延時呈現(xiàn)的元素嵌入到自定義類型的script標簽中來進行注冊?？蛇x地，其中元素解析和渲染判定器通過判斷所注冊的元素是否位于瀏覽器的當(dāng)前窗口中來判斷是否要解析和渲染所注冊的元素。可選地，元素解析和渲染判定器通過判斷頁面是否在瀏覽器的窗口中滾動來判斷是否要解析和渲染所注冊的元素?？蛇x地，其中當(dāng)瀏覽器的當(dāng)前窗口上呈現(xiàn)的內(nèi)容發(fā)生變化時，元素解析和渲染判定器判斷是否要解析和渲染元素暫存器所存儲的已注冊的元素，如果要解析和渲染，則由元素解析和渲染器來解析和渲染由元素暫存器存儲的已注冊的元素。根據(jù)本發(fā)明的在瀏覽器中處理頁面的方法及設(shè)備方法，可以通過對注冊過的需要延時呈現(xiàn)的元素進行延時呈現(xiàn)，以使得對頁面中的注冊過的元素進行延時呈現(xiàn)處理，從而不僅能對頁面中的圖片進行延時呈現(xiàn)處理，而且能對其它的頁面元素進行延時呈現(xiàn)處理，由此有效提高了頁面的顯示速度。上述說明僅是本發(fā)明技術(shù)方案的概述，為了能夠更清楚了解本發(fā)明的技術(shù)手段，而可依照說明書的內(nèi)容予以實施，并且為了讓本發(fā)明的上述和其它目的、特征和優(yōu)點能夠更明顯易懂，以下特舉本發(fā)明的具體實施方式
。


通過閱讀下文優(yōu)選實施方式的詳細描述，各種其他的優(yōu)點和益處對于本領(lǐng)域普通技術(shù)人員將變得清楚明了。附圖僅用于示出優(yōu)選實施方式的目的，而并不認為是對本發(fā)明的限制。而且在整個附圖中，用相同的參考符號表示相同的部件。在附圖中圖1示出了根據(jù)本發(fā)明一個實施例的在瀏覽器中處理頁面的方法的流程圖；以及圖2示出了根據(jù)本發(fā)明一個實施例的在瀏覽器中處理頁面的設(shè)備的框圖。
具體實施例方式下面將參照附圖更詳細地描述本公開的示例性實施例。雖然附圖中顯示了本公開的示例性實施例，然而應(yīng)當(dāng)理解，可以以各種形式實現(xiàn)本公開而不應(yīng)被這里闡述的實施例所限制。相反，提供這些實施例是為了能夠更透徹地理解本公開，并且能夠?qū)⒈竟_的范圍完整的傳達給本領(lǐng)域的技術(shù)人員。Web頁面運行在各種各樣的瀏覽器當(dāng)中，瀏覽器載入、解析和渲染頁面的速度直接影響著用戶體驗。本發(fā)明提出一種在瀏覽器中處理頁面的方法和一種在瀏覽器中處理頁面的設(shè)備。本發(fā)明提出的在瀏覽器中處理頁面的方法主要是，通過對需要延時呈現(xiàn)的元素進行注冊，然后對所注冊的需要延時呈現(xiàn)的元素進行延時解析、渲染和呈現(xiàn)，以使得對頁面中的注冊過的元素進行延時呈現(xiàn)處理，不僅能對頁面中的圖片進行延時呈現(xiàn)處理，而且能對其它的頁面元素進行延時呈現(xiàn)處理，從而提高頁面顯示速度。下面結(jié)合圖1具體說明根據(jù)本發(fā)明一個實施例的、適于解決上述技術(shù)問題的在瀏覽器中處理網(wǎng)頁的方法100的流程圖。如圖1所示，本發(fā)明的在瀏覽器中處理頁面的方法100始于步驟S110，在步驟SllO中，對頁面中需要延時呈現(xiàn)的元素進行注冊?？蛇x地，需要延時呈現(xiàn)的元素可以是文字、圖像(靜態(tài)圖像和動態(tài)圖像)、Flash動畫、聲音、視頻、表格、導(dǎo)航欄和交互式表單中的任
意一種。可選地，在步驟SllO中，可通過將需要延時呈現(xiàn)的元素嵌入到自定義類型的script標簽中的方式實現(xiàn)注冊需要延時呈現(xiàn)的元素，其代碼如下〈script type=” lazyload，，>這里是要延時呈現(xiàn)的HTML代碼〈/script〉通過注冊可以將部分HTML代碼變成某種注釋，而不讓瀏覽器將這些代碼解析(parse)、渲染(render)并呈現(xiàn)。隨后，在步驟S120中，在瀏覽器中解析和渲染該頁面中未注冊的元素。其中，例如，頁面解析和渲染可以是瀏覽器將HTML代碼根據(jù)HTML規(guī)范定義的規(guī)則而準備要顯示在瀏覽器窗口中的網(wǎng)頁內(nèi)容的過程?？蛇x地，未注冊的元素可以是文字、圖像(靜態(tài)圖像和動態(tài)圖像)、Flash動畫、聲音、視頻、表格、導(dǎo)航欄和交互式表單中的任意一種。可選地，可通過頁面渲染引擎來解析和渲染該頁面中未注冊的元素，頁面渲染引擎負責(zé)處理網(wǎng)頁的內(nèi)容(HTML、XML、圖像等)、整理信息(例如加入CSS等)，解析出網(wǎng)頁中各個元素之間的關(guān)系，以及計算和準備好網(wǎng)頁最后要在顯示器上的顯示結(jié)果。頁面渲染引擎可以是Trident排版引擎(是微軟的視窗操作系統(tǒng)(Windows)搭載的網(wǎng)頁瀏覽器一Internet Explorer的排版引擎的名稱),也可以是Gecko排版引擎(是套開放源代碼的、以C++編寫的網(wǎng)頁排版引擎)。當(dāng)然可以理解的是，在本發(fā)明的實施例中并不限定頁面渲染引擎的具體類型。隨后，在步驟S130中，判斷是否要解析和渲染所注冊的元素?？蛇x地，可通過以下兩種方式判定是否要解析和渲染所注冊的元素方式一、判斷所注冊的元素是否位于瀏覽器的當(dāng)前窗口中，這可以根據(jù)在頁面渲染引擎所分析的、在所注冊元素周圍的非注冊元素是否顯示在瀏覽器的當(dāng)前窗口中來進行判斷；方式二、判斷頁面是否在瀏覽器的窗口中滾動。其中，位于瀏覽器的當(dāng)前窗口中的元素是指頁面中在瀏覽當(dāng)前窗口中顯示的元素。通常一個頁面由一個HTML文檔形成，一個HTML文檔的整體高度高于瀏覽器窗口的高度，那么一部分的頁面會處于隱藏的狀態(tài)，可以通過移動瀏覽器的滾動條來達到查看處于隱藏狀態(tài)的部分頁面。在一些實施例中，在瀏覽器中解析和渲染該頁面中未注冊的元素，解析和渲染完成后，判斷是否需要解析和渲染所注冊的元素，如果元素需要立即呈現(xiàn)(注冊的元素位于瀏覽器的當(dāng)前窗口或向下滾動頁面)，則進入步驟S140，在步驟S140，在瀏覽器中解析和渲染所注冊的元素；否則，進入步驟S150，在步驟S150，存儲所注冊的元素，等待合適時機(例如當(dāng)瀏覽器的當(dāng)前窗口上呈現(xiàn)的內(nèi)容發(fā)生變化時)再進行呈現(xiàn)。該部分的實現(xiàn)代碼如下//遍歷所有注冊的元素
I (f script [type=lazyload],). each (funct Ion () { ar Ithis = $ (this);
//不是瀏覽器的當(dāng)前窗口或用戶滾動到的元素
if (!this, offset 0 . top - S (window) scroI ITop () > document,doc iiiiien t EI einen t. client He i ght) {
//存儲不需立即呈現(xiàn)的元素
lazy, push (Sth is);
}else {
//否則，立即呈現(xiàn)
replace (Sthi s);
}
D；在步驟S130中判斷需要解析和渲染而進入到步驟S140，在步驟S140中對所注冊的元素在瀏覽器中進行解析和渲染之后，進入步驟S160，在步驟S160中，呈現(xiàn)所渲染的、位于瀏覽器的當(dāng)前窗口中的元素，然后結(jié)束整個方法流程100。可選地，當(dāng)需要呈現(xiàn)元素時(即注冊的元素位于瀏覽器的當(dāng)前窗口或向下滾動頁面時)，則對注冊的元素進行呈現(xiàn)，步驟S160的部分實現(xiàn)代碼如下
var replace = fund ion (ele) {
ele = typeof ele == 'object' ele : this: ele, repiacef i th (ele. val () I jele. html 0);
} *
J I另外，在步驟S130中判斷不需要解析和渲染時，則進入到步驟S150，而在步驟S150之后，還返回到步驟S130中，這樣，在瀏覽器的當(dāng)前窗口上呈現(xiàn)的內(nèi)容發(fā)生變化時，在步驟S130中還可以判斷是否要呈現(xiàn)之前未被解析和渲染而被存儲的所注冊的元素。需要說明的是，圖1所示的方法并不限定按所示的各步驟的順序進行，可以根據(jù)需要調(diào)整各步驟的先后順序，例如步驟S120也可在步驟S160之后，或者與步驟S160同時進行，另外，所述步驟也不限定于上述步驟劃分，上述步驟可以進一步拆分成更多步驟也可以合并成更少步驟。下面結(jié)合一個具體的示例，來介紹本發(fā)明的實施例中的在瀏覽器中處理頁面的方法的流程，實現(xiàn)代碼如下
權(quán)利要求
1.一種在瀏覽器中處理頁面的方法，包括步驟對頁面中需要延時呈現(xiàn)的元素進行注冊；在瀏覽器中解析和渲染該頁面中未注冊的元素；判斷是否要解析和渲染所注冊的元素，如果要解析和渲染，則在瀏覽器中解析和渲染所注冊的元素，否則存儲所注冊的元素；以及呈現(xiàn)所解析和渲染的、位于瀏覽器的當(dāng)前窗口中的元素。
2.根據(jù)權(quán)利要求1所述的方法，其中所述對頁面中需要延時呈現(xiàn)的元素進行注冊的步驟包括將需要延時呈現(xiàn)的元素嵌入到自定義類型的script標簽中。
3.根據(jù)權(quán)利要求1或者2所述的方法，其中，所述判斷是否要解析和渲染所注冊的元素包括步驟判斷所注冊的元素是否位于瀏覽器的當(dāng)前窗口中。
4.根據(jù)權(quán)利要求1或者2所述的方法，其中所述判斷是否要解析和渲染所注冊的元素包括步驟判斷所述頁面是否在瀏覽器的窗口中滾動。
5.根據(jù)權(quán)利要求1-4中任一個所述的方法，還包括步驟，當(dāng)瀏覽器的當(dāng)前窗口上呈現(xiàn)的內(nèi)容發(fā)生變化時，判斷是否要解析和渲染所存儲的已注冊的元素，如果要解析和渲染，則解析和渲染所注冊的元素。
6.一種在瀏覽器中處理頁面的設(shè)備，包括元素注冊器，被配置為對頁面中需要延時呈現(xiàn)的元素進行注冊；元素解析和渲染器，被配置為在瀏覽器中解析和渲染該頁面中未注冊的元素；元素解析和渲染判定器，被配置為判斷是否要解析和渲染所注冊的元素，如果要解析和渲染，則由所述元素解析和渲染器在瀏覽器中解析和渲染所注冊的元素；元素暫存器，被配置為存儲所述元素解析和渲染判定器判斷為不解析和渲染的已注冊元素；以及元素呈現(xiàn)器，被配置為呈現(xiàn)由元素解析和渲染器所渲染的、位于瀏覽器的當(dāng)前窗口中的元素。
7.如權(quán)利要求6所述的設(shè)備，其中所述元素注冊器將需要延時呈現(xiàn)的元素嵌入到自定義類型的script標簽中來進行注冊。
8.如權(quán)利要求6或者7所述的設(shè)備，其中所述元素解析和渲染判定器通過判斷所注冊的元素是否位于瀏覽器的當(dāng)前窗口中來判斷是否要解析和渲染所注冊的元素。
9.如權(quán)利要求6或者7所述的設(shè)備，其中所述元素解析和渲染判定器通過判斷所述頁面是否在瀏覽器的窗口中滾動來判斷是否要解析和渲染所注冊的元素。
10.根據(jù)權(quán)利要求6-9中任一所述的設(shè)備，其中當(dāng)瀏覽器的當(dāng)前窗口上呈現(xiàn)的內(nèi)容發(fā)生變化時，所述元素解析和渲染判定器判斷是否要解析和渲染所述元素暫存器所存儲的已注冊的元素，如果要解析和渲染，則由所述元素解析和渲染器來解析和渲染由所述元素暫存器存儲的已注冊的元素。
全文摘要
本發(fā)明公開了一種在瀏覽器中處理頁面的方法及設(shè)備，該方法包括對頁面中需要延時呈現(xiàn)的元素進行注冊；在瀏覽器中解析并渲染該頁面中未注冊的元素；判斷是否要解析并渲染所注冊的元素，如果要解析并渲染，則在瀏覽器中解析并渲染所注冊的元素，否則存儲所注冊的元素；以及呈現(xiàn)所渲染的、位于瀏覽器的當(dāng)前窗口中的元素。通過對需要延時呈現(xiàn)的元素進行注冊，然后對所注冊的需要延時呈現(xiàn)的元素進行延時解析、渲染和呈現(xiàn)，從而不僅能對頁面中的圖片進行延時呈現(xiàn)處理，而且能對其它的頁面元素進行延時呈現(xiàn)處理，由此有效提高了頁面的顯示速度。
文檔編號G06F9/44GK103019720SQ20121054498
公開日2013年4月3日 申請日期2012年12月14日 優(yōu)先權(quán)日2012年12月14日
發(fā)明者韓學(xué)斌, 黃歡 申請人:北京奇虎科技有限公司, 奇智軟件(北京)有限公司