基于WebKit內核的焦點查詢策略研究與優化

肖偉民　孫　鵬　郭志川　胡琳琳

1(中國科學院聲學研究所國家網絡新媒體工程技術研究中心　北京 100190)2(中國科學院大學　北京 100190)

?

基于WebKit內核的焦點查詢策略研究與優化

肖偉民1孫鵬2郭志川2胡琳琳2

1(中國科學院聲學研究所國家網絡新媒體工程技術研究中心北京 100190)2(中國科學院大學北京 100190)

為解決智能電視平臺上帶內聯框架的網頁存在焦點查詢不友好的問題，對基于WebKit內核的嵌入式瀏覽器焦點查詢策略進行研究，詳細說明該策略對焦點查詢的執行過程，并針對帶內聯框架的網頁存在的焦點查詢不友好問題進行查詢算法的優化。在智能電視平臺上根據操控特征進行針對性優化，修正了焦點查詢錯誤，大大提升了用戶體驗。實驗結果表明，使用優化后的焦點查詢策略在智能電視上可有效解決基于WebKit內核的嵌入式瀏覽器焦點查詢錯誤問題。

WebKit內核內聯框架文檔對象模型樹焦點查詢優化

0　引　言

隨著互聯網技術的飛速發展，智能電視[1,2]和智能電視機頂盒[3]相關技術和服務也有著日新月異的變化，越來越多的用戶使用智能電視瀏覽網頁，觀看視頻及進行娛樂活動。在Web技術的發展演進和應用日益廣泛背景下，智能電視平臺的Web技術針對性優化也十分重要，對智能電視平臺的交互不友好問題進行研究具有重要的實際應用意義。智能電視瀏覽器很多都是基于嵌入式瀏覽器平臺的，由于智能電視操控方式的不同，這就對嵌入式瀏覽器的交互操作提出了更高的要求。但是目前在智能電視瀏覽器的操控過程中仍存在焦點查詢出錯的問題。由于智能電視使用遙控器操控網頁焦點的移動，與使用鼠標和觸控方式不同，當網頁中嵌入透明的、覆蓋式的iframe頁面時，根據焦點查詢算法，此時移動焦點會定位到被覆蓋的焦點，而非用戶所希望移動的目標節點。對于這種用戶交互不友好的焦點查詢問題，本文基于WebKit[4-6]內核的焦點查詢算法和查詢策略進行了針對性改進。

WebKit是一個開源的瀏覽器引擎，其具有清晰的源碼結構和極快的渲染速度，高效穩定且兼容性好，是當前許多主流瀏覽器諸如Chrome、Safari等使用的引擎，多數的嵌入式設備也使用該框架作為瀏覽器引擎。不足的是WebKit的設計是基于使用鼠標操控的PC端和使用觸控方式操作的移動終端，目前在針對遙控器操控的智能電視終端還未進行設計和優化。

目前在大多數PC設備上，用戶普遍使用鼠標、觸控板、軌跡球進行頁面的操作；在手機和平板電腦上則基本使用滑動、點擊等方式進行頁面操作；而智能電視普遍使用遙控器進行操控，當頁面中嵌入透明的、覆蓋了頁面焦點的iframe[7]頁面時，使用遙控器按鍵進行導航操作會定位到被覆蓋的焦點，焦點無法正常移動和定位。

針對上述問題，本文首先對WebKit內核中焦點顯示的關鍵對象，包括文檔對象模型樹(DOM樹[8,9])和渲染樹(Render樹[10])進行了介紹；對WebKit內核中的焦點查詢策略進行詳細闡述；針對iframe頁面焦點查詢錯誤的問題，基于WebKit內核的焦點查詢算法提出了一種改進的焦點查詢策略；在Linux系統上對大量頁面進行驗證，實驗結果表明，該優化算法可以解決智能電視帶iframe頁面焦點查詢錯誤的問題，并且與用戶操作習慣相符，增強了用戶體驗。

1　頁面焦點

嵌入式瀏覽器在頁面渲染的過程中，首先需要根據頁面內容構建DOM樹和Render樹，而焦點查詢則需要通過DOM節點的遍歷和相關算法運算，以及焦點之間的位置關系等。以下對頁面焦點相關概念進行闡述。

1.1DOM樹和Render樹

DOM樹是對HTML或XML等文檔的一種結構化表示方法，瀏覽器通過解析器將網頁元素解析為一顆DOM樹。網頁上呈現的元素，如文字、圖片等，在獲得焦點時會有聚焦效果(顯示矩形邊框、陰影效果等)，此區域即為焦點選中區域。

基于DOM樹的一些可視節點，WebKit會構建相應的渲染對象節點，這些節點也構成了一顆樹，稱之為Render樹。為了直觀了解DOM樹和Render樹，圖1以一段網頁代碼說明它們的對應關系。

圖1網頁代碼示例

如圖1所示網頁代碼，經網頁解析器解析后構建DOM樹，解析的規則是按照頁面元素嵌套關系構建相應層次嵌套關系的DOM樹。解析器為頁面中的每個標簽構造一個對應類型的數據結構，即DOM節點，將這些DOM節點按照頁面層次結構組織，形成一顆DOM樹。圖2顯示根據網頁代碼構建層次嵌套關系，圖3顯示相應的DOM樹。

圖2　HTML頁面層次嵌套關系

圖3　根據HTML頁面構建的DOM樹

Render樹是基于DOM樹建立起來的一顆渲染樹，是布局和渲染等機制的基礎，圖4以圖1代碼為例說明Render樹與DOM樹的關系。

圖4　Render樹與DOM樹的關系

頁面解析所得的節點信息存儲于DOM樹中，而Render樹存儲布局計算所得數據、樣式信息和呈現繪制[11,12]。當用戶操控頁面時，焦點查詢的過程就是對每一個DOM節點進行計算并得到最優解的過程，而聚焦區域及區域的繪制則是由渲染節點來決定的。

1.2焦點查詢的相關節點

焦點查詢的過程就是基于當前節點，根據焦點查詢算法，由可選節點中查找最優解以獲取目標節點的過程，以下對相關概念進行介紹。

當前節點：在網頁中當前聚焦的節點；

目標節點：操控網頁時用戶希望獲得聚焦的節點；

可選節點：在DOM樹中可聚焦的節點。

2　WebKit內核焦點查詢策略及存在問題

用戶在瀏覽網頁且進行操作時，瀏覽器會根據用戶行為觸發相應的事件處理程序。若用戶采用鼠標點擊的方式與網頁進行交互，則觸發瀏覽器鼠標事件處理程序，判斷按鍵類型及點擊坐標，并完成該事件的處理；類似地，若用戶使用遙控器或鍵盤等方式，則觸發瀏覽器相應的按鍵事件處理程序，判斷按鍵鍵值和聚焦節點，并完成事件處理。

在WebKit內核中，當瀏覽器的圖形界面窗口解析到用戶的遙控器方向按鍵事件，會調用WebKit內核的焦點處理策略來查詢合適的目標節點，聚焦到新節點以完成用戶移動焦點的目的。本文通過對WebKit源碼的分析和流程跟蹤實驗，并結合具體網頁案例進行實驗，得到WebKit內核焦點查詢策略，且根據實驗現象提出原有焦點查詢策略的不足。

2.1焦點查詢策略

當瀏覽器執行焦點查詢算法時，首先需要獲取當前焦點所對應的DOM節點，然后根據遙控器按鍵操作的方向查找最優DOM節點作為目標節點。

WebKit中的焦點查詢策略如圖5所示。

圖5　WebKit中焦點查詢策略

(1) 獲取當前節點及節點所對應的Document和Frame，存儲于特定數據結構中。

(2) 獲取當前節點所對應的DOM樹，采用由下而上的方法查找DOM樹，到達DOM樹根節點。

(3) 從DOM樹根節點開始查找，逐個遍歷，當節點滿足可選節點條件時，判斷可選節點與當前節點的位置關系，若與遙控器按鍵方向不符則放棄，若滿足則計算可選節點與當前節點的距離。

(4) 繼續遍歷DOM樹，根據相同查詢算法對DOM樹中其他可選節點進行查詢，若存在其他滿足條件的節點，則與已保存的最優目標節點進行比較，將兩者之中最優的節點保存下來。

(5) 當DOM樹遍歷完畢，且最優目標節點存在，則將該節點設置為聚焦的目標節點，若不存在最優目標節點，則不移動焦點。

2.2存在問題

上述焦點查詢策略可解決大多數焦點查找問題，但是在網頁中帶有透明的、覆蓋式的iframe內嵌網頁的情況下，該查詢策略存在焦點查詢錯誤的問題。以下用一個例子來說明該問題。

圖6及圖7顯示了一個iframe內嵌網頁示例，當用戶點擊頁面鏈接，則調用JavaScript開啟一個半透明的iframe內嵌網頁，用戶可在開啟的iframe內嵌網頁中做一些選項的設置。

圖6　iframe內嵌網頁示例(a)

圖7　iframe內嵌網頁示例(b)

如圖6、圖7所示，若在PC端或者觸控方式的平板電腦和手機端，由于用戶采用鼠標點擊，手指觸控的方式進行交互，此時不會出現如圖8所示的焦點查詢出錯情況。但是在智能電視平臺上，用戶使用遙控器進行焦點移動的操作，此時根據焦點查詢算法，會出現如圖8所示的焦點查詢錯誤問題。具體表現為：用戶按遙控器向下鍵時，需要在同一個frame中移動焦點，正確的結果如圖9所示，但是根據焦點查詢算法，最終返回的最優目標節點為另一個frame中的焦點，查詢出錯的結果如圖8。

圖8　iframe內嵌網頁焦點查詢出錯示例

圖9　iframe內嵌網頁焦點查詢正確示例

由于WebKit內核焦點查詢策略將所有可選節點均列入節點距離運算范圍，在網頁中帶有透明的、覆蓋式的iframe內嵌網頁的情況下，被iframe內嵌網頁覆蓋的節點也參與節點距離運算。當被iframe內嵌網頁覆蓋的節點滿足距離最優的條件即可被標記為目標節點，因此出現焦點查詢出錯的情況。

3　WebKit內核焦點查詢策略優化

對于上一節提到的在智能電視平臺出現焦點查詢出錯的情況，針對性提出WebKit內核焦點查詢優化策略，解決了使用遙控器操作時所得焦點非正確目標焦點的問題。經過策略優化后的焦點查詢方法，在編譯調試并在智能電視上進行安裝測試，達到了理想的結果。

3.1查詢策略優化

當用戶點擊頁面鏈接彈出iframe內嵌網頁，且該網頁具有一定透明度時，查詢焦點過程中，該網頁下方被覆蓋的節點也會被納入算法計算范圍。在本文焦點查詢策略的優化方法中，通過判斷可選節點與當前節點所在frame的位置關系，以及目標節點所在frame與當前節點所在frame的關系來決定是否將可選節點納入計算范圍。該優化策略具體如下：

(1) 判斷可選節點是否與當前節點在同一個frame中，若是，則進行計算；

(2) 若可選節點與當前節點不在同一個frame中，則判斷可選節點與當前節點的位置關系，若可選節點與當前節點所在frame存在覆蓋的關系，則忽略該節點，不進行計算；

(3) 對滿足以上條件的可選節點進行距離算法的計算并比較，得出最優節點作為目標節點。

以下通過一個示例來說明。如圖10所示，frame1中有三個節點1、2、3，frame2中有兩個節點4、5，其中節點1被frame2所覆蓋且frame2具有一定透明度。如圖11所示，可選節點的x軸方向坐標分別表示為Node_x_left/Node_x_right，y軸方向坐標分別表示為Node_y_up/Node_y_down，相對應的，frame的x軸方向坐標分別表示為Frame_x_left/Frame_x_right，y軸方向坐標分別表示為Frame_y_up/Frame_y_down。

圖11　節點坐標示意圖

當檢測到遙控器按鍵事件且判定鍵值為方向按鍵時，做以下處理：

(1) 逐個遍歷所有的可選節點；

(2) 判斷可選節點是否與當前節點在同一個frame上，若滿足條件，則進行計算，得到當前最優目標節點；

(3) 若不滿足以上可選節點與當前節點在同一個frame上的條件，則根據遙控器鍵值進行下一步判斷；

(4) 若用戶按下向左方向鍵，則判斷Node_x_rightFrame_y_up且Node_y_down

(5) 若用戶按下向右方向鍵，則判斷Node_x_left>Frame_x_right且Node_y_up>Frame_y_up且Node_y_down

(6) 若用戶按下向上方向鍵，則判斷Node_x_downFrame_y_left且Node_y_right

(7) 若用戶按下向下方向鍵，則判斷Node_x_up>Frame_x_down且Node_y_left>Frame_y_left且Node_y_right

(8) 不滿足根據方向鍵判定條件的可選節點不計入計算范圍，對可計算的節點進行距離算法的計算，并比較得到最優節點，作為目標節點。節點距離計算方法如下：

(1)

其中，x為節點x軸方向的距離，y為節點y軸方向的距離。

3.2查詢策略的進一步優化

通過以上優化的焦點查詢策略，能夠解決焦點被frame覆蓋的情況下查詢出錯的問題，但是在特定的情況下，如frame覆蓋整個窗口(如圖6、圖7所示)，且頁面為可滾動的情況，則會出現將焦點定位到頁面外節點的問題。

針對以上問題，在焦點查詢策略中進行了進一步的優化，增加優化的查詢策略：

若frame覆蓋整個屏幕且頁面可滾動的情況，可選節點處于滾動頁面屏幕外的位置(如圖12所示)，則不對該可選節點進行距離計算。

圖12　可選節點處于屏幕外示意圖

3.3測試結果

本文測試的系統環境是Linux12.04操作系統，使用基于WebKit內核開發的瀏覽器，通過對WebKit內核相關查詢策略及算法的優化，并編譯執行庫文件。通過5組人員，分別在50個頁面上進行3次重復測試，驗證了該優化的查詢策略能夠很好地解決智能電視上遙控器移動焦點時查詢出錯的問題，改善了用戶體驗，測試數據統計及測試結果示意如表1、表2所示。

表1　iframe透明、覆蓋的情況測試統計

表2　iframe非透明、無覆蓋的情況測試統計

測試結果表明，通過表1的統計數據，優化的WebKit焦點查詢策略能夠解決當iframe帶有透明度且覆蓋焦點的情況下，焦點查詢錯誤的問題。采用初始WebKit焦點查詢策略時，當最優目標節點仍為當前iframe上的可選節點時，焦點查詢結果為正確，因此采用初始WebKit焦點查詢策略對最優目標節點仍處于當前iframe的頁面是有效的。通過表2的統計數據，優化的WebKit焦點查詢策略對iframe非透明、無覆蓋的情況下，頁面焦點查詢結果不會有影響。

測試結果示意圖：按下遙控器方向鍵后，根據不同方向的按鍵焦點查詢結果如圖13-圖16所示。

圖13　按下向左方向鍵測試示例

圖14　按下向右方向鍵測試示例

圖15　按下向上方向鍵測試示例

圖16　按下向下方向鍵測試示例

當彈出iframe覆蓋當前整個窗口大小時，按下遙控器按鍵只在當前iframe范圍內查找焦點。

4　結　語

本文對頁面焦點構建和查詢有關的DOM樹、Render樹、焦點查詢的節點等進行了介紹，研究了WebKit內核的焦點查詢策略，并對其存在的問題進行了闡述。針對智能電視平臺使用遙控器進行焦點查詢時存在的問題，提出了一種改進的焦點查詢策略，優化了焦點查詢的方法，并進行了驗證。實驗結果表明，該優化的焦點查詢策略能夠解決智能電視上使用遙控器進行焦點查詢出錯的問題，并在大量測試網頁進行了驗證，改善了用戶體驗。

[1]ShinD,ChooYHH.SmartTV:Aretheyreallysmartininteractingwithpeople?UnderstandingtheinteractivityofKoreansmartTV[J].Behaviour&InformationTechnology,2013,32(2):156-172.

[2]LeeS,SohnM,KimD,etal.SmartTVinteractionsystemusingfaceandhandgesturerecognition[C]//IEEEInternationalConferenceonConsumerElectronics.IEEE,2013:173-174.

[3] 孫卓,高毅,李新國,等.基于智能電視機頂盒的下一代數字家庭網關設計[J].有線電視技術,2013,20(6):102-104.

[4]TeixeiraJ.UnderstandingCoopetitionintheOpen-SourceArena:TheCasesofWebKitandOpenStack[C]//ProceedingsofTheInternationalSymposiumonOpenCollaboration.ACM,2014:39.

[5]HongcanY,XiaobinL,XiaoliangZ,etal.ThedesignandrealizationoftheLinuxbrowserbasedonWebkit[C]//InternationalConferenceonTest&Measurement.IEEE,2009:188-191.

[6] 倪建新.基于WebKit的嵌入式瀏覽器關鍵技術研究與實現[J].智能計算機與應用,2011,1(4):47-48.

[7] 姚瓊,孫鵬,胡琳琳,等.一種基于iframe的嵌入式瀏覽器動態數據處理策略與實現[J].網絡新媒體技術,2008,29(9):17-21.

[8]XiaoyunC.ExtractInformationofChinesecharactersfromWebPagesBasedonDOMTree[J].MicrocomputerInformation,2010,26(36):15-17.

[9]Wu-guanH,MingZ,WenkeY,etal.WebInformationAutomaticExtractionBasedonDOMTreeandVisualFeature[J].ComputerEngineering,2013,39(10):309-312.

[10] 冷冰.基于Render樹緩存的移動終端網頁加速技術的研究與實現[D].國防科學技術大學,2011.

[11]SrivastavaS,HaroonM,BajajA.Webdocumentinformationextractionusingclassattributeapproach[C]//InternationalConferenceonComputer&CommunicationTechnology.IEEE,2013:17-22.

[12]ZhangL,LiM,DongN,etal.AnImprovedDOM-basedAlgorithmforWebInformationExtraction[J].JournalofInformation&ComputationalScience,2011,8(7):1113-1121.

ONWEBKITKERNEL-BASEDFOCUSQUERYSTRATEGYANDITSOPTIMISATION

XiaoWeimin1SunPeng2GuoZhichuang2HuLinlin2

1(NationalNetworkNewMediaEngineeringResearchCenter,InstituteofAcoustics,ChineseAcademyofSciences,Beijing100190,China)2(UniversityofChineseAcademyofSciences,Beijing100190,China)

TosolvetheproblemofunfriendlyfocusqueryinwebpagewithiframeonsmartTV,westudiedtheWebKitkernel-basedfocusquerystrategyofembeddedbrowser,expatiatedonthestrategyexecutionprocessonfocusquery,andoptimisedthequeryalgorithmtargetedatunfriendlyfocusqueryprobleminwebpagewithiframe.OnsmartTVplatformwemadethetargetedoptimisationaccordingtomanipulationfeatures,fixedtheerrorsoffocusqueryandgreatlyenhanceduserexperience.ExperimentalresultsshowedthattheuseofoptimisedfocusquerystrategycaneffectivelysolvefocusqueryerrorproblemofWebKitkernel-basedembeddedbrowseronsmartTV.

WebKitkerneliframeDOMtreeFocusqueryOptimisation

2015-05-28。國家高技術研究發展計劃項目(2015AA015802)。肖偉民，碩士生，主研領域：新媒體技術。孫鵬，研究員。郭志川，副研究員。胡琳琳，副研究員。

TP

ADOI:10.3969/j.issn.1000-386x.2016.10.017