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

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

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