一種網(wǎng)頁(yè)顯示方法及裝置的制造方法
【技術(shù)領(lǐng)域】
[0001 ] 本發(fā)明具體實(shí)施例涉及瀏覽器技術(shù)領(lǐng)域，特別涉及一種網(wǎng)頁(yè)顯示方法及裝置。
【背景技術(shù)】
[0002]隨著計(jì)算機(jī)和互聯(lián)網(wǎng)技術(shù)的發(fā)展，使用各種終端，例如臺(tái)式計(jì)算機(jī)、智能手機(jī)、平板電腦等瀏覽網(wǎng)頁(yè)是人們?nèi)粘Ｉ钪凶顬槌Ｒ?jiàn)的應(yīng)用之一。在終端中的瀏覽器上瀏覽網(wǎng)頁(yè)時(shí)，用戶(hù)可以通過(guò)例如對(duì)滾動(dòng)條的拖動(dòng)操作、手指在觸摸屏上的滑動(dòng)操作等使瀏覽器所顯示的網(wǎng)頁(yè)發(fā)生滾動(dòng)，從而使該網(wǎng)頁(yè)的各部分依次呈現(xiàn)在瀏覽器窗口中，供用戶(hù)查看。瀏覽器窗口中的網(wǎng)頁(yè)部分被稱(chēng)為網(wǎng)頁(yè)的頁(yè)面可見(jiàn)區(qū)域。為了使該頁(yè)面可見(jiàn)區(qū)域呈現(xiàn)出來(lái)，瀏覽器需要先生成該頁(yè)面可見(jiàn)區(qū)域的實(shí)際位圖，并將該實(shí)際位圖繪制上屏。
[0003]然而在終端，尤其在移動(dòng)終端的瀏覽器上瀏覽網(wǎng)頁(yè)時(shí)，如果瀏覽器所顯示的網(wǎng)頁(yè)滾動(dòng)速度過(guò)快，由于受到例如頁(yè)面可見(jiàn)區(qū)域的復(fù)雜度、終端的計(jì)算性能和分辨率，以及瀏覽器內(nèi)核本身的渲染能力等因素的影響，瀏覽器對(duì)該實(shí)際位圖的生成和繪制速度可能無(wú)法跟上網(wǎng)頁(yè)的滾動(dòng)速度。為了保證網(wǎng)頁(yè)滾動(dòng)的流暢性，在該實(shí)際位圖的生成或繪制速度跟不上網(wǎng)頁(yè)的滾動(dòng)速度時(shí)，通常會(huì)在瀏覽器窗口中繪制空白來(lái)替代該實(shí)際位圖，這種方法將使頁(yè)面可見(jiàn)區(qū)域出現(xiàn)白屏效果。當(dāng)網(wǎng)頁(yè)的復(fù)雜度較高，以及終端的分辨率較高時(shí)，在網(wǎng)頁(yè)的滾動(dòng)過(guò)程中頁(yè)面可見(jiàn)區(qū)域?qū)⒔?jīng)常出現(xiàn)白屏效果。因此，這種方法雖然可以保證網(wǎng)頁(yè)滾動(dòng)的流暢性，但對(duì)用戶(hù)而言顯然視覺(jué)效果較差。
[0004]為了避免出現(xiàn)白屏效果，瀏覽器也可以在網(wǎng)頁(yè)滾動(dòng)過(guò)程中，每滾動(dòng)一次就根據(jù)網(wǎng)頁(yè)滾動(dòng)的距離同步生成該距離對(duì)應(yīng)的頁(yè)面位圖，結(jié)合頁(yè)面可見(jiàn)區(qū)域中已生成的部分可重用的頁(yè)面位圖，可以得到頁(yè)面可見(jiàn)區(qū)域的實(shí)際位圖。這種情況下，網(wǎng)頁(yè)的滾動(dòng)速度將受到該距離對(duì)應(yīng)的頁(yè)面位圖的生成和繪制速度的影響，若該距離對(duì)應(yīng)的頁(yè)面位圖的生成和繪制速度較慢，將使網(wǎng)頁(yè)的滾動(dòng)出現(xiàn)卡頓的現(xiàn)象。

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

[0005]有鑒于此，有必要提供一種網(wǎng)頁(yè)顯示方法及裝置，可以在保證網(wǎng)頁(yè)滾動(dòng)流暢性的同時(shí)，保證呈現(xiàn)的視覺(jué)效果。
[0006]一種網(wǎng)頁(yè)顯示方法，包括以下步驟:當(dāng)偵測(cè)到瀏覽器所顯示的網(wǎng)頁(yè)發(fā)生滾動(dòng)事件時(shí)，確定該網(wǎng)頁(yè)的頁(yè)面可見(jiàn)區(qū)域；從緩存區(qū)中獲取屬于該頁(yè)面可見(jiàn)區(qū)域的實(shí)際位圖，并將所獲取的實(shí)際位圖繪制上屏；若所獲取的實(shí)際位圖未覆蓋所述頁(yè)面可見(jiàn)區(qū)域，則獲取該頁(yè)面可見(jiàn)區(qū)域中未被該實(shí)際位圖覆蓋的第一目標(biāo)區(qū)域；生成該第一目標(biāo)區(qū)域的縮略位圖，該縮略位圖相較于該第一目標(biāo)區(qū)域的實(shí)際位圖具有較小的縮放系數(shù)，當(dāng)該縮略位圖生成完畢時(shí)，將所生成的縮略位圖繪制上屏；生成該第一目標(biāo)區(qū)域的實(shí)際位圖，當(dāng)該實(shí)際位圖生成完畢時(shí)，將所生成的實(shí)際位圖繪制上屏。
[0007]—種網(wǎng)頁(yè)顯示裝置，包括:確定模塊，用于當(dāng)偵測(cè)到瀏覽器所顯示的網(wǎng)頁(yè)發(fā)生滾動(dòng)事件時(shí)，確定該網(wǎng)頁(yè)的頁(yè)面可見(jiàn)區(qū)域；第一位圖獲取模塊，用于從緩存區(qū)中獲取屬于該頁(yè)面可見(jiàn)區(qū)域的實(shí)際位圖，并將所獲取的實(shí)際位圖繪制上屏；第一區(qū)域獲取模塊，用于若所獲取的實(shí)際位圖未覆蓋所述頁(yè)面可見(jiàn)區(qū)域，則獲取該頁(yè)面可見(jiàn)區(qū)域中未被該實(shí)際位圖覆蓋的第一目標(biāo)區(qū)域；第一生成模塊，用于生成該第一目標(biāo)區(qū)域的縮略位圖，該縮略位圖相較于該第一目標(biāo)區(qū)域的實(shí)際位圖具有較小的縮放系數(shù)，當(dāng)該縮略位圖生成完畢時(shí)，將所生成的縮略位圖繪制上屏；第二生成模塊，用于生成該第一目標(biāo)區(qū)域的實(shí)際位圖，當(dāng)該實(shí)際位圖生成完畢時(shí)，將所生成的實(shí)際位圖繪制上屏。
[0008]相較于現(xiàn)有技術(shù)，本發(fā)明網(wǎng)頁(yè)顯示方法及裝置，在偵測(cè)到瀏覽器所顯示的網(wǎng)頁(yè)發(fā)生滾動(dòng)事件時(shí)，確定該網(wǎng)頁(yè)的頁(yè)面可見(jiàn)區(qū)域，然后先從緩存區(qū)中獲取屬于該頁(yè)面可見(jiàn)區(qū)域的實(shí)際位圖繪制上屏，若所獲取的實(shí)際位圖未覆蓋所述頁(yè)面可見(jiàn)區(qū)域，則生成該頁(yè)面可見(jiàn)區(qū)域中未被該實(shí)際位圖覆蓋的第一目標(biāo)區(qū)域的縮略位圖并將所生成的縮略位圖繪制上屏，該縮略位圖相較于該第一目標(biāo)區(qū)域的實(shí)際位圖具有較小的縮放系數(shù)，然后再生成該第一目標(biāo)區(qū)域的實(shí)際位圖并將所生成的實(shí)際位圖繪制上屏，從而在保證網(wǎng)頁(yè)滾動(dòng)流暢性的同時(shí)，通過(guò)該縮略位圖保證呈現(xiàn)的視覺(jué)效果。
[0009]為讓本發(fā)明的上述和其他目的、特征和優(yōu)點(diǎn)能更明顯易懂，下文特舉較佳實(shí)施例，并配合所附圖式，作詳細(xì)說(shuō)明如下。
【附圖說(shuō)明】
[0010]圖1為一種終端的結(jié)構(gòu)框圖。
[0011]圖2為本發(fā)明第一實(shí)施例提供的網(wǎng)頁(yè)顯示方法的流程圖。
[0012]圖3為本發(fā)明第一實(shí)施例至第六實(shí)施例提供的網(wǎng)頁(yè)顯示方法的詳細(xì)流程圖。
[0013]圖4為第一目標(biāo)區(qū)域的縮略位圖的示例圖。
[0014]圖5為放大后的第一目標(biāo)區(qū)域的縮略位圖的示例圖。
[0015]圖6為第一目標(biāo)區(qū)域的實(shí)際位圖的示例圖。
[0016]圖7為本發(fā)明第七實(shí)施例提供的網(wǎng)頁(yè)顯示裝置的框圖。
【具體實(shí)施方式】
[0017]為更進(jìn)一步闡述本發(fā)明為實(shí)現(xiàn)預(yù)定發(fā)明目的所采取的技術(shù)手段及功效，以下結(jié)合附圖及較佳實(shí)施例，對(duì)依據(jù)本發(fā)明的【具體實(shí)施方式】、結(jié)構(gòu)、特征及其功效，詳細(xì)說(shuō)明如后。
[0018]圖1示出了一種終端的結(jié)構(gòu)框圖。如圖1所示，終端I包括一個(gè)或多個(gè)(圖中僅示出一個(gè))存儲(chǔ)器11、處理器12、存儲(chǔ)控制器13、外設(shè)接口 14、通信模塊15、輸入單元16及顯示單元17。這些組件通過(guò)一條或多條通訊總線/信號(hào)線相互通訊。
[0019]本領(lǐng)域普通技術(shù)人員可以理解，圖1所示的結(jié)構(gòu)僅為示意，其并不對(duì)終端I的結(jié)構(gòu)造成限定。例如，終端I還可包括比圖1所示更多或者更少的組件，或者具有與圖1所示不同的配置。圖1所示的各組件可以采用硬件、軟件或其組合實(shí)現(xiàn)。
[0020]存儲(chǔ)器11可用于存儲(chǔ)軟件程序以及模塊，如本發(fā)明實(shí)施例中的網(wǎng)頁(yè)顯示方法及裝置對(duì)應(yīng)的程序指令/模塊，處理器12通過(guò)運(yùn)行存儲(chǔ)在存儲(chǔ)器11內(nèi)的軟件程序以及模塊，從而執(zhí)行各種功能應(yīng)用以及數(shù)據(jù)處理，即實(shí)現(xiàn)上述的網(wǎng)頁(yè)顯示方法。
[0021]存儲(chǔ)器11可包括高速隨機(jī)存儲(chǔ)器，還可包括非易失性存儲(chǔ)器，如一個(gè)或者多個(gè)磁性存儲(chǔ)裝置、閃存、或者其他非易失性固態(tài)存儲(chǔ)器。在一些實(shí)例中，存儲(chǔ)器11可進(jìn)一步包括相對(duì)于處理器12遠(yuǎn)程設(shè)置的存儲(chǔ)器，這些遠(yuǎn)程設(shè)置的存儲(chǔ)器可以通過(guò)網(wǎng)絡(luò)連接至終端I。上述網(wǎng)絡(luò)的實(shí)例包括但不限于互聯(lián)網(wǎng)、企業(yè)內(nèi)部網(wǎng)、局域網(wǎng)、移動(dòng)通信網(wǎng)及其組合。處理器12以及其他可能的組件對(duì)存儲(chǔ)器11的訪問(wèn)可在存儲(chǔ)控制器13的控制下進(jìn)行。
[0022]外設(shè)接口 14將各種輸入/輸出裝置耦合至處理器12以及存儲(chǔ)器11。處理器12運(yùn)行存儲(chǔ)器11內(nèi)的各種軟件、指令以及執(zhí)行終端I的各種功能以及進(jìn)行數(shù)據(jù)處理。
[0023]通信模塊15用于與通信網(wǎng)絡(luò)或者其他設(shè)備進(jìn)行通信。具體地，通信模塊15例如可以是網(wǎng)卡151或RF (Rad1 Frequency，射頻)模塊152。網(wǎng)卡151作為局域網(wǎng)中連接計(jì)算機(jī)和傳輸介質(zhì)的接口，用于實(shí)現(xiàn)與局域網(wǎng)傳輸介質(zhì)之間的物理連接與電信號(hào)匹配，從而建立局域網(wǎng)并連接到因特網(wǎng)(Internet)，與各種網(wǎng)絡(luò)如局域網(wǎng)、城域網(wǎng)、廣域網(wǎng)進(jìn)行通信。網(wǎng)卡151可包括各種現(xiàn)有的用于執(zhí)行上述功能的電路元件，例如處理器和存儲(chǔ)器(包括ROM和RAM)等。RF模塊152用于接收以及發(fā)送電磁波，實(shí)現(xiàn)電磁波與電信號(hào)的相互轉(zhuǎn)換，從而與通信網(wǎng)絡(luò)或者其他設(shè)備進(jìn)行通信。RF模塊152可包括各種現(xiàn)有的用于執(zhí)行這些功能的電路元件，例如，天線、射頻收發(fā)器、數(shù)字信號(hào)處理器、加密/解密芯片、用戶(hù)身份模塊(SM)卡、存儲(chǔ)器等等。RF模塊152可與各種網(wǎng)絡(luò)如互聯(lián)網(wǎng)、企業(yè)內(nèi)部網(wǎng)、無(wú)線網(wǎng)絡(luò)進(jìn)行通信或者通過(guò)無(wú)線網(wǎng)絡(luò)與其他設(shè)備進(jìn)行通信。上述的無(wú)線網(wǎng)絡(luò)可包括蜂窩式電話網(wǎng)、無(wú)線局域網(wǎng)或者城域網(wǎng)。上述的無(wú)線網(wǎng)絡(luò)可以使用各種通信標(biāo)準(zhǔn)、協(xié)議及技術(shù)，包括但并不限于全球移動(dòng)通信系統(tǒng)(Global System for Mobile Communicat1n, GSM)、增強(qiáng)型移動(dòng)通信技術(shù)(Enhanced Data GSM Environment, EDGE),寬帶碼分多址技術(shù)(wideband codedivis1n multiple access, W-CDMA),碼分多址技術(shù)(Code divis1n access, CDMA)、時(shí)分多址技術(shù)(time divis1n multiple access, TDMA),無(wú)線保真技術(shù)(Wireless, Fidelity,WiFi)(如美國(guó)電氣和電子工程師協(xié)會(huì)標(biāo)準(zhǔn)IEEE802.11a, IEEE802.lib, IEEE802.1lg和/或 IEEE802.1ln)、網(wǎng)絡(luò)電話(Voice over internet protocal, VoIP)、全球微波互聯(lián)接入(Worldwide Interoperability for Microwave Access,Wi_Max)、其他用于郵件、B卩時(shí)通信及短消息的協(xié)議，以及任何其他合適的通信協(xié)議，甚至可包括那些當(dāng)前仍未被開(kāi)發(fā)出來(lái)的協(xié)議。
[0024]輸入單元16可用于接收輸入的字符信息，以及產(chǎn)生與用戶(hù)設(shè)置以及功能控制有關(guān)的鍵盤(pán)、鼠標(biāo)、操作桿、光學(xué)或者軌跡球信號(hào)輸入。具體地，輸入單元16可包括按鍵161以及觸控表面162。按鍵161例如可包括用于輸入字符的字符按鍵，以及用于觸發(fā)控制功能的控制按鍵?？刂瓢存I的實(shí)例包括“返回主屏”按鍵、開(kāi)機(jī)/關(guān)機(jī)按鍵、拍照鍵等等。觸控表面162可收集用戶(hù)在其上或附近的觸摸操作(比如用戶(hù)使用手指、觸筆等任何適合的物體或附件在觸控表面162上或在觸控表面162附近的操作)，并根據(jù)預(yù)先設(shè)定的程序驅(qū)動(dòng)相應(yīng)的連接裝置。可選的，觸控表面162可包括觸摸檢測(cè)裝置和觸摸控制器兩個(gè)部分。其中，觸摸檢測(cè)裝置檢測(cè)用戶(hù)的觸摸方位，并檢測(cè)觸摸操作帶來(lái)的信號(hào)，將信號(hào)傳送給觸摸控制器；觸摸控制器從觸摸檢測(cè)裝置上接收觸摸信息，并將它轉(zhuǎn)換成觸點(diǎn)坐標(biāo)，再送給處理器12，并能接收處理器12發(fā)來(lái)的命令并加以執(zhí)行。此外，可以采用電阻式、電容式、紅外線以及表面聲波等多種類(lèi)型實(shí)現(xiàn)觸控表面162。除了觸控表面162，輸入單元16還可以包括其他輸入設(shè)備。上述的其他輸入設(shè)備包括但不限于物理鍵盤(pán)、軌跡球、鼠標(biāo)、操作桿等中的一種或多種。
[0025]顯示單元17用于顯示由用戶(hù)輸入的信息、提供給用戶(hù)的信息以及終端I的各種圖形接口。這些圖形用戶(hù)接口可以由圖形、文本、圖標(biāo)、視頻和其任意組合來(lái)構(gòu)成。在一個(gè)實(shí)例中，顯示單元17包括一個(gè)顯示面板171。該顯示面板171例如可為一個(gè)液晶顯示面板(Liquid Crystal Display, LCD)、有機(jī)發(fā)光二極管