r>[0096]圖3示出了本發(fā)明的圖片渲染裝置的第一個(gè)實(shí)施例的結(jié)構(gòu)框圖。
[0097]如圖3所示,本實(shí)施例的圖片解碼裝置包括:
[0098]負(fù)責(zé)渲染的線程單元10、解碼線程單元20,
[0099]所述負(fù)責(zé)渲染的線程單元10,用于在渲染網(wǎng)頁時(shí)檢測出準(zhǔn)備渲染的圖片為未解碼圖片,則創(chuàng)建所述圖片的圖片解碼任務(wù)以供解碼線程單元20根據(jù)圖片的圖片解碼任務(wù)對(duì)所述圖片進(jìn)行解碼,獲取所述圖片的信息,根據(jù)獲取的圖片信息渲染解碼線程解碼后的圖片。
[0100]所述解碼線程單元20,用于根據(jù)圖片的圖片解碼任務(wù)對(duì)所述圖片進(jìn)行解碼。
[0101]圖4示出了本發(fā)明的圖片渲染裝置的第二個(gè)實(shí)施例的結(jié)構(gòu)框圖。
[0102]如圖4所示,本實(shí)施例的圖片渲染裝置的所述負(fù)責(zé)渲染的線程單元10包括:檢測模塊400、任務(wù)創(chuàng)建模塊401、任務(wù)管理模塊402、第一判斷模塊403、任務(wù)選擇模塊404、線程池構(gòu)建模塊405、第二判斷模塊406、解碼線程創(chuàng)建模塊408、通信模塊409、信息獲取模塊410、渲染模塊411。所述解碼線程單元20包括:解碼模塊407。
[0103]檢測模塊400,用于在渲染線程渲染網(wǎng)頁時(shí)檢測出準(zhǔn)備渲染的圖片為未解碼圖片。
[0104]渲染線程在渲染過程中是根據(jù)排版樹的結(jié)構(gòu)逐個(gè)對(duì)網(wǎng)頁元素進(jìn)行渲染。每個(gè)元素的信息可能記錄在本地緩存的文件中,當(dāng)執(zhí)行渲染時(shí),即渲染線程去相應(yīng)的文件中獲取當(dāng)前元素的信息執(zhí)行網(wǎng)頁元素的渲染。
[0105]圖片的圖片數(shù)據(jù)是瀏覽器根據(jù)網(wǎng)頁源代碼解析出來的圖片對(duì)應(yīng)的地址向圖片資源服務(wù)器請(qǐng)求的獲取后存儲(chǔ)于本地緩存中。而從圖片資源服務(wù)器獲取的圖片數(shù)據(jù)在沒有經(jīng)過解碼的情況下,渲染線程不能夠直接渲染顯示。必須先經(jīng)過解碼處理才能進(jìn)行渲染顯示,所以渲染線程在進(jìn)行網(wǎng)頁元素渲染前,首先要由檢測模塊400檢測出網(wǎng)頁元素的類型。如果是圖片,就要檢測圖片是否是未解碼圖片。
[0106]檢測模塊400檢測出準(zhǔn)備渲染的圖片沒有解碼時(shí),就由任務(wù)創(chuàng)建模塊401創(chuàng)建所述圖片的圖片解碼任務(wù)。
[0107]創(chuàng)建完圖片解碼任務(wù)后,任務(wù)管理模塊402將所述圖片解碼任務(wù)加入圖片解碼隊(duì)列中。之后,第一判斷模塊403判斷圖片解碼線程池是否已經(jīng)構(gòu)建。
[0108]如果線程池已經(jīng)構(gòu)建,則由任務(wù)選擇模塊404從圖片解碼任務(wù)隊(duì)列選擇一個(gè)圖片解碼任務(wù)加入解碼線程池中。
[0109]如果解碼線程池還沒構(gòu)建,則由線程池構(gòu)建模塊405構(gòu)建包含一個(gè)或多個(gè)解碼線程的圖片解碼線程池。
[0110]第二判斷模塊406判斷解碼線程池中是否有可用的解碼線程。
[0111]如果有可用的解碼線程,則由解碼模塊407對(duì)圖片進(jìn)行解碼。這里需要解碼線程池先喚醒可用的解碼線程,然后由可用的解碼線程的解碼模塊407對(duì)圖片進(jìn)行解碼
[0112]如果沒有可用的解碼線程,則由解碼線程創(chuàng)建模塊408創(chuàng)建解碼線程或者等待解碼線程完成解碼任務(wù),然后由解碼模塊407對(duì)圖片進(jìn)行解碼
[0113]在解碼完成之前,渲染線程渲染模塊411繼續(xù)進(jìn)行下一網(wǎng)頁元素的渲染工作,暫不執(zhí)行該圖片的渲染動(dòng)作。
[0114]解碼完成后,通信模塊409通知渲染線程進(jìn)行該圖片的渲染。
[0115]在進(jìn)行該圖片渲染前,由信息獲取模塊410獲取所述圖片的信息。
[0116]這里的圖片信息包括所述圖片需要渲染的位置及大小信息。信息獲取模塊410其實(shí)是從圖片映射表中獲取所述圖片需要渲染的位置及大小信息。
[0117]所述圖片需要渲染的位置及大小信息是在進(jìn)行網(wǎng)頁排版時(shí)計(jì)算出來的,在進(jìn)行網(wǎng)頁排版時(shí),負(fù)責(zé)網(wǎng)頁排版的線程對(duì)圖片進(jìn)行初步解析得到圖片大小,然后根據(jù)網(wǎng)頁排版需要計(jì)算出圖片要渲染顯示的位置和需要渲染顯示的大小。需要注意的是,解析出來的圖片大小與圖片渲染顯示的大小并不一定相同,因?yàn)闉g覽器會(huì)綜合很多方面的因素,比如顯示屏的大小、網(wǎng)頁縮放等因素對(duì)圖片進(jìn)行縮放。所以從資源服務(wù)器獲取的圖片的大小為100*100像素,最后經(jīng)過排版計(jì)算后需要渲染顯示的大小為50*50。
[0118]負(fù)責(zé)排版的線程完成對(duì)圖片進(jìn)行初步解析,然后根據(jù)網(wǎng)頁排版需要計(jì)算出圖片要渲染顯示的位置和需要渲染顯示的大小后,將圖片要渲染顯示的位置和需要渲染顯示的大小信息傳輸給渲染線程,渲染線程收到圖片的這些信息后就將這些信息記錄在圖片映射表中。
[0119]圖片映射表的key值為圖片對(duì)象指針,value值為需要繪制的圖片的在網(wǎng)頁中出現(xiàn)過的所有矩形區(qū)域的疊加值。
[0120]此圖片映射表中記錄的圖片在網(wǎng)頁中要渲染顯示的位置包括歷史位置和最新的位置,即圖片在網(wǎng)頁中可能存在的所有位置。由于目前大多數(shù)網(wǎng)頁為動(dòng)態(tài)網(wǎng)頁,圖片很可能是不斷發(fā)生位置、形狀等變化。因此,在不同時(shí)間段中,圖片在網(wǎng)頁中所處的位置很可能也不一樣。在圖片映射表中記錄的圖片渲染顯示的位置是疊加記錄每一次網(wǎng)頁渲染顯示時(shí)圖片的所在位置。同時(shí)由于同一個(gè)網(wǎng)頁中可能出現(xiàn)多個(gè)完全一樣的圖片,而圖片原始數(shù)據(jù)其實(shí)只有一份,所以僅需對(duì)一張圖片進(jìn)行解碼,但解碼完成后,圖片可能需要渲染在頁面的多個(gè)區(qū)域。所以本實(shí)施例需要在圖片映射表中疊加記錄圖片出現(xiàn)過的所有位置,即包括歷史位置和最新的位置。
[0121]在解碼模塊407完成圖片的解碼,信息獲取模塊410又獲取到了圖片需要渲染的位置和大小信息后,渲染線程的渲染模塊411根據(jù)獲取圖片需要渲染的位置和大小信息渲染對(duì)已經(jīng)完成解碼的圖片進(jìn)行渲染。
[0122]本實(shí)施例的圖片渲染裝置,負(fù)責(zé)渲染的線程單元在渲染網(wǎng)頁元素時(shí)檢測到未解碼圖片時(shí),為所述圖片創(chuàng)建圖片解碼任務(wù)以供解碼線程單元根據(jù)圖片的圖片解碼任務(wù)對(duì)所述圖片進(jìn)行解碼,同時(shí)負(fù)責(zé)渲染的線程單元獲取所述圖片的信息,最后根據(jù)記錄的圖片信息渲染解碼線程單元解碼的圖片。將解碼工作從負(fù)責(zé)渲染的線程單元中分離出來,由解碼線程進(jìn)行圖片的解碼。在解碼線程進(jìn)行圖片解碼的時(shí)候,負(fù)責(zé)渲染的渲染線程或者主線程可以進(jìn)行下一任務(wù)的工作,將圖片解碼的工作分離出來釋放了主線程或者渲染線程的壓力,加快了網(wǎng)頁渲染渲染速度,能有效避免瀏覽網(wǎng)頁時(shí)產(chǎn)生的卡頓現(xiàn)象。
[0123]圖5示出了本發(fā)明的圖片解碼裝置的第三個(gè)實(shí)施例的結(jié)構(gòu)框圖。
[0124]如圖5所示,在優(yōu)選的實(shí)施例中,在圖片解碼過程中,除了包含圖4所示的實(shí)施例的模塊以外,還包括用戶行為檢測模塊500、檢查模塊501和第一刪除模塊502。
[0125]用戶行為檢測模塊500,用于檢測用戶操作行為是否導(dǎo)致了網(wǎng)頁可視區(qū)域發(fā)生變化。這里的用戶操作行為包括用戶滾動(dòng)網(wǎng)頁或者打開新網(wǎng)頁等等操作。由于網(wǎng)頁可視區(qū)域?qū)⑹遣粩喟l(fā)生變化的。為此,在本優(yōu)選實(shí)施例中當(dāng)用戶行為檢測模塊500檢測到用戶操作導(dǎo)致了網(wǎng)頁可視區(qū)域發(fā)生變化時(shí),檢查模塊501檢查圖片解碼隊(duì)列中的圖片是否已不在可視區(qū)域預(yù)設(shè)閾值范圍內(nèi),若是,則由第一刪除模塊502在圖片解碼隊(duì)列中刪除所述圖片對(duì)應(yīng)的圖片解碼任務(wù)和在圖片映射表中刪除所述圖片需要渲染的位置及大小信息。通過上述步驟的處理后,可保證當(dāng)前正解碼的圖片,在可視區(qū)域范圍內(nèi),而非可視區(qū)域的圖片,將不浪費(fèi)CPU時(shí)間對(duì)其進(jìn)行解碼。
[0126]圖6示出了本發(fā)明的圖片解碼裝置的第四實(shí)施例的結(jié)構(gòu)框圖。
[0127]如圖6所示,在優(yōu)選的實(shí)施例中本發(fā)明的圖片渲染裝置,在圖片解碼過程中,除了包含圖4所示的實(shí)施例的模塊以外,還包括緩存模塊600、第二刪除模塊601和可視范圍檢測模塊602。解碼模塊407執(zhí)行完圖片解碼后,緩存模塊600會(huì)對(duì)已經(jīng)完成解碼的圖片的圖片解碼數(shù)據(jù)進(jìn)行緩存。進(jìn)行圖片解碼數(shù)據(jù)緩存是為了盡量減少圖片解碼時(shí)間。
[0128]緩存下解碼完成后的圖片數(shù)據(jù),超過緩存閾值時(shí)則會(huì)由第二刪除模塊601清理緩存模塊600中的已經(jīng)完成解碼的圖片的圖片解碼數(shù)據(jù)。然而由于在一個(gè)頁面的可視范圍內(nèi),圖片數(shù)據(jù)量非常大,導(dǎo)致圖片緩存池空間不夠用。所以會(huì)出現(xiàn)第二刪除模塊601不斷的清理圖片緩存,同時(shí)又由解碼模塊407不斷對(duì)圖片進(jìn)行解碼。這樣會(huì)導(dǎo)致前一瞬間圖片解碼數(shù)據(jù)存在,能夠繪制出圖片,而隨后由于緩存滿了,該圖片解碼數(shù)據(jù)被清理掉了。此時(shí)本實(shí)施例會(huì)使用另外一個(gè)線程的解碼模塊407對(duì)該圖片進(jìn)行解碼。在解碼完成之前,渲染模塊411將不渲染顯示該圖片,所以在此過程中用戶將看不到圖片,待圖片解碼完成后,圖片又被渲染模塊411渲染顯示出來,這樣會(huì)導(dǎo)致頁面出現(xiàn)圖片不斷閃爍的問題。
[0129]為了解決上述問題,在優(yōu)選的實(shí)施方式中,在第二刪除模塊601進(jìn)行圖片解碼數(shù)據(jù)緩存清理時(shí),不清理緩存中的確定處于可視區(qū)域預(yù)設(shè)閾值范圍內(nèi)的圖片的圖片解碼數(shù)據(jù)。也就是說在清理緩存中的圖片解碼數(shù)據(jù)之前,也會(huì)由可視范圍檢測模塊602檢測準(zhǔn)備刪除的圖片是否存在于可視預(yù)設(shè)閾值區(qū)域中,如果是,則不管緩存是否已滿,該圖片的圖片解碼數(shù)據(jù)均不從緩存中刪除。這樣有效避免出現(xiàn)頁面出現(xiàn)圖片不斷閃爍的問題。
[0130]本優(yōu)選實(shí)施例中的可視區(qū)域預(yù)設(shè)閾值范圍跟前面實(shí)施例子所講的可視區(qū)域預(yù)設(shè)閾值范圍可以是相同的意思。即可以是當(dāng)前屏幕正在顯示的區(qū)域范圍,也可以是當(dāng)前正在顯示范圍以外的預(yù)設(shè)閾值區(qū)域范圍,例如可以是當(dāng)前頁面后的一屏頁面范圍,或者多屏頁面范圍。
[0131]圖7為本發(fā)明的移動(dòng)終端一個(gè)實(shí)施例的系統(tǒng)結(jié)構(gòu)圖。
[0132]如圖7所示,本發(fā)明的移動(dòng)終端包含瀏覽器引擎、渲染引擎、網(wǎng)絡(luò)、JS解釋器和存儲(chǔ)器。
[0133]其中用戶界面包括地址欄、后退/前進(jìn)按鈕、書簽?zāi)夸浀?,也就是用戶所看到的除了用來顯示用戶所請(qǐng)求頁面的主窗口之外的其他部分。
[0134]瀏覽器引擎,用于查詢及操作渲染引擎的接口。
[0135]渲染引擎,用于顯示用戶