首度曝光 – 淺談 Firefox OS 顯示流程

今天搶先和大家聊聊 Firefox OS 的畫面顯示的流程。Firefox OS 是基於 Android BSP (Board Support Package) 的系統而又有很多不同。而我們的顯示部分也跟 Android 所採用的 SurfaceFlinger 完全不同。

 

首先我們先來看看簡化很多的類別圖,以及幾個簡單的概念:

首度曝光 – 淺談 Firefox OS 顯示流程

在現行的 Gecko 引擎當中,所有的繪圖動作都會作用在稱之為 Layer 的物件上面。每個 Layer 基本上就是一張點陣圖,並包含了他應該要怎麼被顯示在螢幕上的基本資訊。要注意的是:每一個 webapp 只負責把他的每個 Layer 內容準備好,並不會把他們合併畫在一起

 

每一個 webapp 最終可能是由許多 layer 的 tree 結構所組成,像下圖這樣:

首度曝光 – 淺談 Firefox OS 顯示流程

最終由 CompositorParent 把收集來的所有 Layer 疊在一起,才形成整個畫面。

 

知道了這樣的基本想法之後,大致上我們就可以把 Firefox OS 上面的顯示流程分為幾個步驟:

  1. 排版:Gecko 引擎基於 HTML 以及 CSS 把整個網頁內容作排版。
  2. 繪製:將排版完的內容畫到各自的 Layer 裡面。
  3. 合成:把所有的 Layer 疊加在一起顯示到畫面上。

有了這些概念,我們就可以回頭看第一張圖表:

  • PLayers 是一個用來輔助 IPC 的 class,這類的 class 會有兩個子代,分別代表 Parent 以及 Child。相關的細節不在這篇討論,有興趣的觀眾可以看這裡
  • BasicLayerManager 是用來管理 webapp 這邊的 Layer,以及繪製所有的 Layer 的管理員。
  • ShadowLayerForwarder 則是擔任把 Layer 的樹狀結構遞送到 Compositor 端,以準備合成的重要任務。
  • CompositorParent 則利用 LayerManagerOGL 把所有收集到的 Layer 合成出來。

到這邊 Firefox OS 畫面的繪製與合成工作就完成了。接下來把畫面顯示到螢幕上的流程就跟 Android 大同小異囉。

掌握最新 Firefox, Firefox OS 相關訊息

加入 Mozilla Taiwan 臉書粉絲團 

加入 Mozilla Taiwan  G+ 

瀏覽 Mozilla Taiwan 部落格 

官網 mozilla.com.tw