專利名稱：輸出網(wǎng)頁的方法和系統(tǒng)的制作方法
技術(shù)領(lǐng)域：
本申請(qǐng)涉及計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)，尤其涉及一種輸出網(wǎng)頁的方法和系統(tǒng)。
背景技術(shù)：
在網(wǎng)頁性能優(yōu)化領(lǐng)域，公認(rèn)的第一法則是減少HTTP請(qǐng)求的數(shù)量，而圖片往往是網(wǎng)頁上數(shù)量最多的第一大類請(qǐng)求，因此，如何在不影響圖片展示效果的前提下減少圖片請(qǐng)求的數(shù)量成為了一個(gè)關(guān)鍵問題。目前，業(yè)界標(biāo)準(zhǔn)的做法被稱為CSSSprites，其基本原理如圖I所示。圖I是根據(jù) 現(xiàn)有技術(shù)的CSS Sprites方法的示意圖。CSS Sprites方法是利用了 CSS可定位展示背景圖片的特性，主要步驟為1)先將網(wǎng)頁涉及的多張圖片按橫向或縱向排列的方式合并成一張圖片，如圖中的圖片11、圖片12和圖片13被合并成圖片123 ；2)然后為本來該插入圖片的網(wǎng)頁元素綁定一段CSS,其中通過background-image:url (…)屬性指定該元素的背景圖片為I)中合并后的圖片，并通過background-position:x y屬性指定背景圖片的起始展示位置(即圖片左上角與包含圖片的元素的左上角的相對(duì)位置)。經(jīng)過如上兩步，對(duì)多個(gè)圖片的請(qǐng)求就變成了一個(gè)對(duì)合并后圖片的請(qǐng)求，每次請(qǐng)求返回的圖片是圖片123，由展示位置的控制使得展示的內(nèi)容最終為橢圓10中的內(nèi)容，這樣就達(dá)到了減少網(wǎng)頁上HTTP請(qǐng)求數(shù)量的目的。目前CSSSprites是在開發(fā)階段通過人工操作完成，對(duì)于人工操作而言，合并圖片和編寫CSS都是費(fèi)時(shí)且容易出錯(cuò)的工作，因?yàn)槎ㄎ槐尘皥D片需要精確的計(jì)算和逐像素的調(diào)試，并且每當(dāng)有新圖片加入或包含圖片的元素內(nèi)容調(diào)整時(shí)，都得重新進(jìn)行圖片的合并和CSS的開發(fā)，因此制作網(wǎng)頁的效率較低，影響了新網(wǎng)頁上線的效率。在現(xiàn)有技術(shù)中，采用CSS Sprites方式優(yōu)化網(wǎng)頁性能時(shí)制作網(wǎng)頁的效率較低，對(duì)于該問題，目如尚未提出有效解決方案。

發(fā)明內(nèi)容
本申請(qǐng)的主要目的是提供一種輸出網(wǎng)頁的方法和系統(tǒng)，以解決現(xiàn)有技術(shù)中采用CSS Sprites方式優(yōu)化網(wǎng)頁性能時(shí)制作網(wǎng)頁的效率較低的問題。為了實(shí)現(xiàn)上述目的，根據(jù)本申請(qǐng)的一個(gè)方面，提供了一種輸出網(wǎng)頁的方法。本申請(qǐng)的輸出網(wǎng)頁的方法包括網(wǎng)絡(luò)服務(wù)設(shè)備接收網(wǎng)頁瀏覽裝置在解析網(wǎng)頁代碼時(shí)發(fā)送的背景請(qǐng)求信息，所述背景請(qǐng)求信息用于獲取由多個(gè)圖片合并而成的背景圖片，并且包含所述多個(gè)圖片的網(wǎng)絡(luò)地址；網(wǎng)絡(luò)服務(wù)設(shè)備根據(jù)所述多個(gè)圖片的地址獲取并且合并所述多個(gè)圖片，然后將合并圖片發(fā)送給所述網(wǎng)絡(luò)瀏覽裝置。進(jìn)一步地，在所述網(wǎng)絡(luò)服務(wù)設(shè)備接收所述背景請(qǐng)求信息之前，還包括所述網(wǎng)絡(luò)服務(wù)設(shè)備接收所述網(wǎng)頁瀏覽裝置發(fā)送的獲取網(wǎng)頁的請(qǐng)求，然后所述將待合并的多個(gè)圖片的尺寸、各個(gè)待合并圖片在所述合并圖片中的位置和所述合并圖片的網(wǎng)絡(luò)地址添加到用于響應(yīng)該請(qǐng)求的網(wǎng)頁代碼中，再將所述網(wǎng)頁代碼發(fā)送給所述網(wǎng)頁瀏覽裝置。
進(jìn)一步地，所述將待合并的多個(gè)圖片的尺寸、各個(gè)待合并圖片在所述合并圖片中的位置和所述合并圖片的網(wǎng)絡(luò)地址添加到用于響應(yīng)該請(qǐng)求的網(wǎng)頁代碼中包括根據(jù)待輸出的網(wǎng)頁代碼中的圖片元素的信息得出CSS類，以及為每個(gè)圖片元素綁定CSS類，并且將所述網(wǎng)頁代碼中的圖片元素的網(wǎng)絡(luò)地址替換為預(yù)設(shè)的透明圖片的網(wǎng)絡(luò)地址；所述CSS類中包括與該CSS類綁定的各個(gè)圖片元素的寬度和高度、所述合并圖片的網(wǎng)絡(luò)地址以及該圖片元素在所述合并圖片中的位置。進(jìn)一步地，在所述網(wǎng)絡(luò)服務(wù)設(shè)備將所述網(wǎng)頁代碼發(fā)送給所述網(wǎng)頁瀏覽裝置之后，并且在所述網(wǎng)絡(luò)服務(wù)設(shè)備接收所述背景請(qǐng)求信息之前，還包括根據(jù)所述網(wǎng)頁瀏覽裝置發(fā)送的用于獲取圖片元素處的前景圖片的前景請(qǐng)求信息，向所述網(wǎng)頁瀏覽裝置發(fā)送所述透明圖片。 進(jìn)一步地，所述圖片元素的信息包括所述圖片元素的長、寬屬性；所述得出CSS類包括根據(jù)所述圖片元素的長、寬屬性生成CSS類。進(jìn)一步地，所述圖片元素的信息包括所述圖片元素的網(wǎng)絡(luò)地址；所述得出CSS類包括根據(jù)所述圖片元素的網(wǎng)絡(luò)地址讀取圖片，根據(jù)讀取的圖片生成CSS類。進(jìn)一步地，將選擇的多個(gè)圖片元素進(jìn)行排列及合并包括將選擇的多個(gè)圖片元素按格式或網(wǎng)絡(luò)地址分組，并沿左右方向或上下方向按組排列，每組圖片排列與合并之后得到一個(gè)所述合并圖片。進(jìn)一步地，所述合并圖片的格式為png格式或被合并圖片的格式。根據(jù)本申請(qǐng)的另一方面，提供了一種輸出網(wǎng)頁的系統(tǒng)。本申請(qǐng)的輸出網(wǎng)頁的系統(tǒng)包括網(wǎng)頁服務(wù)器和圖片服務(wù)器，其中網(wǎng)頁服務(wù)器，用于接收網(wǎng)頁瀏覽裝置發(fā)送的獲取網(wǎng)頁的請(qǐng)求，以及生成網(wǎng)頁代碼然后發(fā)送給所述網(wǎng)頁瀏覽裝置；圖片服務(wù)器，用于接收網(wǎng)頁瀏覽裝置在解析網(wǎng)頁代碼時(shí)發(fā)送的背景請(qǐng)求信息，所述背景請(qǐng)求信息用于獲取由多個(gè)圖片合并而成的背景圖片，并且包含所述多個(gè)圖片的網(wǎng)絡(luò)地址；根據(jù)所述多個(gè)圖片的地址獲取并且合并所述多個(gè)圖片，然后將合并圖片發(fā)送給所述網(wǎng)絡(luò)瀏覽裝置。進(jìn)一步地，所述網(wǎng)頁服務(wù)器還用于將待合并的多個(gè)圖片的尺寸、各個(gè)待合并圖片在所述合并圖片中的位置和所述合并圖片的網(wǎng)絡(luò)地址添加到用于響應(yīng)該請(qǐng)求的網(wǎng)頁代碼中。進(jìn)一步地，所述圖片服務(wù)器還用于根據(jù)所述網(wǎng)頁瀏覽裝置發(fā)送的用于獲取圖片元素處的前景圖片的前景請(qǐng)求信息，向所述網(wǎng)頁瀏覽裝置發(fā)送透明圖片。進(jìn)一步地，所述網(wǎng)頁服務(wù)器還用于根據(jù)待輸出的網(wǎng)頁代碼中的圖片元素的信息得出CSS類，以及為每個(gè)圖片元素綁定CSS類，并且將所述網(wǎng)頁代碼中的圖片元素的網(wǎng)絡(luò)地址替換為預(yù)設(shè)的透明圖片的網(wǎng)絡(luò)地址；所述CSS類中包括與該CSS類綁定的各個(gè)圖片元素的寬度和高度、所述合并圖片的網(wǎng)絡(luò)地址以及該圖片元素在所述合并圖片中的位置。 進(jìn)一步地，所述網(wǎng)頁服務(wù)器還用于向所述圖片服務(wù)器發(fā)送CSS請(qǐng)求，所述CSS請(qǐng)求用于獲取所述待合并的多個(gè)圖片中的各個(gè)圖片元素的寬度和高度、所述合并圖片的網(wǎng)絡(luò)地址以及該圖片元素在所述合并圖片中的位置；所述圖片服務(wù)器還用于按照所述CSS請(qǐng)求向所述網(wǎng)頁服務(wù)器發(fā)送CSS類。根據(jù)本申請(qǐng)的技術(shù)方案，能夠?qū)⒍鄠€(gè)圖片請(qǐng)求合并成一個(gè)，減少HTTP請(qǐng)求數(shù)量，縮短頁面在瀏覽器中的加載時(shí)間；對(duì)合并后的圖片進(jìn)行無損壓縮后可減小頁面的總大小，進(jìn)一步縮短頁面在瀏覽器中的加載時(shí)間；頁面開發(fā)時(shí)可使用標(biāo)準(zhǔn)的<img>標(biāo)簽來插入圖片，無需預(yù)先合并圖片和編寫CSS，便于開發(fā)和調(diào)試。并且，在本申請(qǐng)實(shí)施例中，綁定CSS、合并圖片請(qǐng)求、合并圖片等都在服務(wù)器處理網(wǎng)頁請(qǐng)求的過程中動(dòng)態(tài)完成，無需開發(fā)階段的人工操作；在網(wǎng)頁上插入圖片的原位進(jìn)行前景和背景圖片的替換，簡化了 CSS的定位計(jì)算。因此，采用本申請(qǐng)實(shí)施例的技術(shù)方案有助于優(yōu)化網(wǎng)頁性能并且提高制作網(wǎng)頁的效率。


說明書附圖用來提供對(duì)本申請(qǐng)的進(jìn)一步理解，構(gòu)成本申請(qǐng)的一部分，本申請(qǐng)的示意性實(shí)施例及其說明用于解釋本申請(qǐng)，并不構(gòu)成對(duì)本申請(qǐng)的不當(dāng)限定。在附圖中圖I是根據(jù)現(xiàn)有技術(shù)的CSS Sprites方法的示意圖；圖2是與本申請(qǐng)實(shí)施例有關(guān)的一種網(wǎng)絡(luò)結(jié)構(gòu)的示意圖； 圖3是根據(jù)本申請(qǐng)實(shí)施例的輸出網(wǎng)頁的方法的主要步驟的示意圖；圖4是根據(jù)本申請(qǐng)實(shí)施例的輸出網(wǎng)頁的方法的一種具體流程的示意5是根據(jù)本申請(qǐng)實(shí)施例的輸出頁面圖片的過程的示意圖；圖6是根據(jù)本申請(qǐng)實(shí)施例的輸出網(wǎng)頁的系統(tǒng)的可選結(jié)構(gòu)的示意圖。
具體實(shí)施例方式需要說明的是，在不沖突的情況下，本申請(qǐng)中的實(shí)施例及實(shí)施例中的特征可以相互組合。下面將參考附圖并結(jié)合實(shí)施例來詳細(xì)說明本申請(qǐng)。圖2是與本申請(qǐng)實(shí)施例有關(guān)的一種網(wǎng)絡(luò)結(jié)構(gòu)的示意圖。如圖2所示，網(wǎng)絡(luò)服務(wù)設(shè)備21通過互聯(lián)網(wǎng)22與多個(gè)終端23連接，終端23使用網(wǎng)頁瀏覽裝置例如瀏覽器能夠從網(wǎng)絡(luò)服務(wù)設(shè)備處獲取網(wǎng)頁。本申請(qǐng)實(shí)施例中，由網(wǎng)絡(luò)服務(wù)設(shè)備完成圖片的合并操作，從而得到背景圖片然后提供給網(wǎng)頁瀏覽裝置，具體步驟如圖3所示，圖3是根據(jù)本申請(qǐng)實(shí)施例的輸出網(wǎng)頁的方法的主要步驟的示意圖。步驟S31 :網(wǎng)絡(luò)服務(wù)設(shè)備接收網(wǎng)頁瀏覽裝置發(fā)送的背景請(qǐng)求信息。本步驟中的背景請(qǐng)求信息是在網(wǎng)頁瀏覽裝置解析網(wǎng)頁代碼時(shí)生成并發(fā)送，用來獲取由多個(gè)圖片合并而成的背景圖片，并且包含上述多個(gè)圖片的網(wǎng)絡(luò)地址。步驟S33 :網(wǎng)絡(luò)服務(wù)設(shè)備根據(jù)多個(gè)圖片的地址獲取并且合并多個(gè)圖片。步驟S35 :網(wǎng)絡(luò)服務(wù)設(shè)備將合并圖片發(fā)送給網(wǎng)絡(luò)瀏覽裝置。從上述的步驟S31至S35可以看出，因?yàn)閳D片的合并工作是由網(wǎng)絡(luò)服務(wù)設(shè)備完成，較人工的做法而言有較高的處理效率，由此提高了制作網(wǎng)頁的效率。以下對(duì)本申請(qǐng)實(shí)施例的方案作具體說明。圖4是根據(jù)本申請(qǐng)實(shí)施例的輸出網(wǎng)頁的方法的一種具體流程的示意圖，如圖4所示，該方法可由網(wǎng)絡(luò)服務(wù)設(shè)備執(zhí)行，主要包括如下步驟步驟S41 :接收網(wǎng)頁瀏覽裝置發(fā)送的獲取網(wǎng)頁的請(qǐng)求；步驟S43 :根據(jù)待輸出的網(wǎng)頁代碼中的圖片元素的信息得出CSS類，以及為每個(gè)圖片元素綁定CSS類，并且將網(wǎng)頁代碼中的圖片元素的網(wǎng)絡(luò)地址替換為預(yù)設(shè)的透明圖片的網(wǎng)絡(luò)地址；
步驟S45 :將CSS類根據(jù)上述綁定添加到待輸出的網(wǎng)頁代碼中；步驟S47 :將待輸出的網(wǎng)頁代碼發(fā)送給網(wǎng)頁瀏覽裝置。步驟S43中的圖片元素是網(wǎng)頁代碼中的字段，瀏覽器在處理到網(wǎng)頁代碼中的圖片元素時(shí)，輸出(例如在屏幕上顯示)對(duì)應(yīng)于該圖片元素的圖片。圖片元素的網(wǎng)絡(luò)地址可以是圖片的URL，圖片的URL是通過互聯(lián)網(wǎng)訪問該圖片的唯一地址，例如http://img. alibaba. com/images/eng/style/icon/refine_icon_video. gif上述的透明圖片是人眼不可見的圖片，作為前景圖，它被展示在網(wǎng)頁上之后無法從視覺上覆蓋展示在同一網(wǎng)頁相同位置的背景圖，從而使該背景圖展現(xiàn)在人眼前。步驟S43中的CSS類是CSS代碼的一種標(biāo)準(zhǔn)組織方式，示例如下cssl{background:url ("...")}其中cssl稱為類名，一個(gè)類可以包含若干形如“[屬性名]:[屬性值]”的屬性內(nèi)容。在本實(shí)施例中，對(duì)于第n個(gè)圖片元素，CSS類的內(nèi)容主要是圖片的尺寸及位置信息，屬性內(nèi)容具體有四項(xiàng)，屬性名的含義如下I、width (寬度)第n個(gè)url所指向圖片的寬度；2、height (高度)第n個(gè)url所指向圖片的高度；3、background-image (背景圖片)url (url 11 url2 |. . . urln. png)；4、background_position(第n個(gè)url所指向圖片在合并圖片中的位置)-(urll到urln-1所指向圖片的寬度之和)px Opx0這里采用了左右合并圖片的形式。在步驟S43中，將網(wǎng)頁代碼中的圖片元素的網(wǎng)絡(luò)地址替換為預(yù)設(shè)的透明圖片的網(wǎng)絡(luò)地址，并且在與該圖片元素綁定的CSS類中選擇了背景圖片以及對(duì)應(yīng)于該圖片元素的圖片在合并圖片中的位置。這樣，瀏覽器在按常規(guī)方式(具體在下文中結(jié)合圖5加以說明)處理網(wǎng)頁代碼時(shí)，就能夠?qū)崿F(xiàn)在網(wǎng)頁上插入圖片的原位進(jìn)行前景和背景圖片的替換，這里的前景圖片是通過〈img src =””>標(biāo)簽中src所指向的圖片，背景圖是通過CSS中的background屬性中url所指向的圖片，從展示效果的角度看，前景圖將覆蓋在同一位置的背景圖，這種原位替換的方式無需計(jì)算背景圖片的位置，能夠簡化CSS的定位計(jì)算。并且在本實(shí)施例中，綁定CSS、合并圖片請(qǐng)求、合并圖片等都在服務(wù)器處理網(wǎng)頁請(qǐng)求的過程中動(dòng)態(tài)完成，無需開發(fā)階段的人工操作，有助于提高網(wǎng)頁開發(fā)的效率。以下對(duì)本實(shí)施例中網(wǎng)頁瀏覽裝置處理網(wǎng)頁代碼的流程加以說明。圖5是根據(jù)本申請(qǐng)實(shí)施例的輸出頁面圖片的過程的示意圖。根據(jù)圖5的流程，能夠?qū)崿F(xiàn)網(wǎng)頁瀏覽裝置解析網(wǎng)頁代碼例如HTML代碼并且根據(jù)解析結(jié)果向網(wǎng)絡(luò)服務(wù)設(shè)備發(fā)送相應(yīng)的請(qǐng)求，以及網(wǎng)絡(luò)服務(wù)設(shè)備響應(yīng)該請(qǐng)求的過程中實(shí)現(xiàn)在網(wǎng)頁圖片的原位進(jìn)行前景背景替換，具體包括如下步驟步驟S51 :網(wǎng)頁瀏覽裝置向網(wǎng)絡(luò)服務(wù)設(shè)備發(fā)送第一請(qǐng)求信息；該第一請(qǐng)求信息用于獲取圖片元素處的前景圖片；本步驟及以下各步驟中的網(wǎng)絡(luò)服務(wù)設(shè)備可以是圖片服務(wù)器，本步驟中的圖片元素可以是HTML文件中<img>標(biāo)簽所標(biāo)記的對(duì)象，以瀏覽器為例，瀏覽器依序解析HTML中各個(gè)標(biāo)簽，當(dāng)解析到<img>標(biāo)簽時(shí)即根據(jù)標(biāo)簽標(biāo)記的對(duì)象(本步驟中，對(duì)象內(nèi)容為指定當(dāng)前需要獲取前景圖片，以及該前景圖片的網(wǎng)絡(luò)地址)時(shí)，生成上述第一、請(qǐng)求信息。步驟S53:網(wǎng)絡(luò)服務(wù)設(shè)備向網(wǎng)頁瀏覽裝置發(fā)送透明圖片；本步驟中的透明圖片可以保存在圖片服務(wù)器內(nèi)。步驟S55 :網(wǎng)頁瀏覽裝置向網(wǎng)絡(luò)服務(wù)設(shè)備發(fā)送第二請(qǐng)求信息；該第二請(qǐng)求信息用于獲取圖片元素處的背景圖片；類似于步驟S51中的處理方式，網(wǎng)頁瀏覽裝置例如瀏覽器解析HTML文件，當(dāng)解析到用于獲取背景圖片的標(biāo)簽時(shí)生成第二請(qǐng)求信息，因?yàn)镃SS類是用于處理網(wǎng)頁背景圖片，所以第二請(qǐng)求信息中包含了 CSS類的內(nèi)容，具體包括背景圖片的網(wǎng)絡(luò)位置(由前文所述的CSS類的4項(xiàng)屬性內(nèi)容得到)，以及第二請(qǐng)求信息獲取的背景圖片(由前文所述的CSS類的第1、2和4項(xiàng)內(nèi)容)，從CSS類的屬性內(nèi)容可以看出該背景圖片是合并圖片中的一部分。步驟S57 :網(wǎng)絡(luò)服務(wù)設(shè)備生成合并圖片然后發(fā)送給網(wǎng)頁瀏覽裝置。因?yàn)榫W(wǎng)頁瀏覽裝置請(qǐng)求的是背景圖片，所以該合并圖片將作為背景圖片被網(wǎng)頁瀏覽裝置輸出(例如在屏 幕上顯示)，并且在輸出背景圖片時(shí)，按照前文的第1、2和4項(xiàng)在合并圖片中定位出第n個(gè)url指向的圖片，然后輸出定位出的圖片作為背景?？梢钥闯?，由于前景為透明圖片，所以該背景圖片得以展現(xiàn)在人眼前。在步驟S57中，網(wǎng)絡(luò)服務(wù)設(shè)備生成合并圖片時(shí)，可通過解析第二請(qǐng)求信息中的URL得到，該第二請(qǐng)求信息請(qǐng)求的合并圖片的URL形如(從CSS屬性的第3項(xiàng)也可看出)http: //img. com/imgl | img2 | img3. gif解析時(shí)根據(jù)分隔符“ I ”分段，得到imgl，img2, img3即是要合并的圖片。在生成合并圖片時(shí)，如果網(wǎng)頁中的圖片太多，可以對(duì)圖片進(jìn)行分組，例如按圖片格式或網(wǎng)絡(luò)地址分組，即合并成少數(shù)幾個(gè)圖片，這樣瀏覽裝置發(fā)送相應(yīng)數(shù)量的圖片請(qǐng)求。對(duì)于合并圖片的格式，除全部使用PNG格式保存合并圖片外，也可根據(jù)被合并圖片的格式來決定，例如被合并圖片都是JPG格式，那么可用JPG格式來保存合并圖片；又如被合并圖片都是GIF格式，就可用GIF格式來保存，但由于GIF格式只支持256色，因此合并后的圖片色彩可能有損失。在實(shí)際的網(wǎng)絡(luò)架構(gòu)中，網(wǎng)絡(luò)服務(wù)設(shè)備可能包括網(wǎng)頁服務(wù)器和圖片服務(wù)器，這兩種服務(wù)器可以集成在一臺(tái)計(jì)算機(jī)上，也可以是獨(dú)立的計(jì)算機(jī)。本申請(qǐng)實(shí)施例中，前述步驟S43中的得出CSS類的工作可以由網(wǎng)頁服務(wù)器生成，也可以由圖片服務(wù)器生成，以下對(duì)此作具體說明。得出CSS類的一種方式是由網(wǎng)頁服務(wù)器生成CSS請(qǐng)求然后發(fā)送給圖片服務(wù)器，由圖片服務(wù)器解析該請(qǐng)求，得出CSS類然后返回給網(wǎng)頁服務(wù)器。具體是，網(wǎng)頁服務(wù)器在輸出網(wǎng)頁代碼例如HTML文件的過程中，每當(dāng)要輸出形如〈img src =”url”.../>的圖片元素時(shí)，執(zhí)行如下操作步驟I、將圖片元素的url加入待合并列表，若待合并列表中已有該url則不重復(fù)加入，該待合并列表可以是保存在網(wǎng)頁服務(wù)器的內(nèi)存中；步驟2、將圖片元素的url替換為一個(gè)透明圖片的url，該透明圖片的url可以預(yù)先設(shè)定；步驟3、給圖片元素綁定一個(gè)CSS類，這里的CSS類的名稱可以采用上述待合并列表中的url的編號(hào)。
當(dāng)所有圖片元素都替換完成后，遍歷待合并列表，發(fā)送形如urll |url2|. . . urln.CSS的CSS請(qǐng)求到圖片服務(wù)器，待圖片服務(wù)器根據(jù)該請(qǐng)求返回CSS后，再將該返回的CSS插入到待輸出的HTML文件的頭部。這里的CSS請(qǐng)求中的符號(hào)“ I ”也可以選擇其他的字符，只要url本身不包含該字符即可。 在圖片服務(wù)器方面，收到網(wǎng)頁服務(wù)器發(fā)送的CSS請(qǐng)求后，解析該請(qǐng)求，讀取CSS中各個(gè)第n個(gè)url指向的圖片，并且生成以及輸出CSS，其中包括了 n個(gè)CSS類，每個(gè)CSS類包括屬性如前文所述。以上對(duì)于網(wǎng)頁服務(wù)器生成和發(fā)送CSS請(qǐng)求、圖片服務(wù)器生成CSS的方式作出了說明。另外得出CSS的另一種方式是在網(wǎng)頁服務(wù)器上進(jìn)行。如果采用這種方式，則可在開發(fā)頁面時(shí)將圖片的長、寬屬性寫入網(wǎng)頁代碼例如HTML文件中，這樣網(wǎng)頁服務(wù)器在輸出HTML文件的過程中只執(zhí)行前述的步驟1-3，無需再發(fā)CSS請(qǐng)求，而是根據(jù)圖片長、寬屬性得出上述CSS類的內(nèi)容。
在上述步驟2的替換操作中，除在原位用〈img... >標(biāo)簽替換外，還可用〈spanstyle =”diSplay:inline-bl0Ck”...>替換。另外，在網(wǎng)頁服務(wù)器或圖片服務(wù)器進(jìn)行圖片合并時(shí)，除了上述的左右合并的形式，另外還可以上下合并圖片，也就是將CSS類中的第4項(xiàng)屬性background-position設(shè)為Opx-(第一個(gè)至第n_l個(gè)圖片的高度之后)px即可。以下再對(duì)本申請(qǐng)實(shí)施例中的輸出網(wǎng)頁的系統(tǒng)作出說明。圖6是根據(jù)本申請(qǐng)實(shí)施例的輸出網(wǎng)頁的系統(tǒng)的可選結(jié)構(gòu)的示意圖，圖6中的輸出網(wǎng)頁的系統(tǒng)60能夠響應(yīng)于網(wǎng)頁瀏覽裝置發(fā)送的獲取網(wǎng)頁的請(qǐng)求，向網(wǎng)頁瀏覽裝置發(fā)送網(wǎng)頁。如圖6所示，輸出網(wǎng)頁的系統(tǒng)60主要包括網(wǎng)頁服務(wù)器61和圖片服務(wù)器62。網(wǎng)頁服務(wù)器61主要用于接收網(wǎng)頁瀏覽裝置發(fā)送的獲取網(wǎng)頁的請(qǐng)求，以及生成網(wǎng)頁代碼然后發(fā)送給網(wǎng)頁瀏覽裝置；圖片服務(wù)器62主要用于接收網(wǎng)頁瀏覽裝置在解析網(wǎng)頁代碼時(shí)發(fā)送的背景請(qǐng)求信息，該背景請(qǐng)求信息用于獲取由多個(gè)圖片合并而成的背景圖片，并且包含多個(gè)圖片的網(wǎng)絡(luò)地址；根據(jù)多個(gè)圖片的地址獲取并且合并上述多個(gè)圖片，然后將合并圖片發(fā)送給網(wǎng)絡(luò)瀏覽裝置。網(wǎng)頁服務(wù)器61還可以用于將待合并的多個(gè)圖片的尺寸、各個(gè)待合并圖片在合并圖片中的位置和合并圖片的網(wǎng)絡(luò)地址添加到用于響應(yīng)該請(qǐng)求的網(wǎng)頁代碼中，這樣網(wǎng)頁瀏覽裝置可以根據(jù)該網(wǎng)絡(luò)地址獲取合并圖片以及在輸出的網(wǎng)頁中按待合并的多個(gè)圖片的尺寸、各個(gè)待合并圖片在合并圖片中的位置輸出圖片。圖片服務(wù)器62還可用于根據(jù)網(wǎng)頁瀏覽裝置發(fā)送的用于獲取圖片元素處的前景圖片的前景請(qǐng)求信息，向網(wǎng)頁瀏覽裝置發(fā)送透明圖片。這樣，當(dāng)網(wǎng)頁瀏覽裝置獲取到背景圖片后，在前景為透明圖片的位置處，背景圖片得以展示在人眼前。網(wǎng)頁服務(wù)器61可以根據(jù)待輸出的網(wǎng)頁代碼中的圖片元素的信息得出CSS類，以及為每個(gè)圖片元素綁定CSS類，并且將網(wǎng)頁代碼中的圖片元素的網(wǎng)絡(luò)地址替換為預(yù)設(shè)的透明圖片的網(wǎng)絡(luò)地址；該CSS類中包括與該CSS類綁定的各個(gè)圖片元素的寬度和高度、合并圖片的網(wǎng)絡(luò)地址以及該圖片元素在所述合并圖片中的位置。另外網(wǎng)頁服務(wù)器61也可以利用CSS請(qǐng)求來得到CSS類，即網(wǎng)頁服務(wù)器61還可用于向圖片服務(wù)器62發(fā)送CSS請(qǐng)求，該CSS請(qǐng)求用于獲取待合并的多個(gè)圖片中的各個(gè)圖片元素的寬度和高度、合并圖片的網(wǎng)絡(luò)地址以及該圖片元素在合并圖片中的位置，這樣圖片服務(wù)器62還用于按照該CSS請(qǐng)求向網(wǎng)頁服務(wù)器61發(fā)送CSS類。
根據(jù)本申請(qǐng)實(shí)施例的技術(shù)方案，能夠?qū)⒍鄠€(gè)圖片請(qǐng)求合并成一個(gè)，減少HTTP請(qǐng)求數(shù)量，縮短頁面在瀏覽器中的加載時(shí)間；對(duì)合并后的圖片進(jìn)行無損壓縮后可減小頁面的總大小，進(jìn)一步縮短頁面在瀏覽器中的加載時(shí)間；頁面開發(fā)時(shí)可使用標(biāo)準(zhǔn)的<img>標(biāo)簽來插入圖片，無需預(yù)先合并圖片和編寫CSS，便于開發(fā)和調(diào)試。并且，在本申請(qǐng)實(shí)施例中，綁定CSS、合并圖片請(qǐng)求、合并圖片等都在服務(wù)器處理網(wǎng)頁請(qǐng)求的過程中動(dòng)態(tài)完成，無需開發(fā)階段的人工操作；在網(wǎng)頁上插入圖片的原位進(jìn)行前景和背景圖片的替換，簡化了 CSS的定位計(jì)算。因此，采用本申請(qǐng)實(shí)施例的技術(shù)方案有助于優(yōu)化網(wǎng)頁性能并且提高制作網(wǎng)頁的效率。顯然，本領(lǐng)域的技術(shù)人員應(yīng)該明白，上述的本申請(qǐng)的各模塊或各步驟可以用通用的計(jì)算裝置來實(shí)現(xiàn)，它們可以集中在單個(gè)的計(jì)算裝置上，或者分布在多個(gè)計(jì)算裝置所組成的網(wǎng)絡(luò)上，可選地，它們可以用計(jì)算裝置可執(zhí)行的程序代碼來實(shí)現(xiàn)，從而，可以將它們存儲(chǔ)在存儲(chǔ)裝置中由計(jì)算裝置來執(zhí)行，或者將它們分別制作成各個(gè)集成電路模塊，或者將它們中的多個(gè)模塊或步驟制作成單個(gè)集成電路模塊來實(shí)現(xiàn)。這樣，本申請(qǐng)不限制于任何特定的硬件和軟件結(jié)合。
以上所述僅為本申請(qǐng)的優(yōu)選實(shí)施例而已，并不用于限制本申請(qǐng)，對(duì)于本領(lǐng)域的技術(shù)人員來說，本申請(qǐng)可以有各種更改和變化。凡在本申請(qǐng)的精神和原則之內(nèi)，所作的任何修改、等同替換、改進(jìn)等，均應(yīng)包含在本申請(qǐng)的保護(hù)范圍之內(nèi)。
權(quán)利要求
1.一種輸出網(wǎng)頁的方法，其特征在于，包括 網(wǎng)絡(luò)服務(wù)設(shè)備接收網(wǎng)頁瀏覽裝置在解析網(wǎng)頁代碼時(shí)發(fā)送的背景請(qǐng)求信息，所述背景請(qǐng)求信息用于獲取由多個(gè)圖片合并而成的背景圖片，并且包含所述多個(gè)圖片的網(wǎng)絡(luò)地址； 網(wǎng)絡(luò)服務(wù)設(shè)備根據(jù)所述多個(gè)圖片的地址獲取并且合并所述多個(gè)圖片，然后將合并圖片發(fā)送給所述網(wǎng)絡(luò)瀏覽裝置。
2.根據(jù)權(quán)利要求I所述的方法，其特征在于，在所述網(wǎng)絡(luò)服務(wù)設(shè)備接收所述背景請(qǐng)求信息之前，還包括 所述網(wǎng)絡(luò)服務(wù)設(shè)備接收所述網(wǎng)頁瀏覽裝置發(fā)送的獲取網(wǎng)頁的請(qǐng)求，然后所述將待合并的多個(gè)圖片的尺寸、各個(gè)待合并圖片在所述合并圖片中的位置和所述合并圖片的網(wǎng)絡(luò)地址添加到用于響應(yīng)該請(qǐng)求的網(wǎng)頁代碼中，再將所述網(wǎng)頁代碼發(fā)送給所述網(wǎng)頁瀏覽裝置。
3.根據(jù)權(quán)利要求2所述的方法，其特征在于，所述將待合并的多個(gè)圖片的尺寸、各個(gè)待合并圖片在所述合并圖片中的位置和所述合并圖片的網(wǎng)絡(luò)地址添加到用于響應(yīng)該請(qǐng)求的網(wǎng)頁代碼中包括 根據(jù)待輸出的網(wǎng)頁代碼中的圖片元素的信息得出CSS類，以及為每個(gè)圖片元素綁定CSS類，并且將所述網(wǎng)頁代碼中的圖片元素的網(wǎng)絡(luò)地址替換為預(yù)設(shè)的透明圖片的網(wǎng)絡(luò)地址；所述CSS類中包括與該CSS類綁定的各個(gè)圖片元素的寬度和高度、所述合并圖片的網(wǎng)絡(luò)地址以及該圖片元素在所述合并圖片中的位置。
4.根據(jù)權(quán)利要求3所述的方法，其特征在于，在所述網(wǎng)絡(luò)服務(wù)設(shè)備將所述網(wǎng)頁代碼發(fā)送給所述網(wǎng)頁瀏覽裝置之后，并且在所述網(wǎng)絡(luò)服務(wù)設(shè)備接收所述背景請(qǐng)求信息之前，還包括 根據(jù)所述網(wǎng)頁瀏覽裝置發(fā)送的用于獲取圖片元素處的前景圖片的前景請(qǐng)求信息，向所述網(wǎng)頁瀏覽裝置發(fā)送所述透明圖片。
5.根據(jù)權(quán)利要求3所述的方法，其特征在于， 所述圖片元素的信息包括所述圖片元素的長、寬屬性； 所述得出CSS類包括根據(jù)所述圖片元素的長、寬屬性生成CSS類。
6.根據(jù)權(quán)利要求3所述的方法，其特征在于， 所述圖片元素的信息包括所述圖片元素的網(wǎng)絡(luò)地址； 所述得出CSS類包括根據(jù)所述圖片元素的網(wǎng)絡(luò)地址讀取圖片，根據(jù)讀取的圖片生成CSS 類。
7.根據(jù)權(quán)利要求I至6中任一項(xiàng)所述的方法，其特征在于，將選擇的多個(gè)圖片元素進(jìn)行排列及合并包括將選擇的多個(gè)圖片元素按格式或網(wǎng)絡(luò)地址分組，并沿左右方向或上下方向按組排列，每組圖片排列與合并之后得到一個(gè)所述合并圖片。
8.根據(jù)權(quán)利要求I至6中任一項(xiàng)所述的方法，其特征在于，所述合并圖片的格式為png格式或被合并圖片的格式。
9.一種輸出網(wǎng)頁的系統(tǒng)，其特征在于，包括網(wǎng)頁服務(wù)器和圖片服務(wù)器，其中 網(wǎng)頁服務(wù)器，用于接收網(wǎng)頁瀏覽裝置發(fā)送的獲取網(wǎng)頁的請(qǐng)求，以及生成網(wǎng)頁代碼然后發(fā)送給所述網(wǎng)頁瀏覽裝置； 圖片服務(wù)器，用于 接收網(wǎng)頁瀏覽裝置在解析網(wǎng)頁代碼時(shí)發(fā)送的背景請(qǐng)求信息，所述背景請(qǐng)求信息用于獲取由多個(gè)圖片合并而成的背景圖片，并且包含所述多個(gè)圖片的網(wǎng)絡(luò)地址； 根據(jù)所述多個(gè)圖片的地址獲取并且合并所述多個(gè)圖片，然后將合并圖片發(fā)送給所述網(wǎng)絡(luò)瀏覽裝置。
10.根據(jù)權(quán)利要求9所述的系統(tǒng)，其特征在于，所述網(wǎng)頁服務(wù)器還用于將待合并的多個(gè)圖片的尺寸、各個(gè)待合并圖片在所述合并圖片中的位置和所述合并圖片的網(wǎng)絡(luò)地址添加到用于響應(yīng)該請(qǐng)求的網(wǎng)頁代碼中。
11.根據(jù)權(quán)利要求9所述的系統(tǒng)，其特征在于，所述圖片服務(wù)器還用于根據(jù)所述網(wǎng)頁瀏覽裝置發(fā)送的用于獲取圖片元素處的前景圖片的前景請(qǐng)求信息，向所述網(wǎng)頁瀏覽裝置發(fā)送透明圖片。
12.根據(jù)權(quán)利要求10所述的系統(tǒng)，其特征在于，所述網(wǎng)頁服務(wù)器還用于根據(jù)待輸出的網(wǎng)頁代碼中的圖片元素的信息得出CSS類，以及為每個(gè)圖片元素綁定CSS類，并且將所述網(wǎng)頁代碼中的圖片元素的網(wǎng)絡(luò)地址替換為預(yù)設(shè)的透明圖片的網(wǎng)絡(luò)地址；所述CSS類中包括與該CSS類綁定的各個(gè)圖片元素的寬度和高度、所述合并圖片的網(wǎng)絡(luò)地址以及該圖片元素在所述合并圖片中的位置。
13.根據(jù)權(quán)利要求10所述的系統(tǒng)，其特征在于， 所述網(wǎng)頁服務(wù)器還用于向所述圖片服務(wù)器發(fā)送CSS請(qǐng)求，所述CSS請(qǐng)求用于獲取所述待合并的多個(gè)圖片中的各個(gè)圖片元素的寬度和高度、所述合并圖片的網(wǎng)絡(luò)地址以及該圖片元素在所述合并圖片中的位置； 所述圖片服務(wù)器還用于按照所述CSS請(qǐng)求向所述網(wǎng)頁服務(wù)器發(fā)送CSS類。
全文摘要
本申請(qǐng)?zhí)峁┝艘环N輸出網(wǎng)頁的方法和系統(tǒng)，以解決現(xiàn)有技術(shù)中采用CSS Sprites方式優(yōu)化網(wǎng)頁性能時(shí)制作網(wǎng)頁的效率較低的問題。該方法包括網(wǎng)絡(luò)服務(wù)設(shè)備接收網(wǎng)頁瀏覽裝置在解析網(wǎng)頁代碼時(shí)發(fā)送的背景請(qǐng)求信息，所述背景請(qǐng)求信息用于獲取由多個(gè)圖片合并而成的背景圖片，并且包含所述多個(gè)圖片的網(wǎng)絡(luò)地址；網(wǎng)絡(luò)服務(wù)設(shè)備根據(jù)所述多個(gè)圖片的地址獲取并且合并所述多個(gè)圖片，然后將合并圖片發(fā)送給所述網(wǎng)絡(luò)瀏覽裝置。根據(jù)本申請(qǐng)的技術(shù)方案，圖片的合并工作是由網(wǎng)絡(luò)服務(wù)設(shè)備完成，較人工的做法而言有較高的處理效率，由此提高了制作網(wǎng)頁的效率。
文檔編號(hào)G06F17/30GK102737067SQ201110095770
公開日2012年10月17日 申請(qǐng)日期2011年4月15日 優(yōu)先權(quán)日2011年4月15日
發(fā)明者張晗 申請(qǐng)人:阿里巴巴集團(tuán)控股有限公司