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

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

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