專利名稱：一種頁面渲染的方法及裝置的制作方法
技術領域：
本申請涉及網(wǎng)頁處理的技術領域，特別是涉及一種瀏覽器頁面渲染的方法，一種用于頁面渲染的瀏覽器，一種服務器頁面渲染的方法，以及，一種用于頁面渲染的服務器。
背景技術：
打開網(wǎng)頁的過程即是瀏覽器渲染的過程，渲染的方式是根據(jù)CSS (CascadingStyle Sheet,可譯為“層疊樣式表”或“級聯(lián)樣式表”)來渲染html (Hypertext MarkupLanguage,超文本標記語言)。具體而言，html是一種規(guī)范，一種標準，它通過標記符號來標記要顯示的網(wǎng)頁中的各個部分。網(wǎng)頁文件本身是一種文本文件，通過在文本文件中添加標記符，可以告訴瀏覽器如何顯示其中的內(nèi)容，如文字如何處理，畫面如何安排，圖片如何顯示等。瀏覽器按順序閱讀網(wǎng)頁文件，然后根據(jù)標記符解釋和顯示其標記的內(nèi)容。CSS是一組格式設置規(guī)則，用于控制Web頁面的外觀。通過使用CSS樣式設置頁面的格式，可將頁面的內(nèi)容與表現(xiàn)形式分離。頁面內(nèi)容存放在html文檔中，而用于定義表現(xiàn)形式的CSS規(guī)則則存放在另一個文件中或html文檔的某一部分，通常為文件頭部分。這樣通過僅僅編輯一個簡單的CSS文檔，外部樣式表就可以同時改變站點中所有頁面的布局和外觀。不僅可使維護站點的外觀更加容易，而且還可以使html文檔代碼更加簡練，縮短瀏覽器的加載時間。由于允許同時控制多重頁面的樣式和布局，CSS可以稱得上WEB設計領域的一個突破。網(wǎng)站開發(fā)者能夠為每個html元素定義樣式，并將之應用于所希望的任意多的頁面中。如需進行全局的更新，只需簡單地改變CSS樣式，然后網(wǎng)站中的所有元素均會自動地更新。采用現(xiàn)有的瀏覽器渲染技術，用戶輸入網(wǎng)址，瀏覽器向服務器發(fā)出請求，服務器端把html和CSS傳給瀏覽器(即服務器端輸出渲染好的html到瀏覽器)，瀏覽器開始根據(jù)CSS渲染html，渲染的順序也是從上到下。具體渲染過程中，瀏覽器先解析html，構(gòu)造一個內(nèi)部文件樹來代表所有顯示的元素，然后瀏覽器根據(jù)標準的CSS級聯(lián)、繼承和排序規(guī)則，為元素指定匹配的各種樣式，生成一個渲染樹(render tree)，當渲染樹生成之后，瀏覽器就會在屏幕上“畫”出所有渲染樹中的節(jié)點，從而生成整個頁面。以上現(xiàn)有技術中存在的問題是，在頁面顯示的過程中，有很多的CSS作用在頁面元素上，這些CSS來自不同的地方。瀏覽器自己有默認的CSS，網(wǎng)頁作者有自己寫的CSS，還可能包括其它各種第三方的CSS，如用戶通過開放的網(wǎng)絡設計平臺加入的CSS，CSS文件比較特殊，在其下載完成后，將和以前下載的所有CSS —起進行解析，解析完成后，將對此前所有元素(含以前已經(jīng)渲染的)重新進行樣式渲染。并以此方式一直渲染下去，直到整個頁面渲染完成。在這種情況下，網(wǎng)頁作者的樣式和第三方的樣式會在同一個級別被瀏覽器渲染，它們之間會存在相互影響和干擾，不能生成用戶所希望效果的頁面。因此，目前需要本領域技術人員迫切解決的一個技術問題就是如何創(chuàng)造性地提出一種頁面渲染機制，用以保證在同一個頁面中，引入多方代碼不會相互影響和干擾，從而獲得預期頁面效果。

發(fā)明內(nèi)容
本申請所要解決的技術問題是提供一種瀏覽器頁面渲染方法和一種服務器頁面渲染方法，用以保證在同一個頁面中，引入多方代碼不會相互影響和干擾，從而獲得預期頁面效果。本申請還提供了一種瀏覽器頁面渲染裝置和一種服務器頁面渲染裝置，用以保證上述方法在實際中的應用及實現(xiàn)。為了解決上述問題，本申請公開了一種瀏覽器頁面渲染的方法，包括瀏覽器自上而下渲染頁面；當渲染到采用預設標識標記的特征渲染區(qū)域時，獲取特征CSS文件，所述特征CSS文件為具有所述特征渲染區(qū)域相應標識的CSS文件；根據(jù)所述特征CSS文件渲染所述特征渲染區(qū)域。優(yōu)選的，所述特征渲染區(qū)域由超文本標記語言html標簽定義，所述采用預設標識標記的特征渲染區(qū)域為，具有預設標識的類名的超文本標記語言html標簽所對應的特征渲染區(qū)域。優(yōu)選的，所述特征渲染區(qū)域包括特征渲染元素，所述特征CSS文件中包括具有所述預設標識作為前綴的CSS選擇器。優(yōu)選的，所述獲取特征CSS文件的步驟為，根據(jù)所述特征渲染區(qū)域?qū)猦tml標簽的類名，提取具有與所述類名匹配的標識為前綴的CSS選擇器；所述根據(jù)特征CSS文件渲染特征渲染區(qū)域的步驟為，根據(jù)所述特征CSS文件，渲染所述特征渲染區(qū)域的超文本標記語言html。優(yōu)選的，所述特征渲染區(qū)域還包括非特征渲染元素，所述的方法還包括過濾所述特征CSS文件中，非特征渲染元素對應的CSS選擇器。優(yōu)選的，所述過濾特征CSS文件中非特征渲染元素對應的CSS選擇器的步驟包括針對特征CSS文件中特征渲染元素對應的CSS選擇器，添加第一標識的前綴；針對特征CSS文件中非特征渲染元素對應的CSS選擇器，添加第二標識的前綴；從所述特征CSS文件中刪除具有所述第二標識前綴的CSS選擇器，和/或，保留具 有所述第一標識前綴的CSS選擇器。優(yōu)選的，所述方法，還包括過濾掉所述特征CSS文件中不符合預定義屬性的CSS選擇器。本申請還提供了一種用于頁面渲染的瀏覽器，包括頁面渲染模塊，用于自上而下渲染頁面；特征CSS文件獲取模塊，用于在渲染到采用預設標識標記的特征渲染區(qū)域時，獲取特征CSS文件，所述特征CSS文件為為具有所述特征渲染區(qū)域相應標識的CSS文件；特征渲染模塊，用于根據(jù)所述特征CSS文件渲染所述特征渲染區(qū)域。
本申請還提供了一種服務器頁面渲染的方法，包括在 頁面中設置特征渲染區(qū)域，并采用預設標識標記所述特征渲染區(qū)域；接收瀏覽器發(fā)起的特征CSS文件獲取請求，并依據(jù)所述請求向瀏覽器傳送特征CSS文件；其中，所述特征CSS文件為具有所述特征渲染區(qū)域相應標識的CSS文件，所述瀏覽器用于根據(jù)所述特征CSS文件渲染所述特征渲染區(qū)域。本申請還提供了一種用于頁面渲染的服務器，包括特征區(qū)域設置模塊，用于在頁面中設置特征渲染區(qū)域，并采用預設標識標記所述特征渲染區(qū)域；交互模塊，用于接收瀏覽器發(fā)起的特征CSS文件獲取請求，并依據(jù)所述請求向瀏覽器傳送特征CSS文件，所述特征CSS文件為具有所述特征渲染區(qū)域相應標識的CSS文件，所述瀏覽器用于根據(jù)所述特征CSS文件渲染所述特征渲染區(qū)域。與現(xiàn)有技術相比，本申請具有以下優(yōu)點本申請通過在頁面中設置特征渲染區(qū)域，對特征渲染區(qū)域和CSS進行相應的標記，實現(xiàn)CSS文件和其在頁面渲染的區(qū)域一一對應。瀏覽器對頁面進行渲染的時候，針對不同的區(qū)域，提取對應的CSS文件進行渲染，由此，來自不同地方的CSS針對的只渲染頁面中對應的區(qū)域，從而避免了各方CSS之間互相影響和干擾，獲得預期的頁面效果。


圖I是本申請的一種瀏覽器頁面渲染的方法實施例I的流程圖；圖2是本申請的一種瀏覽器頁面渲染的方法實施例2的流程圖；圖3是本申請的一種瀏覽器頁面渲染的方法實施例3的流程圖；圖4是本申請的一種用于頁面渲染的瀏覽器實施例I的結(jié)構(gòu)框圖；圖5是本申請的一種用于頁面渲染的瀏覽器實施例2的結(jié)構(gòu)框圖；圖6是本申請的一種用于頁面渲染的瀏覽器實施例3的結(jié)構(gòu)框圖；圖7是本申請的一種服務器頁面渲染的方法實施例的流程圖；圖8是本申請的一種用于頁面渲染的瀏覽器實施例的結(jié)構(gòu)框圖。
具體實施例方式為使本申請的上述目的、特征和優(yōu)點能夠更加明顯易懂，下面結(jié)合附圖和具體實施方式
對本申請作進一步詳細的說明。為使本領域技術人員更好地理解本申請，以下對瀏覽器加載和解析頁面的過程簡單說明。瀏覽器加載解析網(wǎng)頁的順序大致如下瀏覽器下載CSS文件的順序是從上到下，網(wǎng)頁渲染的順序也是從上到下，下載和渲染是同時進行的。在渲染到頁面的某一部分時，其上面的所有部分都已經(jīng)下載完成(并不是說所有相關聯(lián)的元素都已經(jīng)下載完)。在下載過程中，如果遇到某一標簽是嵌入文件，并且文件是具有語義解釋性的(例如JS腳本，CSS樣式)，那么此時IE的下載過程會啟用單獨連接進行下載，并且在下載后進行解析，解析(JS、CSS中如有重定義，后定義函數(shù)將覆蓋前定義函數(shù))過程中，停止頁面所有往下元素的下載。CSS文件比較特殊，在其下載完成后，將和以前下載的所有CSS元素一起進行解析，解析完成后，將對此前所有元素(含以前已經(jīng)渲染的)重新進行樣式渲染。并以此方式一直渲染下去，直到整個頁面渲染完成。HTML頁面加載和解析流程如下I.用戶輸入網(wǎng)址(假設是個html頁面，并且是第一次訪問)，瀏覽器向服務器發(fā)出請求，服務器返回html文件；2.瀏覽器開始載入html代碼，發(fā)現(xiàn)〈head〉標簽內(nèi)有一個〈link〉標簽引用外部CSS文件；3.瀏覽器又發(fā)出CSS文件的請求，服務器返回這個CSS文件；4.瀏覽器繼續(xù)載入html中〈body〉部分的代碼，并且CSS文件已經(jīng)拿到手了，可以開始渲染頁面了；5.瀏覽器在代碼中發(fā)現(xiàn)一個<img>標簽引用了一張圖片，向服務器發(fā)出請求。此時瀏覽器不會等到圖片下載完，而是繼續(xù)渲染后面的代碼；6.服務器返回圖片文件，由于圖片占用了一定面積，影響了后面段落的排布，因此瀏覽器需要重新渲染這部分代碼；7.瀏覽器發(fā)現(xiàn)了一個包含一行Javascript代碼的〈script〉標簽，于是運行它；8. Javascript腳本執(zhí)行了這條語句，命令瀏覽器隱藏掉代碼中的某個<div> (style, display =”none”)。由于該元素的缺失,瀏覽器不得不重新渲染這部分代碼；9.瀏覽器繼續(xù)載入html，繼續(xù)進行渲染；10.此時，若用戶點擊了界面中的“換膚”按鈕，Javascript會使瀏覽器更換〈link〉標簽的CSS路徑；11.此時,瀏覽器會重新下載各個〈divXspanXulXli〉元素，同時向服務器請求了新的CSS文件，重新渲染頁面。以上是瀏覽器打開頁面的過程中，由于頁面顯示過程中有來自不同地方的CSS作用在頁面元素上，所有的CSS下載完成進行解析之后將在同一個級別上被渲染，他們之間會存在相互影響和干擾，不能生成用戶所希望的頁面。正是由于本專利發(fā)明人發(fā)現(xiàn)了以上問題，因而創(chuàng)造性地提出本申請的核心構(gòu)思之一在于，在頁面中設置特征渲染區(qū)域，對特征渲染區(qū)域和定義該區(qū)域的CSS文件采用同樣的標識進行標記，從而使得CSS文件和其要渲染的區(qū)域?qū)崿F(xiàn)一一對應，不會互相干擾。參考圖1，示出了本申請的一種瀏覽器頁面渲染的方法實施例I的流程圖，具體可以包括以下步驟
步驟101、瀏覽器自上而下渲染頁面；步驟102、當渲染到采用預設標識標記的特征渲染區(qū)域時，獲取特征CSS文件，所述特征CSS文件為具有所述特征渲染區(qū)域相應標識的CSS文件。在本申請實施例中，所述特征渲染區(qū)域可以為需要引入第三方前端代碼的區(qū)域，即由第三方前端代碼渲染的區(qū)域。例如，頁面中的頁頭部分和頁尾部分由當前頁面的原始CSS渲染，而頁頭以下，頁尾以上的部分需要由第三方前端代碼渲染，則所述頁頭以下，頁尾以上的區(qū)域即為當前頁面的特征渲染區(qū)域。
當然，本領域技術人員根據(jù)實際情況在頁面中任意設置特征渲染區(qū)域都是可行的，本申請對此無需加以限制。在具體實現(xiàn)中，所述特征渲染區(qū)域可以由超文本標記語言html標簽定義，具體而言，html標簽由開始標簽和結(jié)束標簽組成，開始標簽是被括號包圍的元素名，如<XXX>，結(jié)束標簽是被括號包圍的斜杠和元素名，如</χχχ>。例如，開始<div>到結(jié)束</div>。在這種情況下，設置特征渲染區(qū)域的方法可以采用在某個標簽加上屬性class =”XXX”的方法，那么，該標簽從開始〈XXX〉到結(jié)束</XXX>里面的代碼都是特征渲染區(qū)域。在本申請的一種優(yōu)選實施例中，
所述采用預設標識標記的特征渲染區(qū)域為，具有預設標識的類名的超文本標記語言html標簽所對應的特征渲染區(qū)域。例如，假設特征渲染區(qū)域是在html的某個div上，設置預設標識為tb-shop,那么，特征渲染區(qū)域?qū)脑糷tml為
權(quán)利要求
1.一種瀏覽器頁面渲染的方法，其特征在于，包括 瀏覽器自上而下渲染頁面； 當渲染到采用預設標識標記的特征渲染區(qū)域時， 獲取特征CSS文件，所述特征CSS文件為具有所述特征渲染區(qū)域相應標識的CSS文件； 根據(jù)所述特征CSS文件渲染所述特征渲染區(qū)域。
2.根據(jù)權(quán)利要求I所述的方法，其特征在于，所述特征渲染區(qū)域由超文本標記語言html標簽定義，所述采用預設標識標記的特征渲染區(qū)域為，具有預設標識的類名的超文本標記語言html標簽所對應的特征渲染區(qū)域。
3.根據(jù)權(quán)利要求I或2所述的方法，其特征在于，所述特征渲染區(qū)域包括特征渲染元素，所述特征CSS文件中包括具有所述預設標識作為前綴的CSS選擇器。
4.根據(jù)權(quán)利要求3所述的方法，其特征在于，所述獲取特征CSS文件的步驟為，根據(jù)所述特征渲染區(qū)域?qū)猦tml標簽的類名，提取具有與所述類名匹配的標識為前綴的CSS選擇器； 所述根據(jù)特征CSS文件渲染特征渲染區(qū)域的步驟為，根據(jù)所述特征CSS文件，渲染所述特征渲染區(qū)域的超文本標記語言html。
5.根據(jù)權(quán)利要求3所述的方法，其特征在于，所述特征渲染區(qū)域還包括非特征渲染元素，所述的方法還包括 過濾所述特征CSS文件中，非特征渲染元素對應的CSS選擇器。
6.根據(jù)權(quán)利要求5所述的方法，其特征在于，所述過濾特征CSS文件中非特征渲染元素對應的CSS選擇器的步驟包括 針對特征CSS文件中特征渲染元素對應的CSS選擇器，添加第一標識的前綴； 針對特征CSS文件中非特征渲染元素對應的CSS選擇器，添加第二標識的前綴； 從所述特征CSS文件中刪除具有所述第二標識前綴的CSS選擇器，和/或，保留具有所述第一標識前綴的CSS選擇器。
7.根據(jù)權(quán)利要求4、5或6所述的方法，還包括 過濾掉所述特征CSS文件中不符合預定義屬性的CSS選擇器。
8.一種用于頁面渲染的瀏覽器，其特征在于，包括 頁面渲染模塊，用于自上而下渲染頁面； 特征CSS文件獲取模塊，用于在渲染到采用預設標識標記的特征渲染區(qū)域時，獲取特征CSS文件，所述特征CSS文件為為具有所述特征渲染區(qū)域相應標識的CSS文件； 特征渲染模塊，用于根據(jù)所述特征CSS文件渲染所述特征渲染區(qū)域。
9.一種服務器頁面渲染的方法，其特征在于，包括 在頁面中設置特征渲染區(qū)域，并采用預設標識標記所述特征渲染區(qū)域； 接收瀏覽器發(fā)起的特征CSS文件獲取請求，并依據(jù)所述請求向瀏覽器傳送特征CSS文件；其中，所述特征CSS文件為具有所述特征渲染區(qū)域相應標識的CSS文件，所述瀏覽器用于根據(jù)所述特征CSS文件渲染所述特征渲染區(qū)域。
10.一種用于頁面渲染的服務器，其特征在于，包括 特征區(qū)域設置模塊，用于在頁面中設置特征渲染區(qū)域，并采用預設標識標記所述特征渲染區(qū)域；交互模塊，用于接收瀏覽器發(fā)起的特征CSS文件獲取請求，并依據(jù)所述請求向瀏覽器傳送特征CSS文件，所述特征CSS文件為具有所述特征渲染區(qū)域相應標識的CSS文件，所述瀏覽器用于根據(jù)所述特征CSS文件渲染所述特征渲染區(qū)域。
全文摘要
本申請?zhí)峁┝艘环N頁面渲染的方法及裝置，其中，一種瀏覽器頁面渲染的方法包括瀏覽器自上而下渲染頁面；當渲染到采用預設標識標記的特征渲染區(qū)域時，獲取特征CSS文件，所述特征CSS文件為具有所述特征渲染區(qū)域相應標識的CSS文件；根據(jù)所述特征CSS文件渲染所述特征渲染區(qū)域。本申請可以保證在同一個頁面中，引入多方代碼不會相互影響和干擾，從而獲得預期頁面效果。
文檔編號G06F17/30GK102915308SQ201110220270
公開日2013年2月6日 申請日期2011年8月2日 優(yōu)先權(quán)日2011年8月2日
發(fā)明者黃巧玲 申請人:阿里巴巴集團控股有限公司