浏覽器是如何展示網頁的

作為一名前端工程師，我們應該清楚浏覽器是如何展示網頁的，了解浏覽器的原理可以令設計者找到适合的途徑把網頁展示給使用者。

首先，讓我們來看看什麼是浏覽器。網頁浏覽器是顯示網頁伺服器或檔案系統内的檔案，并讓使用者與這些檔案互動的一種軟體。它用來顯示在網際網路或局部區域網路絡等内的文字、影像及其他資訊。浏覽器就是設計者的畫廊，設計者把網頁放在這裡展示給使用者。

因為沒有固定的标準，不同浏覽器的元件不盡完全相同。不過大家互相模仿進步，基本上而言，浏覽器的主要元件包括：

1. 使用者界面－ 包括位址欄、後退/前進按鈕、書簽目錄等，也就是你所看到的除了用來顯示你所請求頁面的主視窗之外的其他部分
2. 浏覽器引擎－ 用來查詢及操作渲染引擎的接口
3. 渲染引擎－ 用來顯示請求的内容，例如，如果請求内容為html，它負責解析html及css，并将解析後的結果顯示出來
4. 網絡－ 用來完成網絡調用，例如http請求，它具有平台無關的接口，可以在不同平台上工作
5. UI 後端－ 用來繪制類似組合選擇框及對話框等基本元件，具有不特定于某個平台的通用接口，底層使用作業系統的使用者接口
6. JS解釋器－ 用來解釋執行JS代碼
7. 資料存儲－ 屬于持久層，浏覽器需要在硬碟中儲存類似cookie的各種資料，HTML5定義了web database技術，這是一種輕量級完整的用戶端存儲技術

那麼，浏覽器是如何展示網頁的呢。浏覽器的工作原理可以分以下幾步來了解：

1. 浏覽器通過HTML表單或超連結請求指向一個應用程式的URL。
2. 伺服器收發到使用者的請求。
3. 伺服器執行已接受建立的指定應用程式。
4. 應用程式通常是基于使用者輸入的内容，執行所需要的操作。
5. 應用程式把結果格式化為網絡伺服器和浏覽器能夠了解的文檔，即我們所說的HTML網頁。
6. 網絡伺服器最後将結果傳回到浏覽器中。

這其中牽涉了超文本傳輸協定http（Hypertext transfer protocol ）工作原理，欲知詳情，請移步：

http://www.360doc.com/content/13/0422/16/3777348_280148022.shtml

推薦深入研讀可讀：http://www.iefans.net/liulanqi-ruhe-gongzuo-yuanli/