一種網(wǎng)頁(yè)元素的繪制方法及裝置的制造方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明屬于瀏覽器技術(shù)領(lǐng)域，尤其涉及一種網(wǎng)頁(yè)元素的繪制方法及裝置。
【背景技術(shù)】
[0002]目前,手機(jī)瀏覽器均是通過(guò)網(wǎng)頁(yè)定義的級(jí)聯(lián)樣式表(Cascading Style Sheet,CSS)來(lái)完成網(wǎng)頁(yè)元素的繪制，對(duì)于未定義CSS的網(wǎng)頁(yè)元素，手機(jī)瀏覽器通常會(huì)為該網(wǎng)頁(yè)元素匹配一個(gè)CSS，以完成對(duì)該網(wǎng)頁(yè)元素的繪制。
[0003]然而，上述方法增加了手機(jī)瀏覽器對(duì)網(wǎng)頁(yè)的解析流程:當(dāng)手機(jī)瀏覽器解析到未定義CSS的網(wǎng)頁(yè)元素時(shí)，需要為該網(wǎng)頁(yè)元素匹配一個(gè)CSS，再對(duì)該網(wǎng)頁(yè)元素進(jìn)行一遍CSS解析，如此一來(lái)，一旦網(wǎng)頁(yè)中未定義CSS的網(wǎng)頁(yè)元素?cái)?shù)量較多，則手機(jī)瀏覽器需要重復(fù)上述流程，解析過(guò)多的CSS，從而增加了手機(jī)瀏覽器的內(nèi)核開(kāi)銷(xiāo)，降低了手機(jī)瀏覽器的內(nèi)核性能。

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

[0004]本發(fā)明實(shí)施例的目的在于提供一種網(wǎng)頁(yè)元素的繪制方法，解決目前在繪制未定義CSS的網(wǎng)頁(yè)元素時(shí)，手機(jī)瀏覽器內(nèi)核開(kāi)銷(xiāo)大的問(wèn)題。
[0005]本發(fā)明實(shí)施例是這樣實(shí)現(xiàn)的，一種網(wǎng)頁(yè)元素的繪制方法，包括:
[0006]判斷是否需要為當(dāng)前解析的網(wǎng)頁(yè)元素增加外觀樣式；
[0007]當(dāng)判斷出需要對(duì)所述當(dāng)前解析的網(wǎng)頁(yè)元素增加外觀樣式時(shí)，在本地?cái)?shù)據(jù)庫(kù)中提取出與該網(wǎng)頁(yè)元素的元素類型相匹配的外觀樣式；
[0008]通過(guò)瀏覽器內(nèi)核的渲染接口為所述當(dāng)前解析的網(wǎng)頁(yè)元素繪制提取出的所述外觀樣式。
[0009]本發(fā)明實(shí)施例的另一目的在于提供一種網(wǎng)頁(yè)元素的繪制裝置，包括:
[0010]判斷單元，用于判斷是否需要為當(dāng)前解析的網(wǎng)頁(yè)元素增加外觀樣式；
[0011]提取單元，用于當(dāng)判斷出需要對(duì)所述當(dāng)前解析的網(wǎng)頁(yè)元素增加外觀樣式時(shí)，在本地?cái)?shù)據(jù)庫(kù)中提取出與該網(wǎng)頁(yè)元素的元素類型相匹配的外觀樣式；
[0012]繪制單元，用于通過(guò)瀏覽器內(nèi)核的渲染接口為所述當(dāng)前解析的網(wǎng)頁(yè)元素繪制提取出的所述外觀樣式。
[0013]在本發(fā)明實(shí)施例中，對(duì)于未被網(wǎng)頁(yè)定義CSS的網(wǎng)頁(yè)元素，瀏覽器通過(guò)調(diào)用其內(nèi)核的渲染接口，直接為該網(wǎng)頁(yè)元素繪制與之相匹配的外觀樣式，從而避免了在網(wǎng)頁(yè)渲染的過(guò)程中頻繁、重復(fù)地解析CSS的情況出現(xiàn)，有效降低了瀏覽器的內(nèi)核開(kāi)銷(xiāo)，提高了瀏覽器的內(nèi)核性能。
【附圖說(shuō)明】
[0014]圖1是本發(fā)明實(shí)施例提供的網(wǎng)頁(yè)元素的繪制方法的實(shí)現(xiàn)流程圖；
[0015]圖2是本發(fā)明實(shí)施例提供的網(wǎng)頁(yè)元素的繪制方法SlOl的具體實(shí)現(xiàn)流程圖；
[0016]圖3是本發(fā)明另一實(shí)施例提供的網(wǎng)頁(yè)元素的繪制方法SlOl的具體實(shí)現(xiàn)流程圖；
[0017]圖4是本發(fā)明實(shí)施例提供的網(wǎng)頁(yè)元素的繪制方法下拉列表的顯示效果示例圖；
[0018]圖5是本發(fā)明實(shí)施例提供的網(wǎng)頁(yè)元素的繪制方法S102的具體實(shí)現(xiàn)流程圖；
[0019]圖6是本發(fā)明另一實(shí)施例提供的網(wǎng)頁(yè)元素的繪制方法下拉列表的顯示效果示例圖；
[0020]圖7是本發(fā)明另一實(shí)施例提供的網(wǎng)頁(yè)元素的繪制方法S102的具體實(shí)現(xiàn)流程圖；
[0021]圖8是本發(fā)明實(shí)施例提供的網(wǎng)頁(yè)元素的繪制裝置的結(jié)構(gòu)框圖。
【具體實(shí)施方式】
[0022]為了使本發(fā)明的目的、技術(shù)方案及優(yōu)點(diǎn)更加清楚明白，以下結(jié)合附圖及實(shí)施例，對(duì)本發(fā)明進(jìn)行進(jìn)一步詳細(xì)說(shuō)明。應(yīng)當(dāng)理解，此處所描述的具體實(shí)施例僅僅用以解釋本發(fā)明，并不用于限定本發(fā)明。
[0023]在本發(fā)明實(shí)施例中，對(duì)于未被網(wǎng)頁(yè)定義CSS的網(wǎng)頁(yè)元素，瀏覽器通過(guò)調(diào)用其內(nèi)核的渲染接口，直接為該網(wǎng)頁(yè)元素繪制與之相匹配的外觀樣式，從而避免了在網(wǎng)頁(yè)渲染的過(guò)程中頻繁、重復(fù)地解析CSS的情況出現(xiàn)，有效降低了瀏覽器的內(nèi)核開(kāi)銷(xiāo)，提高了瀏覽器的內(nèi)核性能。
[0024]在本發(fā)明實(shí)施例中，所述瀏覽器包括但不限于運(yùn)行于計(jì)算機(jī)上的瀏覽器以及運(yùn)行于移動(dòng)終端上的瀏覽器，且所述瀏覽器所采用的內(nèi)核包括但不限于IE內(nèi)核、Firefox內(nèi)核，等等，瀏覽器通過(guò)其采用的內(nèi)核來(lái)對(duì)網(wǎng)頁(yè)語(yǔ)法進(jìn)行解釋，實(shí)現(xiàn)網(wǎng)頁(yè)的渲染。
[0025]圖1示出了本發(fā)明實(shí)施例提供的網(wǎng)頁(yè)元素的繪制方法的實(shí)現(xiàn)流程，詳述如下:
[0026]在SlOl中，判斷是否需要為當(dāng)前解析的網(wǎng)頁(yè)元素增加外觀樣式。
[0027]在本實(shí)施例中，瀏覽器在獲取到網(wǎng)頁(yè)代碼之后，按照從上到下的順序依次對(duì)其中的網(wǎng)頁(yè)元素進(jìn)行解析，并根據(jù)解析結(jié)果對(duì)該網(wǎng)頁(yè)元素進(jìn)行渲染，對(duì)于瀏覽器當(dāng)前解析的網(wǎng)頁(yè)元素，瀏覽器首先判斷是否需要為該網(wǎng)頁(yè)元素增加外觀樣式，即，是否需要為該網(wǎng)頁(yè)元素進(jìn)行繪制能力擴(kuò)展，除了網(wǎng)頁(yè)本身為其定義的外觀樣式之外，為該網(wǎng)頁(yè)元素繪制額外的外觀樣式。
[0028]其中，所述網(wǎng)頁(yè)元素包括但不限于網(wǎng)頁(yè)中的文字、圖片、輸入框、按鍵、單選框、下拉列表，等等，在此不限定。
[0029]是否需要為當(dāng)前解析的網(wǎng)頁(yè)元素增加外觀樣式，可以基于以下原則來(lái)進(jìn)行判定:
[0030]作為本發(fā)明的一個(gè)實(shí)施例，如圖2所示，SlOl具體為:
[0031]在S201中，判斷所述當(dāng)前解析的網(wǎng)頁(yè)元素是否關(guān)聯(lián)了 CSS。
[0032]在S202中，若所述當(dāng)前解析的網(wǎng)頁(yè)元素未關(guān)聯(lián)CSS，則判斷出需要對(duì)所述當(dāng)前解析的網(wǎng)頁(yè)元素增加外觀樣式。
[0033]CSS，是一種用來(lái)表現(xiàn)超文本標(biāo)記語(yǔ)言或者可擴(kuò)展標(biāo)記語(yǔ)言等文件樣式的計(jì)算機(jī)語(yǔ)言，使用CSS可以擴(kuò)充精確指定網(wǎng)頁(yè)元素位置、外觀以及創(chuàng)建特殊效果的能力，例如，網(wǎng)頁(yè)鏈接文字在未點(diǎn)擊時(shí)是藍(lán)色的，當(dāng)鼠標(biāo)移上去后變成紅色的且?guī)в邢聞澗€，此類效果即可以通過(guò)CSS來(lái)實(shí)現(xiàn)。通常，在網(wǎng)頁(yè)代碼中，可以通過(guò)以下三種方法來(lái)關(guān)聯(lián)網(wǎng)頁(yè)元素的CSS:將網(wǎng)頁(yè)鏈接到外部樣式表、在網(wǎng)頁(yè)上創(chuàng)建嵌入的樣式表以及應(yīng)用內(nèi)嵌樣式到各個(gè)網(wǎng)頁(yè)元素。
[0034]在本實(shí)施例中，瀏覽器在解析網(wǎng)頁(yè)元素的過(guò)程中，若檢測(cè)到當(dāng)前的網(wǎng)頁(yè)元素未以上述任何一種方式關(guān)聯(lián)CSS，則判定該網(wǎng)頁(yè)元素為需要增加外觀樣式的網(wǎng)頁(yè)元素。
[0035]進(jìn)一步地，針對(duì)網(wǎng)頁(yè)元素雖然關(guān)聯(lián)了 CSS，但是CSS中只簡(jiǎn)單定義了該網(wǎng)頁(yè)元素的寬、高、邊界等屬性的情況，此時(shí)，為了保證該網(wǎng)頁(yè)元素與整個(gè)網(wǎng)頁(yè)或者與瀏覽器當(dāng)前顯示風(fēng)格的統(tǒng)一，可以再對(duì)該網(wǎng)頁(yè)元素額外增加外觀樣式。因此，作為本發(fā)明的另一實(shí)施例，如圖3所示，SlOl還包括:
[0036]在S203中，若所述當(dāng)前解析的網(wǎng)頁(yè)元素關(guān)聯(lián)了 CSS，則判斷所述CSS中是否定義了預(yù)設(shè)的外觀樣式。
[0037]在S204中，若判斷出所述CSS中未定義所述預(yù)設(shè)的外觀樣式，則判斷出需要對(duì)所述當(dāng)前解析的網(wǎng)頁(yè)元素增加外觀樣式。
[0038]S卩，對(duì)于關(guān)聯(lián)了 CSS的網(wǎng)頁(yè)元素，在解析該CSS的過(guò)程中，也進(jìn)一步地判定該CSS中是否定義了預(yù)設(shè)的外觀樣式。例如，當(dāng)網(wǎng)頁(yè)元素為輸入框時(shí)，預(yù)設(shè)的外觀樣式為輸入框的背景色，瀏覽器通過(guò)解析該輸入框關(guān)聯(lián)的CSS，發(fā)現(xiàn)該CSS中只定義了輸入框的寬度、高度以及邊框樣式，而未定義輸入框的背景色，此時(shí)，則也判定需要對(duì)該網(wǎng)頁(yè)元素增加外觀樣式。
[0039]在S102中，當(dāng)判斷出需要對(duì)所述當(dāng)前解析的網(wǎng)頁(yè)元素增加外觀樣式時(shí)，在本地?cái)?shù)據(jù)庫(kù)中提取出與該網(wǎng)頁(yè)元素的元素類型相匹配的外觀樣式。
[0040]在本實(shí)施例中，對(duì)于已經(jīng)關(guān)聯(lián)了 CSS，或者關(guān)聯(lián)的CSS中定義的外觀樣式足夠豐富的網(wǎng)頁(yè)元素來(lái)說(shuō)，瀏覽器則按照常規(guī)的網(wǎng)頁(yè)元素解析和渲染流程，啟用單獨(dú)的連接對(duì)該網(wǎng)頁(yè)元素關(guān)聯(lián)的CSS進(jìn)行下載，解析該網(wǎng)頁(yè)元素關(guān)聯(lián)的CSS，并根據(jù)解析出的CSS來(lái)對(duì)該網(wǎng)頁(yè)元素進(jìn)行渲染。
[0041]而對(duì)于需要由瀏覽器額外為其增加外觀樣式的網(wǎng)頁(yè)元素來(lái)說(shuō)，則首先由瀏覽器從本地?cái)?shù)據(jù)庫(kù)中提取出與該網(wǎng)頁(yè)元素的元