path: root/files/zh-tw/mozilla/introduction_to_layout_in_mozilla/index.html

---
title: Introduction to Layout in Mozilla
slug: Mozilla/Introduction_to_Layout_in_Mozilla
translation_of: Mozilla/Introduction_to_Layout_in_Mozilla
---
<h2 id="Overview" name="Overview"><font><font>概要</font></font></h2>

<ul>
 <li><font><font>基本數據流</font></font></li>
 <li><font><font>關鍵數據結構</font></font></li>
 <li><font><font>詳細執行步驟</font></font></li>
 <li><font><font>漸進模式</font></font></li>
 <li><font><font>未來高科技會談</font></font></li>
 <li><font><font>總結起來，Q＆A</font></font></li>
</ul>

<h2 id="Basic_Data_Flow" name="Basic_Data_Flow"><font><font>基本數據流</font></font></h2>

<ul>
 <li><font><font>通過網絡APIs 獲取源文檔</font></font></li>
 <li><font><font>在單線程佈局引擎中依次執行下面步驟：</font></font>
  <ul>
   <li><font><font>解析，計算樣式，渲染，重複</font></font></li>
   <li><font><font>CSS 用於渲染所有的內容</font></font></li>
  </ul>
 </li>
 <li><font><font>理論上， 內容與“展示“是相分離的</font></font></li>
</ul>

<p><img src="/files/464/Gecko_Overview_9.png" style="height: 316px; width: 688px;"></p>

<h2 id="Key_Data_Structures" name="Key_Data_Structures"><font><font>關鍵數據結構</font></font></h2>

<p><img src="/files/454/Gecko_Overview_10.png" style="height: 122px; width: 638px;"></p>

<ul>
 <li><font><font>內容節點</font></font>

  <ul>
   <li><font><font>元素，屬性</font></font></li>
   <li><font><font>判決</font></font></li>
  </ul>
 </li>
 <li><font><font>框架（Frame）</font></font>
  <ul>
   <li><font><font>矩形格式</font></font></li>
   <li><font><font>幾何信息</font></font></li>
   <li><font><font>{{mediawiki.external('0..n')}} 每個內容節點</font></font></li>
   <li><font><font>第二通第n個是“延續”</font></font></li>
  </ul>
 </li>
 <li><font><font>樣式上下文Style context</font></font>
  <ul>
   <li><font><font>非幾何信息</font></font></li>
   <li><font><font>可由相鄰幀共享</font></font></li>
   <li><font><font>引用計數，一幀資</font></font></li>
  </ul>
 </li>
 <li><font><font>視圖（View）</font></font>
  <ul>
   <li><font><font>裁剪、z 軸順序、透明度</font></font></li>
   <li><font><font>{{mediawiki.external('0..1')}} 僅與一個框架 frame 對應, 從屬於框架</font></font></li>
  </ul>
 </li>
 <li><font><font>小工具（</font></font>Widget<font><font>）</font></font>
  <ul>
   <li><font><font>本地窗口</font></font></li>
   <li><font><font>{{mediawiki.external('0..1')}} 僅與一個視圖對應，從屬於視圖 view</font></font></li>
  </ul>
 </li>
</ul>

<p><img src="/files/455/Gecko_Overview_15.png" style="height: 397px; width: 680px;"></p>

<h2 id="Key_Data_Structures_2" name="Key_Data_Structures_2"><font><font>關鍵數據結構</font></font></h2>

<ul>
 <li><em><font><font>document</font></font></em><font><font> 物件中包含內容模型，以及一個或多個 </font></font><em><font><font>presentations</font></font></em>

  <ul>
   <li><font><font>通過 DOM API 以編程方式暴露在外</font></font></li>
  </ul>
 </li>
 <li><em><font><font>presentation</font></font></em><font><font> 包含框架層級關係</font></font>
  <ul>
   <li><font><font>框架包含風格背景，觀點，窗口小部件</font></font></li>
   <li><font><font>演示包含的媒體類型、尺寸等</font></font></li>
   <li><font><font>可能不會直接操控</font></font></li>
  </ul>
 </li>
</ul>

<h2 id="Detailed_Walk-Through" name="Detailed_Walk-Through"><font><font>詳細執行步驟</font></font></h2>

<ul>
 <li><font><font>設置</font></font></li>
 <li><font><font>內容模型的構建</font></font></li>
 <li><font><font>框架 Frame 的構建</font></font></li>
 <li><font><font>樣式 Style 的決議</font></font></li>
 <li><font><font>回流（</font></font>{{Glossary("reflow")}}<font><font>）</font></font></li>
 <li><font><font>繪製（</font></font>Painting<font><font>）</font></font></li>
</ul>

<h2 id="Setting_Up" name="Setting_Up"><font><font>設置</font></font></h2>

<ul>
 <li><font><font>假設此處您已經熟悉嵌入和網路 API（doc shell、stream）的基本知識。</font></font></li>
 <li><font><font>Content DLL 自動註冊一個<em>文件載入工廠（</em></font></font><em><font><font>DLF）</font></font></em>
  <ul>
   <li><code>@mozilla.org/content-viewer-factory/view;1?type=text/html</code></li>
   <li><font><font>所有 MIME type 都與同一個類——nsContentDLF 相對應</font></font></li>
  </ul>
 </li>
 <li><code><font><font>nsDocShell</font></font></code>
  <ul>
   <li><font><font>通過 </font></font><code><font><font>nsDSURIContentListener</font></font></code><font><font> 接收穫取的內容（原始數據）</font></font></li>
   <li><font><font>呼叫 </font></font><code><font><font>nsIDLF::CreateInstance</font></font></code><font><font> 方法，傳遞 MIME type 給 DLF</font></font></li>
  </ul>
 </li>
 <li><font><font>nsContentDLF</font></font>
  <ul>
   <li><font><font>建立一個 </font></font><code><font><font>nsHTMLDocument</font></font></code><font><font> 物件，呼叫 </font></font><code><font><font>StartDocumentLoad</font></font></code>
    <ul>
     <li><font><font>建立一個解析器（parser），將 </font></font><code><font><font>nsIStreamListener</font></font></code><font><font> 物件返回給 docshell</font></font></li>
     <li><font><font>創建一個 content sink（它會將解析器 parser 與文件 doucment 相連接）</font></font></li>
    </ul>
   </li>
   <li><font><font>創建一個 </font></font><code><font><font>DocumentViewerImpl</font></font></code><font><font> 對象，將 </font></font><code><font><font>nsIContentViewer</font></font></code><font><font> 對象返回給 docshell</font></font></li>
  </ul>
 </li>
 <li><code><font><font>DocumentViewerImpl</font></font></code><font><font> 創建 pres context 和 pres shell</font></font></li>
</ul>

<p><img src="/files/456/Gecko_Overview_19.png" style="height: 350px; width: 663px;"></p>

<h2 id="Content_Model_Construction" name="Content_Model_Construction"><font><font>內容模型的構建</font></font></h2>

<ul>
 <li><font><font>從網絡上通過 </font></font><code><font><font>nsIStreamListener::OnDataAvailable</font></font></code><font><font> 獲取內容</font></font></li>
 <li><font><font>解析器對內容進行標記&amp;處理；使用 </font></font><em><font><font>parser node</font></font></em><font><font> 對像在</font></font><code><font><font> nsIContentSink</font></font></code><font><font> 上調用方法</font></font>
  <ul>
   <li><font><font>一些緩衝和修正發生在這裡</font></font></li>
   <li><font><code><font>OpenContainer，CloseContainer，AddLeaf</font></code></font></li>
  </ul>
 </li>
 <li><font><font>內容水槽創建並使用附加內容節點 </font></font><code><font><font>nsIContent</font></font></code><font><font> 接口</font></font>
  <ul>
   <li><font><font>內容水槽保持棧的“活”元素</font></font></li>
   <li><font><font>更多緩衝和修正發生在這裡</font></font></li>
   <li><font><code><font>InsertChildAt，AppendChildTo，RemoveChildAt</font></code></font></li>
  </ul>
 </li>
</ul>

<p><img src="/files/457/Gecko_Overview_21.png" style="height: 179px; width: 662px;"></p>

<h2 id="Frame_Construction" name="Frame_Construction"><font><font>框架 Frame 的構建</font></font></h2>

<ul>
 <li><font><font>內容接收器使用 </font></font><code><font><font>nsIDocument</font></font></code><font><font>接口，在內容模型通知ΔS的</font></font>

  <ul>
   <li><font><code><font>ContentAppended，ContentInserted，ContentRemoved</font></code></font></li>
  </ul>
 </li>
 <li><code><font><font>PresShell</font></font></code><font><font> 被註冊作為文件觀察者</font></font>
  <ul>
   <li><font><font>接收 </font></font><code><font><font>ContentAppended</font></font></code><font><font> 等通知</font></font></li>
   <li><font><font>它傳遞給樣式集的對象，誰又將傳遞給幀構造</font></font></li>
  </ul>
 </li>
 <li><font><font>框架構造函數創建幀</font></font>
  <ul>
   <li><code><font><font>ConstructFrameInternal</font></font></code><font><font> 遞歸散步內容樹，解決作風和創建幀</font></font></li>
   <li><font><font>或者通過標籤創建</font></font><code><font><font>（</font></font>&lt;select&gt;<font><font>）</font></font></code><font><font>或顯示類型</font><font>（</font></font><code>&lt;p&gt;</code><font><font>）</font></font></li>
  </ul>
 </li>
 <li><font><font>幀管理者保持映射從內容到框架</font></font></li>
</ul>

<p><img src="/files/458/Gecko_Overview_23.png" style="height: 359px; width: 697px;"></p>

<h2 id="Style_Resolution" name="Style_Resolution"><font><font>Style 選定</font></font></h2>

<ul>
 <li><font><font>計算依據適用於框架的內容節點樣式規則文體信息</font></font></li>
 <li><font><font>分成不同的結構樣式數據</font></font>
  <ul>
   <li><font><font>顯示，能見度，字體，顏色，背景，...</font></font></li>
   <li><font><font>繼承與復位</font></font></li>
  </ul>
 </li>
 <li><font><font>樣式上下文對象是一個佔位符部分計算文體數據</font></font>
  <ul>
   <li><font><font>樣式數據懶洋洋地計算，因為它要求</font></font></li>
  </ul>
 </li>
</ul>

<h2 id="Reflow" name="Reflow"><font><font>回流</font></font></h2>

<ul>
 <li><font><font>遞歸計算幾何</font><em><font>（</font></em></font><em>x</em>,<em>y</em>,<em>w</em>,<em>h</em><font><em><font>）</font></em><em><font>為框架，視圖和小部件</font></em></font>

  <ul>
   <li><font><font>鑑於“根幀”計算（</font></font><em>x</em>,<em>y</em>,<em>w</em>,<em>h</em><font><em><font>）為所有兒童</font></em></font></li>
   <li><font><font>通過約束傳播“向下</font></font><code><font><font>”nsHTMLReflowState</font></font></code></li>
   <li><font><font>所需的大小返回“向上”通過</font></font><code><font><font>nsHTMLReflowMetrics</font></font></code></li>
  </ul>
 </li>
 <li><font><font>基本模式</font></font>
  <ul>
   <li><font><font>父框架初始化子回流狀態（可</font><em><font>W¯¯，^ </font></em><font>h）; </font><font>地方子幀</font><font>（x，ÿ）; </font><font>調用孩子的</font><code><font>回流</font></code><font>方法</font></font></li>
   <li><font><font>子幀計算所需的</font><em><font>（W¯¯，^</font></em><font> </font><em><font>h），通過回流焊指標回報</font></em></font></li>
   <li><font><font>家長外形尺寸為子框架和觀點的基礎上孩子的指標</font></font></li>
  </ul>
 </li>
 <li><font><font>注：很多</font></font><em><font><font>並不</font></font></em><font><font>這樣工作！</font><font>（表，塊，XUL盒）</font></font></li>
</ul>

<h2 id="Reflow_2" name="Reflow_2"><font><font>回流</font></font></h2>

<ul>
 <li><font><font>“環球”回流</font></font>

  <ul>
   <li><em><font><font>最初，調整大小，風格變化</font></font></em></li>
   <li><font><font>通過立即處理</font></font><code><font><font>PresShell</font></font></code><font><font>方法</font></font></li>
  </ul>
 </li>
 <li><font><font>增量回流</font></font>
  <ul>
   <li><font><font>針對特定的幀</font></font></li>
   <li><em><font><font>臟</font></font></em><font><font>，</font></font><em><font><font>內容改變</font></font></em><font><font>，</font></font><em><font><font>風格改變了</font></font></em><font><font>，</font></font><em><font><font>用戶自定義</font></font></em></li>
   <li><code><font><font>nsHTMLReflowCommand</font></font></code><font><font>對象封裝信息</font></font></li>
   <li><font><font>排隊和異步處理</font></font><code><font><font>，nsIPressShell </font><font>:: </font></font></code><code><font><font>AppendReflowCommand，ProcessReflowCommands</font></font></code></li>
  </ul>
 </li>
</ul>

<h2 id="Incremental_Reflow" name="Incremental_Reflow"><font><font>增量回流</font></font></h2>

<p><img src="/files/459/Gecko_Overview_28.png" style="height: 331px; width: 319px;"></p>

<ul>
 <li><font><font>遞歸下降到目標</font></font><em><font><font>恢復回流狀態</font></font></em>

  <ul>
   <li><font><font>兒童rs.reason設置為</font></font><em><font><font>增量</font></font></em></li>
  </ul>
 </li>
</ul>

<h2 id="Incremental_Reflow_2" name="Incremental_Reflow_2"><font><font>增量回流</font></font></h2>

<p><img src="/files/460/Gecko_Overview_29.png" style="height: 331px; width: 319px;"></p>

<ul>
 <li><font><font>流程回流“正常”的目標框架</font></font>

  <ul>
   <li><font><font>兒童rs.reason一套基於RC的</font></font><em><font><font>類型</font></font></em></li>
  </ul>
 </li>
</ul>

<h2 id="Incremental_Reflow_3" name="Incremental_Reflow_3"><font><font>增量回流</font></font></h2>

<p><img src="/files/461/Gecko_Overview_30.png" style="height: 332px; width: 319px;"></p>

<ul>
 <li><em><font><font>傳播損害</font></font></em><font><font>到“在流動”幀之後</font></font></li>
</ul>

<h2 id="Incremental_Reflow_4" name="Incremental_Reflow_4"><font><font>增量回流</font></font></h2>

<p><img src="/files/462/Gecko_Overview_31.png" style="height: 331px; width: 319px;"></p>

<ul>
 <li><font><font>多次回流焊命令批處理</font></font>

  <ul>
   <li><code><font><font>nsReflowPath</font></font></code><font><font>維持目標幀的一棵樹</font></font></li>
   <li><font><font>攤銷狀態的恢復和損傷擴展成本</font></font></li>
  </ul>
 </li>
</ul>

<h2 id="Painting" name="Painting"><font><font>繪畫</font></font></h2>

<ul>
 <li><font><font>當回流繼續通過幀層次結構，區域</font></font><em><font><font>無效</font></font></em><font><font>通過</font></font><code><font><font>nsIViewManager ::更新視圖</font></font></code></li>
 <li><font><font>除非</font></font><em><font><font>直接</font></font></em><font><font>的，無效的區域合併，並通過操作系統的異步處理</font></font><em><font><font>揭露</font></font></em><font><font>事件</font></font></li>
 <li><font><font>本機暴露事件分派到小部件; </font><font>小部件委託給視圖管理器</font></font></li>
 <li><font><font>查看經理描繪的意見後到前，調用</font></font><code><font><font>PresShell</font></font></code><font><font>的</font></font><code><font><font>畫圖</font></font></code><font><font>方法</font></font></li>
 <li><code><font><font>PresShell ::油漆</font></font></code><font><font>遍歷從視圖幀; </font><font>將調用</font></font><code><font><font>nsIFrame ::油漆</font></font></code><font><font>每個</font></font><em><font><font>層</font></font></em></li>
</ul>

<h2 id="Incrementalism" name="Incrementalism"><font><font>漸進</font></font></h2>

<ul>
 <li><font><font>單線程</font></font>

  <ul>
   <li><font><font>簡單（無鎖）</font></font></li>
   <li><font><font>不能離開事件隊列無人值守</font></font></li>
  </ul>
 </li>
 <li><font><font>內容建設開卷“隨意”</font></font>
  <ul>
   <li><font><font>解析器和內容接收器做一些緩衝</font></font></li>
   <li><font><font>內容散熱器具有“通知限制”</font></font></li>
   <li><font><font>效率與響應速度的權衡</font></font></li>
  </ul>
 </li>
 <li><font><font>框架結構運行完成</font></font></li>
 <li><font><font>CSS解析運行完成</font></font></li>
 <li><font><font>回流焊運行完成（主要）</font></font></li>
 <li><font><font>繪畫運行完成</font></font></li>
</ul>

<p><img src="/files/463/Gecko_Overview_34.png" style="height: 380px; width: 694px;"></p>

<h2 id="Future_.28.3F.29_Tech_Talks" name="Future_.28.3F.29_Tech_Talks"><font><font>未來（？）技術講座</font></font></h2>

<ul>
 <li><font><font>內容模型和DOM - </font><em><font>JST，jkeiser</font></em></font></li>
 <li><font><font>解析器和內容接收器（ESP無效的內容） - </font></font><em><font><font>harishd</font></font></em></li>
 <li><font><font>事件- </font></font><em><font><font>薩里</font></font></em><font><font>，</font></font><em><font><font>條既納</font></font></em></li>
 <li><font><font>塊和行回流焊- </font><em><font>沃特森，dbaron</font></em></font></li>
 <li><font><font>表回流焊- </font></font><em><font><font>karnaze</font></font></em></li>
 <li><font><font>窗體控件- </font><em><font>棒，礪石</font></em></font></li>
 <li><font><font>風格解析和規則樹- </font></font><em><font><font>dbaron</font></font></em></li>
 <li><font><font>視圖，窗口小部件，和繪畫- </font></font><em><font><font>大鵬</font></font></em><font><font> </font></font><em><font><font>，kmcclusk</font></font></em></li>
 <li><font><font>編輯器- </font><em><font>健，Jfrancis</font></em></font></li>
 <li><font><font>XUL和箱的佈局- </font></font><em><font><font>休伊特</font></font></em><font><font>，</font></font><em><font><font>本</font></font></em></li>
 <li><font><font>XBL - </font></font><em><font><font>休伊特</font></font></em><font><font>，</font></font><em><font><font>本</font></font></em></li>
</ul>

<h2 id="Conclusion" name="Conclusion"><font><font>結論</font></font></h2>

<ul>
 <li><font><font>數據流</font></font></li>
 <li><font><font>關鍵數據結構</font></font></li>
 <li><font><font>詳細演練</font></font></li>
 <li><font><font>漸進</font></font></li>
 <li><font><font>Q＆A？</font></font></li>
</ul>

<div class="originaldocinfo">
<h2 id="Original_Document_Information" name="Original_Document_Information"><font><font>原始文檔信息</font></font></h2>

<ul>
 <li><a class="link-mailto" href="mailto:waterson@netscape.com"><font><font>作者（S）：克里斯·沃特森</font></font></a></li>
 <li><font><font>最後更新日期：2002年6月10日，</font></font></li>
 <li><font><font>版權信息：此內容的部分是©1998-2008個別mozilla.org貢獻者; </font><font>|在創作共用許可的可用內容</font></font><a href="http://www.mozilla.org/foundation/licensing/website-content.html"><font><font>詳細信息</font></font></a><font><font>。</font></font></li>
</ul>
</div>