網(wǎng)頁(yè)顯示處理方法及裝置的制造方法
【專(zhuān)利摘要】本發(fā)明公開(kāi)了一種網(wǎng)頁(yè)顯示處理方法，包括：截獲服務(wù)器返回給客戶(hù)端的第一HTML數(shù)據(jù)；判斷所述第一HTML數(shù)據(jù)中是否存在圖片，并確定所述圖片的像素面積是否大于預(yù)設(shè)閾值；若所述第一HTML數(shù)據(jù)中圖片的像素面積大于所述閾值，則根據(jù)預(yù)置的配置處理策略對(duì)所述第一HTML數(shù)據(jù)中的所述圖片進(jìn)行處理，得到第二HTML數(shù)據(jù)；將所述第二HTML數(shù)據(jù)發(fā)送至所述客戶(hù)端上進(jìn)行網(wǎng)頁(yè)顯示。本發(fā)明還公開(kāi)了一種網(wǎng)頁(yè)顯示處理裝置。本發(fā)明提升了網(wǎng)頁(yè)處理效率及網(wǎng)頁(yè)內(nèi)容顯示速度。
【專(zhuān)利說(shuō)明】
網(wǎng)頁(yè)顯示處理方法及裝置
技術(shù)領(lǐng)域
[0001]本發(fā)明涉及通信技術(shù)領(lǐng)域，尤其涉及網(wǎng)頁(yè)顯示處理方法及裝置。
【背景技術(shù)】
[0002]現(xiàn)有網(wǎng)頁(yè)中，為更豐富網(wǎng)頁(yè)顯示內(nèi)容，提高網(wǎng)頁(yè)的表達(dá)能力，因而相應(yīng)會(huì)在網(wǎng)頁(yè)中加入除文字外的其他網(wǎng)頁(yè)元素，比如圖片、視頻等，而這類(lèi)網(wǎng)頁(yè)元素中，圖片所占比例最大，同時(shí)圖片的表達(dá)能力也更直接。但另一方面，若網(wǎng)頁(yè)中圖片過(guò)多(特別是大圖片)則會(huì)影響網(wǎng)頁(yè)的加載效率及顯示速度，因此，在提高網(wǎng)頁(yè)表達(dá)能力的同時(shí)，還需進(jìn)一步考慮如何提高網(wǎng)頁(yè)的顯示處理效率及速度。

【發(fā)明內(nèi)容】

[0003]本發(fā)明的主要目的在于如何在提高網(wǎng)頁(yè)表達(dá)能力的同時(shí)，進(jìn)一步提高網(wǎng)頁(yè)的顯示處理效率及速度的技術(shù)問(wèn)題。
[0004]為實(shí)現(xiàn)上述目的，本發(fā)明提供一種網(wǎng)頁(yè)顯示處理方法，所述網(wǎng)頁(yè)顯示處理方法包括:
[0005]截獲服務(wù)器返回給客戶(hù)端的第一HTML數(shù)據(jù)；
[0006]判斷所述第一HTML數(shù)據(jù)中是否存在圖片，并確定所述圖片的像素面積是否大于預(yù)設(shè)閾值；
[0007]若所述第一HTML數(shù)據(jù)中圖片的像素面積大于所述閾值，則根據(jù)預(yù)置的配置處理策略對(duì)所述第一 HTML數(shù)據(jù)中的所述圖片進(jìn)行處理，得到第二 HTML數(shù)據(jù)；
[0008]將所述第二 HTML數(shù)據(jù)發(fā)送至所述客戶(hù)端上進(jìn)行網(wǎng)頁(yè)顯示。
[0009]優(yōu)選地，所述截獲服務(wù)器返回給客戶(hù)端的第一HTML數(shù)據(jù)之后包括:
[0010]判斷所述第一HTML數(shù)據(jù)中是否存在壓縮數(shù)據(jù)；
[0011 ]若存在，則對(duì)所述壓縮數(shù)據(jù)進(jìn)行解壓。
[0012]優(yōu)選地，所述根據(jù)預(yù)置的配置處理策略對(duì)所述第一HTML數(shù)據(jù)中的所述圖片進(jìn)行處理包括:
[0013]當(dāng)所述配置處理策略為圖片替換策略時(shí)，采用指定圖片替換所述圖片;或，將所述圖片所對(duì)應(yīng)的縮略圖替換所述圖片，其中，采用異步執(zhí)行方式生成所述圖片所對(duì)應(yīng)的縮略圖并緩存。
[0014]優(yōu)選地，所述根據(jù)預(yù)置的配置處理策略對(duì)所述第一HTML數(shù)據(jù)中的所述圖片進(jìn)行處理包括:
[0015]當(dāng)所述配置處理策略為延時(shí)顯示策略時(shí)，在所述第一HTML數(shù)據(jù)中插入預(yù)置延時(shí)代碼，以供所述客戶(hù)端延時(shí)加載所述圖片。
[0016]優(yōu)選地，所述根據(jù)預(yù)置的配置處理策略對(duì)所述第一HTML數(shù)據(jù)中的所述圖片進(jìn)行處理包括:
[0017]當(dāng)所述配置處理策略為基于用戶(hù)行為的顯示策略時(shí)，對(duì)所述圖片的顯示觸發(fā)方式進(jìn)行設(shè)置，其中，圖片的顯示觸發(fā)方式至少包括點(diǎn)擊圖片觸發(fā)和/或鼠標(biāo)停留在圖片上觸發(fā)。
[0018]進(jìn)一步地，為實(shí)現(xiàn)上述目的，本發(fā)明還提供一種網(wǎng)頁(yè)顯示處理裝置，所述網(wǎng)頁(yè)顯示處理裝置包括:
[0019]截獲模塊，用于截獲服務(wù)器返回給客戶(hù)端的第一HTML數(shù)據(jù)；
[0020]判斷模塊，用于判斷所述第一HTML數(shù)據(jù)中是否存在圖片，并確定所述圖片的像素面積是否大于預(yù)設(shè)閾值；
[0021]圖片處理模塊，用于若所述第一HTML數(shù)據(jù)中圖片的像素面積大于所述閾值，則根據(jù)預(yù)置的配置處理策略對(duì)所述第一 HTML數(shù)據(jù)中的所述圖片進(jìn)行處理，得到第二 HTML數(shù)據(jù)；
[0022]轉(zhuǎn)發(fā)模塊，用于將所述第二HTML數(shù)據(jù)發(fā)送至所述客戶(hù)端上進(jìn)行網(wǎng)頁(yè)顯示。
[0023]優(yōu)選地，所述判斷模塊還用于:
[0024]判斷所述第一HTML數(shù)據(jù)中是否存在壓縮數(shù)據(jù)；
[0025]若存在，則對(duì)所述壓縮數(shù)據(jù)進(jìn)行解壓。
[0026]優(yōu)選地，所述圖片處理模塊具體用于:
[0027]當(dāng)所述配置處理策略為圖片替換策略時(shí)，采用指定圖片替換所述圖片;或，將所述圖片所對(duì)應(yīng)的縮略圖替換所述圖片，其中，采用異步執(zhí)行方式生成所述圖片所對(duì)應(yīng)的縮略圖并緩存。
[0028]優(yōu)選地，所述圖片處理模塊具體用于:
[0029]當(dāng)所述配置處理策略為延時(shí)顯示策略時(shí)，在所述第一HTML數(shù)據(jù)中插入預(yù)置延時(shí)代碼，以供所述客戶(hù)端延時(shí)加載所述圖片。
[0030]優(yōu)選地，所述圖片處理模塊具體用于:
[0031]當(dāng)所述配置處理策略為基于用戶(hù)行為的顯示策略時(shí)，對(duì)所述圖片的顯示觸發(fā)方式進(jìn)行設(shè)置，其中，圖片的顯示觸發(fā)方式至少包括點(diǎn)擊圖片觸發(fā)和/或鼠標(biāo)停留在圖片上觸發(fā)。
[0032]本發(fā)明中，在網(wǎng)頁(yè)在客戶(hù)端顯示之前，截獲服務(wù)器所返回的HTML數(shù)據(jù)，并進(jìn)行檢查，以對(duì)該HTML數(shù)據(jù)中滿(mǎn)足預(yù)設(shè)條件的圖片數(shù)據(jù)進(jìn)行預(yù)處理，最后再將預(yù)處理后的HTML數(shù)據(jù)轉(zhuǎn)發(fā)至客戶(hù)端進(jìn)行顯示，從而以此提升網(wǎng)頁(yè)顯示處理效率及顯示速度。
【附圖說(shuō)明】
[0033]圖1為本發(fā)明網(wǎng)頁(yè)顯示處理方法第一實(shí)施例的流程示意圖；
[0034]圖2為本發(fā)明網(wǎng)頁(yè)顯示處理方法中網(wǎng)頁(yè)顯示處理架構(gòu)示意圖；
[0035]圖3為本發(fā)明網(wǎng)頁(yè)顯示處理方法第二實(shí)施例的流程示意圖；
[0036]圖4為本發(fā)明網(wǎng)頁(yè)顯示處理裝置一實(shí)施例的功能模塊示意圖。
[0037]本發(fā)明目的的實(shí)現(xiàn)、功能特點(diǎn)及優(yōu)點(diǎn)將結(jié)合實(shí)施例，參照附圖做進(jìn)一步說(shuō)明。
【具體實(shí)施方式】
[0038]應(yīng)當(dāng)理解，此處所描述的具體實(shí)施例僅用以解釋本發(fā)明，并不用于限定本發(fā)明。
[0039]參照?qǐng)D1，圖1為本發(fā)明網(wǎng)頁(yè)顯示處理方法第一實(shí)施例的流程示意圖。本實(shí)施例中，所述網(wǎng)頁(yè)顯示處理方法包括:
[0040]步驟SlO，截獲服務(wù)器返回給客戶(hù)端的第一HTML數(shù)據(jù)；
[0041]本實(shí)施例中，客戶(hù)端用于處理用戶(hù)通過(guò)瀏覽器所提交的網(wǎng)頁(yè)獲取請(qǐng)求，而服務(wù)器則用于處理該網(wǎng)格員獲取請(qǐng)求，同時(shí)將對(duì)應(yīng)的HTML數(shù)據(jù)返回給客戶(hù)端。網(wǎng)頁(yè)顯示處理裝置則需要截獲服務(wù)器返回給客戶(hù)端的第一 HTML數(shù)據(jù)，進(jìn)而對(duì)第一 HTML數(shù)據(jù)進(jìn)行處理，如圖2所示的網(wǎng)頁(yè)顯示處理架構(gòu)示意圖。
[0042]本實(shí)施例中，網(wǎng)頁(yè)顯示處理裝置可以是上網(wǎng)行為管理設(shè)備、負(fù)載均衡器、緩存服務(wù)器、流量管理設(shè)備等，但不限于此類(lèi)設(shè)備，只要能夠代理HTTP服務(wù)即可。
[0043]步驟S20，判斷所述第一HTML數(shù)據(jù)中是否存在圖片，并確定所述圖片的像素面積是否大于預(yù)設(shè)閾值；
[0044]本實(shí)施例中，具體通過(guò)HTML標(biāo)簽(〈image〉標(biāo)簽)，確定第一HTML數(shù)據(jù)中是否存在圖片。通常，HTML中的圖片都會(huì)顯示其分辨率，因此，可根據(jù)分辨率計(jì)算并確定圖片的像素面積是否大于預(yù)設(shè)閾值，像素面積越大，則圖片越大，對(duì)應(yīng)加載該圖片的時(shí)間也越長(zhǎng)，也即網(wǎng)頁(yè)中顯示該圖片的速度越慢。本實(shí)施例中對(duì)于圖片大小閾值的設(shè)置不限，具體根據(jù)實(shí)際需要進(jìn)行設(shè)置。
[0045]步驟S30，若所述第一HTML數(shù)據(jù)中圖片的像素面積大于所述閾值，則根據(jù)預(yù)置的配置處理策略對(duì)所述第一 HTML數(shù)據(jù)中的所述圖片進(jìn)行處理，得到第二 HTML數(shù)據(jù)；
[0046]步驟S40，將所述第二 HTML數(shù)據(jù)發(fā)送至所述客戶(hù)端上進(jìn)行網(wǎng)頁(yè)顯示。
[0047]本實(shí)施例中，當(dāng)檢測(cè)到滿(mǎn)足條件的圖片時(shí)，需要根據(jù)預(yù)置的配置處理策略，對(duì)該圖片進(jìn)行相應(yīng)處理，并得到處理該圖片后所對(duì)應(yīng)的第二 HTML數(shù)據(jù)。
[0048]本實(shí)施例中，對(duì)于配置處理策略的設(shè)置不限，例如刪除圖片等。當(dāng)完成對(duì)圖片的相應(yīng)處理后，網(wǎng)頁(yè)顯示處理裝置還需進(jìn)一步將處理該圖片后所對(duì)應(yīng)的第二 HTML數(shù)據(jù)轉(zhuǎn)發(fā)至客戶(hù)端上進(jìn)行網(wǎng)頁(yè)顯示。
[0049]另外，需要進(jìn)一步說(shuō)明的是，若截取到的第一HTML數(shù)據(jù)中不包含圖片，則直接將第一 HTML數(shù)據(jù)返回給客戶(hù)端進(jìn)行網(wǎng)頁(yè)顯示，從而有針對(duì)性地處理圖片，提升網(wǎng)頁(yè)顯示速度。
[0050]本實(shí)施例中，在網(wǎng)頁(yè)在客戶(hù)端顯示之前，網(wǎng)頁(yè)顯示處理裝置截獲服務(wù)器所返回的HTML數(shù)據(jù)，并進(jìn)行檢查，以對(duì)該HTML數(shù)據(jù)中滿(mǎn)足預(yù)設(shè)條件的圖片數(shù)據(jù)進(jìn)行預(yù)處理，最后再將預(yù)處理后的HTML數(shù)據(jù)轉(zhuǎn)發(fā)至客戶(hù)端進(jìn)行顯示，從而以此提升網(wǎng)頁(yè)顯示處理效率及顯示速度。
[0051]參照?qǐng)D3，圖3為本發(fā)明網(wǎng)頁(yè)顯示處理方法第二實(shí)施例的流程示意圖。本實(shí)施例與上述方法第一實(shí)施例的區(qū)別在于，本實(shí)施例中，上述步驟SlO之后包括:
[0052]步驟SOl，判斷所述第一HTML數(shù)據(jù)中是否存在壓縮數(shù)據(jù)；
[0053]步驟S02，若存在，則對(duì)所述壓縮數(shù)據(jù)進(jìn)行解壓。
[0054]本實(shí)施例中，考慮到服務(wù)器所返回的HTML數(shù)據(jù)中可能包含有壓縮數(shù)據(jù)(比如對(duì)大型圖片進(jìn)行壓縮)的特殊情況，因此，需要先對(duì)HTML數(shù)據(jù)進(jìn)行解壓縮處理，然后再對(duì)包括解壓數(shù)據(jù)在內(nèi)的所有HTML數(shù)據(jù)進(jìn)行圖片查詢(xún)遍歷，若遍歷到滿(mǎn)足條件的圖片，則進(jìn)行相應(yīng)處理，最后再轉(zhuǎn)發(fā)至客戶(hù)端進(jìn)行顯示，從而以此提升網(wǎng)頁(yè)顯示處理效率及顯示速度。
[0055]進(jìn)一步可選的，在本發(fā)明網(wǎng)頁(yè)顯示處理方法一實(shí)施例中，上述步驟S30具體包括:
[0056](I)當(dāng)所述配置處理策略為圖片替換策略時(shí)，采用指定圖片替換所述圖片;或，將所述圖片所對(duì)應(yīng)的縮略圖替換所述圖片，其中，采用異步執(zhí)行方式生成所述圖片所對(duì)應(yīng)的縮略圖并緩存；
[0057]本實(shí)施例中，配置處理策略具體采用圖片替換策略，具體包括縮略圖策略與固定圖策略。
[0058]縮略圖策略將會(huì)對(duì)大圖片生成一個(gè)小的縮略圖，一般為32*32，圖片大小在Ik以下，生成縮略圖的過(guò)程為采用異步執(zhí)行，并且縮略圖可以緩存下來(lái)。然后把HTML的MG標(biāo)簽的SRC地址替換成縮略圖地址，比如在原地址后面加上?thumbnail以便客戶(hù)端下次請(qǐng)求時(shí)，網(wǎng)頁(yè)顯示處理裝置能識(shí)別出是請(qǐng)求縮略圖。由于縮略圖分辨率一般是原圖的十幾分之一，所以客戶(hù)端的瀏覽器在顯示縮略圖時(shí)，會(huì)拉升顯示，顯示出來(lái)的效果即是一個(gè)模糊的效果，而在用戶(hù)看來(lái)很像一個(gè)未完全加載完的圖片一樣，但不影響頁(yè)面的顯示效果。
[0059]而固定圖策略同上一個(gè)縮略圖替換策略類(lèi)似，只不過(guò)不替換成縮略圖，而是替換成一個(gè)統(tǒng)一小圖，比如可以對(duì)廣告圖片統(tǒng)一替換成一個(gè)小圖，上有提示文字廣告正在加載中”，或者提示:“請(qǐng)點(diǎn)擊顯示此廣告”。
[0060](2)當(dāng)所述配置處理策略為延時(shí)顯示策略時(shí)，在所述第一HTML數(shù)據(jù)中插入預(yù)置延時(shí)代碼，以供所述客戶(hù)端延時(shí)加載所述圖片；
[0061]本實(shí)施例中，延時(shí)顯示策略具體為:通過(guò)在HTML頁(yè)面中插入一段腳本JS代碼，該JS代碼在HTML頁(yè)面的body加載完成或者指定延遲的時(shí)間后再執(zhí)行，同時(shí)，在執(zhí)行該JS代碼時(shí)遍歷所有的IMG大圖節(jié)點(diǎn)，把IMG的大圖重新加載，而這時(shí)給予用戶(hù)體驗(yàn)就是大圖加載完變清晰了。
[0062](3)當(dāng)所述配置處理策略為基于用戶(hù)行為的顯示策略時(shí)，對(duì)所述圖片的顯示觸發(fā)方式進(jìn)行設(shè)置，其中，圖片的顯示觸發(fā)方式至少包括點(diǎn)擊圖片觸發(fā)和/或鼠標(biāo)停留在圖片上觸發(fā)。
[0063]本實(shí)施例中，基于用戶(hù)行為的顯示策略具體為:只有在用戶(hù)點(diǎn)擊，或者鼠標(biāo)經(jīng)過(guò)該圖片區(qū)域時(shí)時(shí)，才把大圖片顯示出來(lái)，否則只顯示替換后的縮略圖或者固定圖片。此時(shí)，給用戶(hù)的體驗(yàn)就是圖片按需加載，對(duì)于用戶(hù)想看的圖片才加載，不想看的圖片就不需要加載，從而節(jié)省網(wǎng)絡(luò)流量以及顯示時(shí)間。
[0064]參照?qǐng)D4，圖4為本發(fā)明網(wǎng)頁(yè)顯示處理裝置一實(shí)施例的功能模塊示意圖。本實(shí)施例中，所述網(wǎng)頁(yè)顯示處理裝置包括:
[0065]截獲模塊10，用于截獲服務(wù)器返回給客戶(hù)端的第一HTML數(shù)據(jù)；
[0066]本實(shí)施例中，客戶(hù)端用于處理用戶(hù)通過(guò)瀏覽器所提交的網(wǎng)頁(yè)獲取請(qǐng)求，而服務(wù)器則用于處理該網(wǎng)格員獲取請(qǐng)求，同時(shí)將對(duì)應(yīng)的HTML數(shù)據(jù)返回給客戶(hù)端。網(wǎng)頁(yè)顯示處理裝置則需要截獲服務(wù)器返回給客戶(hù)端的第一 HTML數(shù)據(jù)，進(jìn)而對(duì)第一 HTML數(shù)據(jù)進(jìn)行處理，如圖2所示的網(wǎng)頁(yè)顯示處理架構(gòu)示意圖。
[0067]本實(shí)施例中，網(wǎng)頁(yè)顯示處理裝置可以是上網(wǎng)行為管理設(shè)備、負(fù)載均衡器、緩存服務(wù)器、流量管理設(shè)備等，但不限于此類(lèi)設(shè)備，只要能夠代理HTTP服務(wù)即可。
[0068]判斷模塊20，用于判斷所述第一HTML數(shù)據(jù)中是否存在圖片，并確定所述圖片的像素面積是否大于預(yù)設(shè)閾值；
[0069]本實(shí)施例中，判斷模塊20通過(guò)HTML標(biāo)簽(〈image〉標(biāo)簽)，確定第一HTML數(shù)據(jù)中是否存在圖片。通常，HTML中的圖片都會(huì)顯示其分辨率，因此，可根據(jù)分辨率計(jì)算并確定圖片的像素面積是否大于預(yù)設(shè)閾值，像素面積越大，則圖片越大，對(duì)應(yīng)加載該圖片的時(shí)間也越長(zhǎng)，也即網(wǎng)頁(yè)中顯示該圖片的速度越慢。本實(shí)施例中對(duì)于圖片大小閾值的設(shè)置不限，具體根據(jù)實(shí)際需要進(jìn)行設(shè)置。
[0070]圖片處理模塊30，用于若所述第一HTML數(shù)據(jù)中圖片的像素面積大于所述閾值，則根據(jù)預(yù)置的配置處理策略對(duì)所述第一 HTML數(shù)據(jù)中的所述圖片進(jìn)行處理，得到第二 HTML數(shù)據(jù)；
[0071]轉(zhuǎn)發(fā)模塊40，用于將所述第二HTML數(shù)據(jù)發(fā)送至所述客戶(hù)端上進(jìn)行網(wǎng)頁(yè)顯示。
[0072]本實(shí)施例中，當(dāng)檢測(cè)到滿(mǎn)足條件的圖片時(shí)，圖片處理模塊30根據(jù)預(yù)置的配置處理策略，對(duì)該圖片進(jìn)行相應(yīng)處理，并得到處理該圖片后所對(duì)應(yīng)的第二 HTML數(shù)據(jù)。
[0073]本實(shí)施例中，對(duì)于配置處理策略的設(shè)置不限，例如刪除圖片等。當(dāng)完成對(duì)圖片的相應(yīng)處理后，網(wǎng)頁(yè)顯示處理裝置還需進(jìn)一步將處理該圖片后所對(duì)應(yīng)的第二 HTML數(shù)據(jù)轉(zhuǎn)發(fā)至客戶(hù)端上進(jìn)行網(wǎng)頁(yè)顯示。
[0074]本實(shí)施例中，在網(wǎng)頁(yè)在客戶(hù)端顯示之前，網(wǎng)頁(yè)顯示處理裝置截獲服務(wù)器所返回的HTML數(shù)據(jù)，并進(jìn)行檢查，以對(duì)該HTML數(shù)據(jù)中滿(mǎn)足預(yù)設(shè)條件的圖片數(shù)據(jù)進(jìn)行預(yù)處理，最后再將預(yù)處理后的HTML數(shù)據(jù)轉(zhuǎn)發(fā)至客戶(hù)端進(jìn)行顯示，從而以此提升網(wǎng)頁(yè)顯示處理效率及顯示速度。
[0075]進(jìn)一步可選的，在本發(fā)明網(wǎng)頁(yè)顯示處理裝置一實(shí)施例中，所述判斷模塊20還用于:判斷所述第一 HTML數(shù)據(jù)中是否存在壓縮數(shù)據(jù);若存在，則對(duì)所述壓縮數(shù)據(jù)進(jìn)行解壓。
[0076]本實(shí)施例中，考慮到服務(wù)器所返回的HTML數(shù)據(jù)中可能包含有壓縮數(shù)據(jù)(比如對(duì)大型圖片進(jìn)行壓縮)的特殊情況，因此，需要先對(duì)HTML數(shù)據(jù)進(jìn)行解壓縮處理，然后再對(duì)包括解壓數(shù)據(jù)在內(nèi)的所有HTML數(shù)據(jù)進(jìn)行圖片查詢(xún)遍歷，若遍歷到滿(mǎn)足條件的圖片，則進(jìn)行相應(yīng)處理，最后再轉(zhuǎn)發(fā)至客戶(hù)端進(jìn)行顯示，從而以此提升網(wǎng)頁(yè)顯示處理效率及顯示速度。
[0077]進(jìn)一步可選的，在本發(fā)明網(wǎng)頁(yè)顯示處理裝置另一實(shí)施例中，所述圖片處理模塊具體用于:
[0078](I)當(dāng)所述配置處理策略為圖片替換策略時(shí)，采用指定圖片替換所述圖片;或，將所述圖片所對(duì)應(yīng)的縮略圖替換所述圖片，其中，采用異步執(zhí)行方式生成所述圖片所對(duì)應(yīng)的縮略圖并緩存；
[0079]本實(shí)施例中，配置處理策略具體采用圖片替換策略，具體包括縮略圖策略與固定圖策略。
[0080]縮略圖策略將會(huì)對(duì)大圖片生成一個(gè)小的縮略圖，一般為32*32，圖片大小在Ik以下，生成縮略圖的過(guò)程為采用異步執(zhí)行，并且縮略圖可以緩存下來(lái)。然后把HTML的MG標(biāo)簽的SRC地址替換成縮略圖地址，比如在原地址后面加上?thumbnail以便客戶(hù)端下次請(qǐng)求時(shí)，網(wǎng)頁(yè)顯示處理裝置能識(shí)別出是請(qǐng)求縮略圖。由于縮略圖分辨率一般是原圖的十幾分之一，所以客戶(hù)端的瀏覽器在顯示縮略圖時(shí)，會(huì)拉升顯示，顯示出來(lái)的效果即是一個(gè)模糊的效果，而在用戶(hù)看來(lái)很像一個(gè)未完全加載完的圖片一樣，但不影響頁(yè)面的顯示效果。
[0081]而固定圖策略同上一個(gè)縮略圖替換策略類(lèi)似，只不過(guò)不替換成縮略圖，而是替換成一個(gè)統(tǒng)一小圖，比如可以對(duì)廣告圖片統(tǒng)一替換成一個(gè)小圖，上有提示文字廣告正在加載中”，或者提示:“請(qǐng)點(diǎn)擊顯示此廣告”。
[0082](2)當(dāng)所述配置處理策略為延時(shí)顯示策略時(shí)，在所述第一HTML數(shù)據(jù)中插入預(yù)置延時(shí)代碼，以供所述客戶(hù)端延時(shí)加載所述圖片；
[0083]本實(shí)施例中，延時(shí)顯示策略具體為:通過(guò)在HTML頁(yè)面中插入一段腳本JS代碼，該JS代碼在HTML頁(yè)面的body加載完成或者指定延遲的時(shí)間后再執(zhí)行，同時(shí)，在執(zhí)行該JS代碼時(shí)遍歷所有的IMG大圖節(jié)點(diǎn)，把IMG的大圖重新加載，而這時(shí)給予用戶(hù)體驗(yàn)就是大圖加載完變清晰了。
[0084](3)當(dāng)所述配置處理策略為基于用戶(hù)行為的顯示策略時(shí)，對(duì)所述圖片的顯示觸發(fā)方式進(jìn)行設(shè)置，其中，圖片的顯示觸發(fā)方式至少包括點(diǎn)擊圖片觸發(fā)和/或鼠標(biāo)停留在圖片上觸發(fā)。
[0085]本實(shí)施例中，基于用戶(hù)行為的顯示策略具體為:只有在用戶(hù)點(diǎn)擊，或者鼠標(biāo)經(jīng)過(guò)該圖片區(qū)域時(shí)時(shí)，才把大圖片顯示出來(lái)，否則只顯示替換后的縮略圖或者固定圖片。此時(shí)，給用戶(hù)的體驗(yàn)就是圖片按需加載，對(duì)于用戶(hù)想看的圖片才加載，不想看的圖片就不需要加載，從而節(jié)省網(wǎng)絡(luò)流量以及顯示時(shí)間。
[0086]以上僅為本發(fā)明的優(yōu)選實(shí)施例，并非因此限制本發(fā)明的專(zhuān)利范圍，凡是利用本發(fā)明說(shuō)明書(shū)及附圖內(nèi)容所作的等效結(jié)構(gòu)或等效流程變換，或直接或間接運(yùn)用在其他相關(guān)的技術(shù)領(lǐng)域，均同理包括在本發(fā)明的專(zhuān)利保護(hù)范圍內(nèi)。
【主權(quán)項(xiàng)】
1.一種網(wǎng)頁(yè)顯示處理方法，其特征在于，所述網(wǎng)頁(yè)顯示處理方法包括: 截獲服務(wù)器返回給客戶(hù)端的第一 HTML數(shù)據(jù)；判斷所述第一 HTML數(shù)據(jù)中是否存在圖片，并確定所述圖片的像素面積是否大于預(yù)設(shè)閾值； 若所述第一 HTML數(shù)據(jù)中圖片的像素面積大于所述閾值，則根據(jù)預(yù)置的配置處理策略對(duì)所述第一 HTML數(shù)據(jù)中的所述圖片進(jìn)行處理，得到第二 HTML數(shù)據(jù)； 將所述第二 HTML數(shù)據(jù)發(fā)送至所述客戶(hù)端上進(jìn)行網(wǎng)頁(yè)顯示。2.如權(quán)利要求1所述的網(wǎng)頁(yè)顯示處理方法，其特征在于，所述截獲服務(wù)器返回給客戶(hù)端的第一 HTML數(shù)據(jù)之后包括: 判斷所述第一 HTML數(shù)據(jù)中是否存在壓縮數(shù)據(jù)； 若存在，則對(duì)所述壓縮數(shù)據(jù)進(jìn)行解壓。3.如權(quán)利要求1所述的網(wǎng)頁(yè)顯示處理方法，其特征在于，所述根據(jù)預(yù)置的配置處理策略對(duì)所述第一 HTML數(shù)據(jù)中的所述圖片進(jìn)行處理包括: 當(dāng)所述配置處理策略為圖片替換策略時(shí)，采用指定圖片替換所述圖片;或，將所述圖片所對(duì)應(yīng)的縮略圖替換所述圖片，其中，采用異步執(zhí)行方式生成所述圖片所對(duì)應(yīng)的縮略圖并緩存。4.如權(quán)利要求1所述的網(wǎng)頁(yè)顯示處理方法，其特征在于，所述根據(jù)預(yù)置的配置處理策略對(duì)所述第一 HTML數(shù)據(jù)中的所述圖片進(jìn)行處理包括: 當(dāng)所述配置處理策略為延時(shí)顯示策略時(shí)，在所述第一HTML數(shù)據(jù)中插入預(yù)置延時(shí)代碼，以供所述客戶(hù)端延時(shí)加載所述圖片。5.如權(quán)利要求1所述的網(wǎng)頁(yè)顯示處理方法，其特征在于，所述根據(jù)預(yù)置的配置處理策略對(duì)所述第一 HTML數(shù)據(jù)中的所述圖片進(jìn)行處理包括: 當(dāng)所述配置處理策略為基于用戶(hù)行為的顯示策略時(shí)，對(duì)所述圖片的顯示觸發(fā)方式進(jìn)行設(shè)置，其中，圖片的顯示觸發(fā)方式至少包括點(diǎn)擊圖片觸發(fā)和/或鼠標(biāo)停留在圖片上觸發(fā)。6.—種網(wǎng)頁(yè)顯示處理裝置，其特征在于，所述網(wǎng)頁(yè)顯示處理裝置包括: 截獲模塊，用于截獲服務(wù)器返回給客戶(hù)端的第一 HTML數(shù)據(jù)； 判斷模塊，用于判斷所述第一HTML數(shù)據(jù)中是否存在圖片，并確定所述圖片的像素面積是否大于預(yù)設(shè)閾值； 圖片處理模塊，用于若所述第一 HTML數(shù)據(jù)中圖片的像素面積大于所述閾值，則根據(jù)預(yù)置的配置處理策略對(duì)所述第一 HTML數(shù)據(jù)中的所述圖片進(jìn)行處理，得到第二 HTML數(shù)據(jù)； 轉(zhuǎn)發(fā)模塊，用于將所述第二 HTML數(shù)據(jù)發(fā)送至所述客戶(hù)端上進(jìn)行網(wǎng)頁(yè)顯示。7.如權(quán)利要求6所述的網(wǎng)頁(yè)顯示處理裝置，其特征在于，所述判斷模塊還用于: 判斷所述第一 HTML數(shù)據(jù)中是否存在壓縮數(shù)據(jù)； 若存在，則對(duì)所述壓縮數(shù)據(jù)進(jìn)行解壓。8.如權(quán)利要求6所述的網(wǎng)頁(yè)顯示處理裝置，其特征在于，所述圖片處理模塊具體用于: 當(dāng)所述配置處理策略為圖片替換策略時(shí)，采用指定圖片替換所述圖片;或，將所述圖片所對(duì)應(yīng)的縮略圖替換所述圖片，其中，采用異步執(zhí)行方式生成所述圖片所對(duì)應(yīng)的縮略圖并緩存。9.如權(quán)利要求6所述的網(wǎng)頁(yè)顯示處理裝置，其特征在于，所述圖片處理模塊具體用于: 當(dāng)所述配置處理策略為延時(shí)顯示策略時(shí)，在所述第一HTML數(shù)據(jù)中插入預(yù)置延時(shí)代碼，以供所述客戶(hù)端延時(shí)加載所述圖片。10.如權(quán)利要求6所述的網(wǎng)頁(yè)顯示處理裝置，其特征在于，所述圖片處理模塊具體用于:當(dāng)所述配置處理策略為基于用戶(hù)行為的顯示策略時(shí)，對(duì)所述圖片的顯示觸發(fā)方式進(jìn)行設(shè)置，其中，圖片的顯示觸發(fā)方式至少包括點(diǎn)擊圖片觸發(fā)和/或鼠標(biāo)停留在圖片上觸發(fā)。
【文檔編號(hào)】G06F17/30GK106055647SQ201610377690
【公開(kāi)日】2016年10月26日
【申請(qǐng)日】2016年5月31日
【發(fā)明人】張銳
【申請(qǐng)人】深圳市永興元科技有限公司