多核平臺(tái)嵌入式瀏覽器并行機(jī)制的研究與設(shè)計(jì)

桑 楠，趙 麗，郭文生

(電子科技大學(xué)嵌入式實(shí)時(shí)計(jì)算實(shí)驗(yàn)室 成都 611731)

近年來，隨著嵌入式設(shè)備，尤其是移動(dòng)設(shè)備的發(fā)展，嵌入式設(shè)備擁有更加強(qiáng)大的處理能力[1]。嵌入式瀏覽器技術(shù)越來越多地應(yīng)用在機(jī)頂盒、手機(jī)、家用電器中，具有巨大的應(yīng)用前景[2]。現(xiàn)有的嵌入式瀏覽器都是在單核處理器平臺(tái)上運(yùn)行，如微軟的IE瀏覽器，蘋果的safari瀏覽器，還有火狐瀏覽器等[3]。在多核處理器上運(yùn)行原來的串行瀏覽器，會(huì)出現(xiàn)多核處理器得不到充分利用、瀏覽器在性能上仍然得不到很大提高的問題。目前，Google的chrome瀏覽器已經(jīng)做了多進(jìn)程的優(yōu)化[4]，但是該瀏覽器只是在外殼上做了多進(jìn)程優(yōu)化，而內(nèi)核仍然是采用的串行瀏覽器內(nèi)核。

為了適應(yīng)越來越普遍應(yīng)用的多核處理器平臺(tái)，需要重新設(shè)計(jì)嵌入式瀏覽器架構(gòu)，充分利用多核處理器的優(yōu)勢(shì)，從而提升嵌入式瀏覽器的性能和用戶體驗(yàn)。為此，本文設(shè)計(jì)并實(shí)現(xiàn)了一個(gè)基于WebKit引擎的多核嵌入式瀏覽器，真正從內(nèi)核劃分多個(gè)線程，提高了在多核處理器上的性能。該瀏覽器具有運(yùn)行速度快，占用內(nèi)存小等優(yōu)點(diǎn)。

1 嵌入式瀏覽器概述

1.1 嵌入式瀏覽器介紹

隨著嵌入式設(shè)備和移動(dòng)互聯(lián)網(wǎng)的發(fā)展，嵌入式瀏覽器已經(jīng)成為主要的嵌入式軟件。作為用戶與網(wǎng)絡(luò)交互的首要入口，嵌入式瀏覽器出現(xiàn)了很多產(chǎn)品，如微軟伴隨其最新智能手機(jī)操作系統(tǒng)Windows Phone 7.5的IE mobile 9，Android系統(tǒng)的Android瀏覽器，iphone自帶的safari瀏覽器等。

1.2 串行嵌入式瀏覽器架構(gòu)分析

WebKit[5]是一個(gè)開源的瀏覽器引擎，源碼結(jié)構(gòu)清晰、渲染速度極快。WebKit采用分層設(shè)計(jì)，主要分為WebKit接口模塊、WebCore[6]內(nèi)核模塊和JavascriptCore[7]三大模塊，WebCore包括網(wǎng)絡(luò)加載模塊、HTML解析模塊、DOM模塊、CSS解析模塊、排版計(jì)算模塊以及渲染呈現(xiàn)模塊，負(fù)責(zé)從發(fā)起網(wǎng)頁加載到最終顯示的大部分工作；JavascriptCore[7]完成JavaScript腳本的解析和執(zhí)行。具體架構(gòu)如圖1所示。

圖1 WebKit架構(gòu)

瀏覽器從用戶輸入網(wǎng)址開始，由load模塊進(jìn)行資源下載。下載完的數(shù)據(jù)由瀏覽器解析模塊HTML/XML模塊進(jìn)行網(wǎng)頁解析，遇到css代碼由css模塊解析成對(duì)應(yīng)樣式結(jié)構(gòu)保存為render模塊使用，遇到j(luò)s代碼由jscore模塊進(jìn)行js解析并執(zhí)行，網(wǎng)頁解析完畢后生成對(duì)應(yīng)的dom樹以及包括節(jié)點(diǎn)信息和樣式信息的render樹。render樹經(jīng)過排版布局計(jì)算后生成虛擬頁面布局，然后調(diào)用圖形庫將頁面顯示出來。

2 多核概述

隨著CPU制造技術(shù)的不斷進(jìn)步，功耗問題越來越限制了單核處理器不斷提高處理器性能的發(fā)展途徑，其解決方案之一就是使用多核處理器。多核處理器，是指在一個(gè)處理器上集成兩個(gè)或兩個(gè)以上的處理引擎，即擁有多個(gè)可同時(shí)計(jì)算的核心，通過并行計(jì)算的方式降低功耗、提升性能。

由于多線程技術(shù)在多核平臺(tái)上運(yùn)行具有優(yōu)秀的可擴(kuò)充性，越來越多的應(yīng)用軟件采用了并行的設(shè)計(jì)思想。此類軟件包括多媒體應(yīng)用(內(nèi)容創(chuàng)建、編輯以及本地和數(shù)據(jù)流回放)、工程和其他技術(shù)計(jì)算應(yīng)用以及如應(yīng)用服務(wù)器和數(shù)據(jù)庫等中間層與后層服務(wù)器應(yīng)用[8]。而嵌入式瀏覽器同樣適合采用多線程的架構(gòu)，因?yàn)榍度胧綖g覽器既有與用戶交互、需要及時(shí)響應(yīng)的用戶界面(GUI)，又有后臺(tái)復(fù)雜的加載、解析、排版、布局、渲染等操作。因此，如何對(duì)嵌入式瀏覽器的模塊進(jìn)行線程化，使其在多個(gè)處理器內(nèi)核上同時(shí)運(yùn)行，即設(shè)計(jì)一個(gè)多線程的嵌入式瀏覽器并行架構(gòu)成為改進(jìn)嵌入式瀏覽器的一個(gè)重要方向。

3 嵌入式瀏覽器并行機(jī)制的架構(gòu)設(shè)計(jì)

在嵌入式瀏覽器的用戶體驗(yàn)中，用戶操作能否立即響應(yīng)是用戶體驗(yàn)的重要指標(biāo)。傳統(tǒng)瀏覽器中，用戶在輸入一個(gè)網(wǎng)址后，大部分時(shí)間被瀏覽器的后臺(tái)操作所占用。這時(shí)用戶要進(jìn)行其他操作，都必須等瀏覽器的上一個(gè)網(wǎng)址頁面顯示出來才會(huì)得到響應(yīng)。因此單獨(dú)把瀏覽器的UI作為一個(gè)主線程可以給用戶帶來良好的用戶體驗(yàn)。瀏覽器的資源下載、資源解析、排版布局、圖形繪制通過定時(shí)器的異步調(diào)用來實(shí)現(xiàn)，因此可以把這些定時(shí)器替換為多個(gè)線程，實(shí)現(xiàn)一種以多線程調(diào)用代替定時(shí)器異步調(diào)用的方式進(jìn)行線程劃分，并且根據(jù)瀏覽器的后臺(tái)操作模塊繼續(xù)劃分線程。這樣就會(huì)使瀏覽器的后臺(tái)操作速度提高，在整體上提高嵌入式瀏覽器的性能。

根據(jù)WebKit的整體模塊可知，瀏覽器的流程主要分為資源下載、dom樹生成、render樹生成、排版布局、圖形渲染繪制。由于資源解析速度比較快，為了減少線程之間的開銷，把資源下載和解析劃分為一個(gè)線程；由于生成render樹進(jìn)行css匹配的時(shí)間比較耗時(shí)，把render樹生成的過程與dom樹生成的過程獨(dú)立出來，并把render樹的生成過程劃分為一個(gè)線程模塊，同時(shí)可以繼續(xù)劃分子線程處理；排版布局模塊單獨(dú)劃分為一個(gè)線程，考慮到排版布局會(huì)涉及到很多父子節(jié)點(diǎn)的互相訪問遍歷過程，也可以在這個(gè)過程中繼續(xù)劃分子線程；最后圖形繪制模塊單獨(dú)劃分為繪圖線程。具體嵌入式瀏覽器并行架構(gòu)如圖2所示。

圖2 嵌入式瀏覽器并行機(jī)制架構(gòu)

3.1 線程劃分背景

傳統(tǒng)瀏覽器通過設(shè)置定時(shí)器異步調(diào)用各個(gè)模塊完成整個(gè)瀏覽器的執(zhí)行過程。資源下載、資源解析、排版布局、圖形繪制等都進(jìn)行了定時(shí)器的設(shè)置。如用戶輸入網(wǎng)址后會(huì)馬上進(jìn)行資源下載，此時(shí)瀏覽器啟動(dòng)資源下載定時(shí)器，WebKit生成一個(gè)定時(shí)器隊(duì)列，下載定時(shí)器在定時(shí)器隊(duì)列里進(jìn)行排隊(duì)等待，而定時(shí)時(shí)間就由系統(tǒng)進(jìn)行定時(shí)等待。當(dāng)定時(shí)時(shí)間到了，瀏覽器就發(fā)送一個(gè)觸發(fā)資源下載的定時(shí)器事件。瀏覽器的定時(shí)器事件在瀏覽器的事件隊(duì)列中進(jìn)行排隊(duì)，等隊(duì)列中除了自己的事件都執(zhí)行完成后就進(jìn)行事件觸發(fā)。

雖然在串行過程中，瀏覽器用定時(shí)器可以很好地進(jìn)行各個(gè)模塊的定時(shí)器異步調(diào)用，但是也占用了相當(dāng)一部分事件進(jìn)行定時(shí)器時(shí)間等待和定時(shí)器事件處理，以及瀏覽器事件的事件排隊(duì)。而采用多線程方式的瀏覽器恰好可以去掉這些模塊的定時(shí)器，等到該模塊需要觸發(fā)的時(shí)候，直接喚醒執(zhí)行該模塊的模塊線程，減少了定時(shí)器的時(shí)間消耗，大大提高了嵌入式瀏覽器的性能。

在模塊線程中也會(huì)遇到一些其他的定時(shí)器。如在資源下載時(shí)會(huì)遇到圖片資源下載定時(shí)器、緩存資源管理定時(shí)器等。如果多個(gè)線程仍然進(jìn)行原來的定時(shí)器處理，不僅仍然會(huì)增加定時(shí)器的等待時(shí)間，還會(huì)產(chǎn)生定時(shí)器資源的臨界管理問題。把模塊線程下面的這些定時(shí)器所執(zhí)行的事件放在模塊線程下面的事件隊(duì)列中，當(dāng)要觸發(fā)這些事件時(shí)，直接去模塊線程中增加這些事件即可，從而可以合理地去掉這些模塊線程下的定時(shí)器。

3.2 資源下載和解析

用戶輸入網(wǎng)址后，瀏覽器的下載模塊進(jìn)行資源下載，下載一段資源后馬上交給瀏覽器進(jìn)行解析生成dom樹。如果用戶所請(qǐng)求的網(wǎng)址資源比較大，下載占用的時(shí)間會(huì)變長(zhǎng)。下載的過程可以單獨(dú)劃分為一個(gè)線程執(zhí)行，又由于下載后資源會(huì)馬上解析，解析的速度很快，并且解析模塊與資源下載模塊的耦合度比較高，因此把解析模塊和下載模塊放在一個(gè)線程來處理。這樣用戶在輸入網(wǎng)址后，瀏覽器馬上交給下載線程來處理資源下載和資源解析的過程，等解析出一段dom樹后，瀏覽器又可以繼續(xù)進(jìn)行線程交互。

3.3 Render樹生成

WebKit把下載的資源解析為dom節(jié)點(diǎn)[9]時(shí)會(huì)立刻進(jìn)行css匹配生成render節(jié)點(diǎn)[10]，這個(gè)過程需要一定時(shí)間，此時(shí)，瀏覽器會(huì)根據(jù)當(dāng)前節(jié)點(diǎn)的號(hào)碼去css信息表中根據(jù)css類型進(jìn)行查找該節(jié)點(diǎn)所對(duì)應(yīng)的具體css信息進(jìn)行匹配。這樣每個(gè)節(jié)點(diǎn)必須生成render節(jié)點(diǎn)后，才會(huì)解析下一個(gè)節(jié)點(diǎn)。為了減少這一模塊的時(shí)間，把dom生成和render生成的過程分離出來，即瀏覽器生成dom節(jié)點(diǎn)后不立即生成render節(jié)點(diǎn)，而是繼續(xù)生成下一個(gè)dom節(jié)點(diǎn)。在瀏覽器布局之前，或者需要進(jìn)行render樹生成時(shí)，把dom節(jié)點(diǎn)批量生成render節(jié)點(diǎn)，因此把render樹的生成過程劃分為一個(gè)線程。

每一個(gè)dom節(jié)點(diǎn)都要生成render節(jié)點(diǎn)，通過主分線程來處理，并可以在這個(gè)模塊繼續(xù)劃分子線程。render線程負(fù)責(zé)該render樹生成模塊，進(jìn)行總體管理。第一個(gè)子線程會(huì)對(duì)第一個(gè)dom節(jié)點(diǎn)進(jìn)行render生成，第二個(gè)子線程會(huì)對(duì)第二個(gè)dom節(jié)點(diǎn)進(jìn)行render生成，當(dāng)子線程生成當(dāng)前節(jié)點(diǎn)為render節(jié)點(diǎn)后通知render線程，render線程為其分配下一個(gè)需要進(jìn)行css匹配生成的dom節(jié)點(diǎn)。

3.4 布局計(jì)算

網(wǎng)頁排版技術(shù)負(fù)責(zé)合理安排網(wǎng)頁中每個(gè)控件的顯示位置、及時(shí)動(dòng)態(tài)地響應(yīng)網(wǎng)頁內(nèi)容的變化并對(duì)網(wǎng)頁顯示控件重新布局排版，是衡量瀏覽器顯示效果及速度的一個(gè)重要指標(biāo)[11]。瀏覽器進(jìn)行布局計(jì)算過程可以劃分為一個(gè)線程來完成，并且可以繼續(xù)劃分子線程。當(dāng)父節(jié)點(diǎn)訪問子節(jié)點(diǎn)的位置信息時(shí)對(duì)子節(jié)點(diǎn)進(jìn)行遍歷，對(duì)每個(gè)子節(jié)點(diǎn)的遍歷是相互獨(dú)立的過程，因此可以劃分多個(gè)子線程；當(dāng)子節(jié)點(diǎn)排版布局時(shí)會(huì)訪問父節(jié)點(diǎn)的位置信息，同一父節(jié)點(diǎn)的子節(jié)點(diǎn)的訪問過程也是相互獨(dú)立的，也可以劃分多個(gè)子線程。

3.5 圖形繪制

當(dāng)網(wǎng)頁信息排版布局后瀏覽器調(diào)用繪圖模塊進(jìn)行繪制，從而呈現(xiàn)出整個(gè)頁面。繪圖任務(wù)可以單獨(dú)劃分為一個(gè)從線程來完成。當(dāng)瀏覽器需要繪圖時(shí)就向繪圖線程發(fā)送一個(gè)事件喚醒繪圖線程，繪圖線程檢測(cè)到線程事件隊(duì)列中的繪圖事件就發(fā)出繪圖操作。

3.6 臨界資源管理

在多線程瀏覽器設(shè)計(jì)中，會(huì)碰到很多臨界資源處理的問題。這些臨界資源主要是dom數(shù)據(jù)和render數(shù)據(jù)，還有其他的顯示框架、繪制區(qū)域、css樣式等。需要對(duì)臨界的資源進(jìn)行加鎖控制，保證其在多核線程之間的正確處理，具體如圖3所示。

Htm l線程下載解析完后會(huì)生成dom節(jié)點(diǎn)，這些dom節(jié)點(diǎn)所對(duì)應(yīng)的render節(jié)點(diǎn)可能被排版布局線程所使用進(jìn)行排版布局，或者被render線程使用進(jìn)行dom節(jié)點(diǎn)樣式匹配，或者被圖形繪制線程使用進(jìn)行網(wǎng)頁渲染及字體樣式加載[12]。此時(shí)如果因?yàn)槠渌录?dǎo)致該dom節(jié)點(diǎn)發(fā)生變化，那么當(dāng)前的這個(gè)dom節(jié)點(diǎn)會(huì)被釋放，對(duì)應(yīng)的render節(jié)點(diǎn)也會(huì)被釋放，而由新的dom節(jié)點(diǎn)或render節(jié)點(diǎn)代替，如果不對(duì)該dom數(shù)據(jù)、render數(shù)據(jù)進(jìn)行臨界資源管理，其他正在使用該render節(jié)點(diǎn)的的線程則會(huì)發(fā)生訪問失敗。

圖3 臨界資源管理架構(gòu)圖

此外，除了dom數(shù)據(jù)和render數(shù)據(jù)外還有其他臨界資源。Htm l線程進(jìn)行資源下載后會(huì)對(duì)frameview模塊[13]進(jìn)行資源更新，當(dāng)前的frameview模塊會(huì)被馬上釋放，而同時(shí)用這個(gè)frameview模塊的還有排版布局線程。圖形繪制時(shí)，必須要保證同一個(gè)時(shí)刻只有一個(gè)線程在操作圖形繪制區(qū)域，否則在把完成繪圖的圖形繪制區(qū)域清除的同時(shí)可能還會(huì)把沒有繪圖的區(qū)域也一同清除掉。

4 實(shí)驗(yàn)驗(yàn)證

4.1 具體實(shí)現(xiàn)

線程劃分方式以上述方式劃分，采用pthread函數(shù)線程庫實(shí)現(xiàn)具體線程調(diào)用，以mutex加鎖以及條件變量、事件發(fā)送實(shí)現(xiàn)數(shù)據(jù)同步。

4.2 實(shí)驗(yàn)環(huán)境

硬件環(huán)境：某公司多核數(shù)字電視機(jī)頂盒(處理器主頻500 MHz)，數(shù)字電視及相應(yīng)配件。

軟件環(huán)境：Linux 平臺(tái)，skia圖形庫，sdl事件支持和基于WebKit的全功能嵌入式瀏覽器。

4.3 功能測(cè)試

表1 瀏覽器技術(shù)支持標(biāo)準(zhǔn)

通過打開網(wǎng)頁，對(duì)嵌入式瀏覽器多線程結(jié)構(gòu)、網(wǎng)頁瀏覽等基本功能測(cè)試顯示效果如圖2所示。通過測(cè)試，嵌入式瀏覽器對(duì)相關(guān)技術(shù)標(biāo)準(zhǔn)支持的具體情況如表1所示。

4.4 性能測(cè)試

瀏覽器的數(shù)據(jù)測(cè)試采用對(duì)串行瀏覽器和多核架構(gòu)的并行瀏覽器打開10個(gè)網(wǎng)頁求平均值進(jìn)行速度測(cè)試和占用內(nèi)存測(cè)試，從而能避免網(wǎng)速等其他條件的偶然影響。

測(cè)試用戶從輸入網(wǎng)址到網(wǎng)頁內(nèi)容顯示的時(shí)間數(shù)據(jù)如表2所示，測(cè)試用戶從輸入網(wǎng)址到網(wǎng)頁顯示的內(nèi)存消耗比較如表3所示。對(duì)測(cè)試數(shù)據(jù)進(jìn)行分析可得知，與現(xiàn)有串行瀏覽器相比，多線程架構(gòu)的嵌入式瀏覽器打開網(wǎng)頁的速度提升為18%～40%，而由于多個(gè)線程的存在，對(duì)系統(tǒng)資源的占用也隨之有所增加。其中，CPU占用率的增加會(huì)由于多核平臺(tái)的逐漸普及得到解決，而內(nèi)存的消耗屬于將多線程引入瀏覽器架構(gòu)的必然負(fù)面結(jié)果，但同樣在可接受范圍內(nèi)。

表2 打開同一網(wǎng)頁的瀏覽器時(shí)間比較

表3 打開同一網(wǎng)頁的瀏覽器內(nèi)存消耗比較

5 結(jié) 論

利用本文方法，嵌入式瀏覽器在多核處理器上以一定的內(nèi)存運(yùn)行范圍內(nèi)，對(duì)網(wǎng)頁顯示有較快的速度。同時(shí)在嵌入式瀏覽器的資源加載、解析、排版布局、圖形繪制方面也有一定的理論參考價(jià)值。經(jīng)試驗(yàn)驗(yàn)證，嵌入式瀏覽器采用該并行方法支持大多數(shù)技術(shù)標(biāo)準(zhǔn)。在提高網(wǎng)頁顯示速度的同時(shí)，減小嵌入式瀏覽器的內(nèi)存，也是完善該方法進(jìn)一步要做的工作。

[1] 趙經(jīng)緯, 周余, 王自強(qiáng), 等. 基于WebKit的嵌入式瀏覽器的研究與實(shí)現(xiàn)[D]. 南京: 南京大學(xué), 2009.

ZHAO Jing-wei, ZHOU Yu, WANG Zi-qiang, et al.Research and implementation of embedded browser based on WebKit[D]. Nanjing: Nanjing University, 2009.

[2] 邢文華. 基于WAP的嵌入式瀏覽器的關(guān)鍵技術(shù)的研究[D].天津: 河北工業(yè)大學(xué), 2011.XING Wen-hua. The key technology research of embedded browser based on Wap[D]. Tianjin: Hebei University of Technology, 2011.

[3] DALI L, RUSU D, MLADENI D. Enhanced Web page content visualization w ith Firefox[D]. Austria: Jozef Stefan Institute, 2009.

[4] Google. The Chromium projects[EB/OL]. [2012-12-10].http://ww w.chromium.org.

[5] WetKit. The WebKit open source project[EB/OL].[2011-02-10]. http://www.webkit.org.

[6] 史君, 桑國明. 基于嵌入式移動(dòng)瀏覽器的QtWebkit 2.1內(nèi)核研究與開發(fā)[D]. 大連: 大連海事大學(xué), 2012.

SHI Jun, SANG Guo-ming. Research and development of QtWebkit 2.1 kernel based on embedded mobile browser.[D]. Dalian: Dalian Maritime University, 2012.

[7] 王映, 于滿泉, 李盛韜, 等. .JavaScript引擎在動(dòng)態(tài)網(wǎng)頁采集技術(shù)中的應(yīng)用[D]. 北京: 中國科學(xué)院計(jì)算技術(shù)研究所,2004.

WANG Ying, YU Man-quan, LI Sheng-tao, et al. Extracting dynamic URLs using JavaScript engine[D]. Beijing:Software Lab, Institute of Computing Technology, Chinese Academy of Science, 2004.

[8] GALENSON J, JONES C G., LO J. Towards a browser OS[D]. San Francisco: University of California Berkeley,2008.

[9] DUBEY S. AJAX performance measurement methodology for internet explorer 8 Beta 2[J]. CODE Magazine, 2008,5(3): 53-55.

[10] JONES C, LIU R, MEYEROVICH L, et al. Parallelizing the Web browser[D]. San Francisco: University of California Berkeley, 2009.

[11] 劉敏. 嵌入式瀏覽器網(wǎng)頁排版技術(shù)研究與實(shí)現(xiàn)[D]. 武漢:華中科技大學(xué), 2011.

LIU M in. A thesis subm itted in partial fulfillment of the requirements for the degree of master of engineering[D].Wuhan: Huazhong University of Science and Technology,2011.

[12] TURNER D. The design of FreeType2[EB/OL].[2012-12-10]. http://www.freetype.org.

[13] MEYEROVICH L, BODIK R. Fast and parallel Webpage layout[D]. San Francisco: University of California Berkeley, 2009.

編 輯 漆 蓉