如何查看封面並查看HTML是如何呈現的？

Question

例如：

<input name="abutton" type="button" value="This is not a button" /> 

我知道這給了我一個按鈕。但我也知道，有人必須弄清楚我的文本有多寬，畫出一個正確大小的按鈕，將我的文本放在那裏......等等。

讓我們以Mozilla爲例。我做了一些谷歌搜索，發現this，所以我認爲我在正確的軌道上。不過，第一句話說，這一切：

頁重組：在Mozilla（這是由很多名字）中使用的排版引擎開始作爲一個項目來寫Mozilla的一個新的佈局引擎，成爲Mozilla的佈局引擎和1998年底

混淆了一個幾乎完全重寫的基礎。

下面是部分名單，我知道存在（來自Mozilla的網頁）：

• HTML解析器和XML解析器
• DOM實現
• CSS解析器和風格體系
• HTML解析器和XML解析器
• 用於基於CSS和基於HTML的佈局和渲染的代碼

有人可以用外行的話來解釋Mozilla瀏覽器模型如何顯示一個按鈕嗎？

Answer 1

所以這實際上是一個非常複雜的問題。幾年前，我曾在Mozilla項目中工作過，下面是我如何在最好的回憶中工作：

1. HTML被解析並進入DOM標準中指定的節點。該樹表示文檔中數據的結構。
2. 從該DOM樹構建另一個稱爲幀樹的並行樹。這棵樹代表了樹中的視覺信息 - 像盒子模型這樣的東西在這裏實現。
3. 一旦Mozilla計算出所有的相互依賴關係並構建了令人滿意的框架樹，框架樹就會痛苦。這裏有一些步驟（視圖樹，小部件樹），我認爲現在已經過時，而且無論如何都是Mozilla特有的。重點在於將這個幀樹交給圖形子系統（最終調用到OS）進行渲染。

大多數現代瀏覽器增量佈局（在Mozilla術語中稱爲「重排」）頁面，因此隨着各種資源的加載，所有這些都會發生，所以這並不完全準確。

對於Mozilla信息，我會在irc.mozilla.org上推薦#developers。對於WebKit信息，您可以在chat.freenode.net上嘗試#webkit。

請注意，我不再是Mozilla的開發人員，並且自2008年以來與該項目沒有任何關聯，所以完全有可能是我錯了。隨時糾正我。