素相匹配的外觀樣式。
[0042]在瀏覽器的本地數(shù)據(jù)庫中,預(yù)先根據(jù)每一類網(wǎng)頁元素的特點,配置了相應(yīng)的外觀樣式。其中,配置的外觀樣式包括但不限于以下內(nèi)容:
[0043]背景色:包括漸變顏色及漸變屬性(例如,顏色的漸變方向);
[0044]邊界:包括邊界的寬度及顏色,還包括按鍵等網(wǎng)頁元素在按下及彈起時上、下邊界的陰影設(shè)置;
[0045]元素內(nèi)容的顯示顏色:用于文本或者按鍵等網(wǎng)頁元素在處于點擊態(tài)和非點擊態(tài)時的顏色區(qū)分;
[0046]蒙層及邊框:包括網(wǎng)頁元素在常態(tài)、點擊態(tài)、焦點態(tài)時的蒙層及邊框。
[0047]例如,對于下拉列表來說,與其匹配的外觀樣式可以包括:
[0048]下拉列表中的字體及顏色、下拉列表的寬度和高度、下拉列表中的項目在處于焦點態(tài)(如圖4中的項目“vip.qq.com”)及非焦點態(tài)(如圖4中的項目“qq.com”和“foxmail.com”)時的背景色,等等。最終,根據(jù)與下拉列表匹配的外觀樣式所繪制出的下拉列表可以如圖4所示。
[0049]在配置與網(wǎng)頁元素相對應(yīng)的外觀樣式時,可以考慮匹配的外觀樣式與目前主流的網(wǎng)頁風(fēng)格的一致性,以保證在大多數(shù)情況下,瀏覽器為網(wǎng)頁元素增加的外觀樣式能夠與網(wǎng)頁的整體風(fēng)格相統(tǒng)一。同時,由于目前的瀏覽器大多配置有日間瀏覽模式和夜間瀏覽模式,以方便用戶分別在光線較強的條件下和光線昏暗的條件下達(dá)到更好的瀏覽體驗,作為本發(fā)明的一個實施例,在預(yù)先配置與網(wǎng)頁元素相對應(yīng)的外觀樣式時,也需要考慮到網(wǎng)頁元素與瀏覽器不同瀏覽模式之間的風(fēng)格統(tǒng)一,分別為每種類型的網(wǎng)頁元素同時配置適用于日間瀏覽模式下的外觀樣式和適用于夜間瀏覽模式下的外觀樣式,則如圖5所示,S102具體為:
[0050]在S501中,檢測所述瀏覽器當(dāng)前的瀏覽模式,所述瀏覽模式包括日間瀏覽模式或者夜間瀏覽模式。
[0051]在S502中,在所述本地數(shù)據(jù)庫中提取出同時與該網(wǎng)頁元素的元素類型和所述瀏覽器當(dāng)前的瀏覽模式相匹配的外觀樣式。
[0052]在本實施例中,通過檢測瀏覽器當(dāng)前的瀏覽模式,從本地數(shù)據(jù)庫中提取出同時與當(dāng)前解析的網(wǎng)頁元素的元素類型以及瀏覽器當(dāng)前的瀏覽模式相匹配的外觀樣式,用以進(jìn)行網(wǎng)頁元素的繪制。
[0053]作為本發(fā)明的一個實現(xiàn)示例,圖4示出了當(dāng)瀏覽器處于日間瀏覽模式時,最終根據(jù)匹配得到的外觀樣式所繪制出的下拉列表的示意圖,圖6示出了當(dāng)瀏覽器處于夜間瀏覽模式時,最終根據(jù)匹配得到的外觀樣式所繪制出的下拉列表的示意圖。從圖4和圖6可以看出,當(dāng)瀏覽器處于日間瀏覽模式時,整個下拉列表的背景色都采用亮色系處理,以便于用戶在強烈的光線下也能夠輕松地獲取到信息;當(dāng)瀏覽器處于夜間瀏覽模式時,整個下拉列表的背景色都采用暗色系處理,以避免在昏暗光線下終端發(fā)出過于強烈的光線,導(dǎo)致用戶在瀏覽過程中產(chǎn)生眼部不適。
[0054]在本實施例中,通過預(yù)先配置同一網(wǎng)頁元素在瀏覽器的日間瀏覽模式和夜間瀏覽模式下的外觀樣式,一旦瀏覽器中進(jìn)行了瀏覽模式切換,則瀏覽器可以直接根據(jù)相關(guān)的外觀樣式來對網(wǎng)頁元素進(jìn)行渲染,避免了需要下載與瀏覽器瀏覽模式相匹配的CSS并重新進(jìn)行CSS解析的情況,同時也避免了因為不存在與瀏覽器瀏覽模式相匹配的CSS而導(dǎo)致的網(wǎng)頁元素顯示風(fēng)格與瀏覽器顯示風(fēng)格不相符的情況出現(xiàn)。
[0055]同時,由于許多類型的網(wǎng)頁元素都會根據(jù)發(fā)生在該網(wǎng)頁元素上的用戶事件的不同而產(chǎn)生不同的顯示效果,因此,在匹配外觀樣式時,還需要考慮到網(wǎng)頁元素當(dāng)前所處的狀態(tài)。作為本發(fā)明的另一實施例,如圖7所示,S102具體為:
[0056]在S701中,根據(jù)發(fā)生在所述網(wǎng)頁元素上的用戶事件,確定所述網(wǎng)頁元素當(dāng)前所處的狀態(tài),所述網(wǎng)頁元素當(dāng)前所處的狀態(tài)包括以下任意一項:常態(tài)、點擊態(tài)或者焦點態(tài)。
[0057]通常,當(dāng)瀏覽器獲取到網(wǎng)頁代碼,對網(wǎng)頁元素進(jìn)行解析和渲染之后,網(wǎng)頁元素通常都是以常態(tài)來進(jìn)行顯示的,例如對于輸入框來說,其常態(tài)為光標(biāo)不位于輸入框的非輸入狀態(tài);對于按鍵來說,其常態(tài)為按鍵未被按下的非點擊態(tài);對于單選框或者復(fù)選框來說,其常態(tài)為未選定其中任何一項的非焦點態(tài)。在網(wǎng)頁全部加載顯示完畢之后,網(wǎng)頁元素上可能會產(chǎn)生相應(yīng)的用戶事件,例如,用戶開始在輸入框中輸入文字,按下按鍵,在復(fù)選框中選定選項,等等,此時,相關(guān)的網(wǎng)頁元素的外觀樣式會產(chǎn)生相應(yīng)的變化,以區(qū)別與其常態(tài)的顯示效果,便于用戶確認(rèn)用戶事件是否操作成功,因此,在本實施例中,首先需要根據(jù)發(fā)生在網(wǎng)頁元素上的用戶事件來確定該網(wǎng)頁元素當(dāng)前所處的狀態(tài),當(dāng)在網(wǎng)頁元素上檢測到用戶事件時,要對該網(wǎng)頁元素進(jìn)行刷新處理,重新渲染與網(wǎng)頁元素當(dāng)前所處的狀態(tài)相匹配的外觀樣式,而當(dāng)未在網(wǎng)頁元素上檢測到用戶事件時,網(wǎng)頁元素當(dāng)前所處的狀態(tài)通常按照常態(tài)來處理。
[0058]在S702中,在所述本地數(shù)據(jù)庫中提取出同時與該網(wǎng)頁元素的元素類型和該網(wǎng)頁元素當(dāng)前所處的狀態(tài)相匹配的外觀樣式。
[0059]在確定了網(wǎng)頁元素當(dāng)前所處的狀態(tài)之后,從本地數(shù)據(jù)庫中提取出同時與當(dāng)前解析的網(wǎng)頁元素的元素類型以及該網(wǎng)頁元素當(dāng)前所處的狀態(tài)相匹配的外觀樣式,用以進(jìn)行網(wǎng)頁元素的繪制。
[0060]在S103中,通過瀏覽器內(nèi)核的渲染接口為所述當(dāng)前解析的網(wǎng)頁元素繪制提取出的所述外觀樣式。
[0061]在本實施例中,一旦提取出了與當(dāng)前解析的網(wǎng)頁元素相匹配的元素類型之后,SP可以直接調(diào)用瀏覽器內(nèi)核的渲染接口,來對當(dāng)前解析的網(wǎng)頁元素進(jìn)行渲染,以繪制出相應(yīng)外觀樣式的網(wǎng)頁元素。
[0062]所述渲染接口為瀏覽器內(nèi)核中自帶的渲染接口,例如drawLine,用于為網(wǎng)頁元素繪制線條;setShader,用于設(shè)置網(wǎng)頁元素的陰影、漸變等效果;drawRect,用于繪制矩形;drawCircle,用于繪制圓,等等,在此不一一舉例說明。
[0063]需要說明的是,在本發(fā)明實施例中,匹配的外觀樣式并非以CSS格式存儲在本地數(shù)據(jù)庫中,而是直接存儲為瀏覽器內(nèi)核的渲染接口所能夠讀取的格式,其中,定義了用于繪制網(wǎng)頁元素的相關(guān)繪制參數(shù),使得瀏覽器內(nèi)核中相關(guān)的渲染接口能夠直接根據(jù)外觀樣式中提供的繪制參數(shù)來對網(wǎng)頁元素進(jìn)行繪制,省略了通常網(wǎng)頁解析渲染流程中需要進(jìn)行CSS解析之后才能進(jìn)行渲染的操作步驟,減少了 CSS解析為瀏覽器內(nèi)核帶來的資源占用。
[0064]作為本發(fā)明的一個實施例,所述方法還包括:
[0065]修改所述外觀樣式中的繪制參數(shù),以更改與所述外觀樣式相匹配的所述網(wǎng)頁元素的顯示效果。
[0066]在本實施例中,只需要修改外觀樣式中的繪制參數(shù),渲染接口在繪制網(wǎng)頁元素時,即能夠根據(jù)修改后的繪制參數(shù)來完成繪制過程,由此,便捷地實現(xiàn)了對同一類型的網(wǎng)頁元素的顯示效果的批量修改。上述方法可以保證瀏覽器為網(wǎng)頁元素增加的外觀樣式能夠時刻與主流網(wǎng)頁風(fēng)格相一致,同時,在瀏覽器外觀升級或者瀏覽器的瀏覽模式升級的情況下,也可以及時、簡單地對網(wǎng)頁元素的外觀樣式進(jìn)行修改,以保持瀏覽器顯示界面的整體一致性。
[0067]在本發(fā)明實施例中,對于未被網(wǎng)頁定義CSS的網(wǎng)頁元素,瀏覽器通過調(diào)用其內(nèi)核的渲染接口,直接為該網(wǎng)頁元素繪制與之相匹配的外觀樣式,從而避免了在網(wǎng)頁渲染的過程中頻繁、重復(fù)地解析CSS的情況出現(xiàn),有效降低了瀏覽器的內(nèi)核開銷,提高了瀏覽器的內(nèi)核性能。與此同時,通過瀏覽器來增加網(wǎng)頁元素的外觀樣式,能夠保證瀏覽器所渲染出的網(wǎng)頁風(fēng)格統(tǒng)一,并保證渲染出的網(wǎng)頁與瀏覽器自身外觀界面的統(tǒng)一。
[0068]圖8示出了本發(fā)明實施例提供的網(wǎng)頁元素的繪制裝置的結(jié)構(gòu)框圖,該裝置可以位于運行在移動終端、計算機(jī)等終端設(shè)備上的瀏覽器內(nèi)部,用于運行本發(fā)明圖1至圖7實施例所述的網(wǎng)頁元素的繪制方法。為了便于說明,僅示出了與本實施例相關(guān)的部分。