1. 概述
2. HTTP請求過程
3. 相關性能檢測及優化手段
4. 瀏覽器的呈現過程
5. 瀏覽器的呈現引擎
6. 引用及延伸閱讀

概述

　　為什么輸入www.cnblogs.com之后敲一個回車，瀏覽器就會顯示我們所看到的內容？這家伙在背后到底偷偷的干了哪些事情？今天我們就來挖掘一下這背后的故事。

HTTP請求過程

　　為直觀明了，先上一張圖:

　　畫完之后，才發現原來我的字寫的這么難看，別噴我，小伙伴們！

　　下面是詳細的步驟以及說明：

1. 輸入URL,敲回車。
2. 針對當前URL檢查是否存在本地緩存， 如果存在，則會加載本地緩存進行呈現。如圖，經過 (1)-> (2) ->(9) ->(10)。 ( 感謝“我是你的豬”的糾錯 :) )
3. 根據URL找到對應的IP地址。這一步通常被稱為DNS輪詢，這里面是有緩存機制的。緩存的順序依次為：瀏覽器緩存->操作系統緩存->路由器緩存->DNS提供商緩存->DNS提供商輪詢。
4. 建立TCP連接到上一步找到的機器
5. 用上一步建立的連接發送http request
6. 等待并接收http response
7. 關閉TCP連接，視情況而定，http1.1已經支持keep-alive。那么這個TCP請求是可以被后面的request利用的，這樣就可以減少不斷建立連接而造成的損失。
8. 檢查狀態碼，如果response的狀態碼出現3XX(跳轉)，未授權（401），錯誤（4XX和5XX）會有不同的處理。
9. 準備呈現，如果response status 為304（內容未更改）瀏覽器則會從本來緩存加載內容進行呈現。
10. 呈現

相關性能檢測及優化手段

　　在很多瀏覽器的輔助工具中，大都將上述步驟分為了以下5 個：

1. DNS輪詢
2. 建立連接
3. 發送請求
4. 等待響應
5. 接受請求

　　我們通過查看這個時間線，就可以粗略知道我們的網站是否有性能問題以及問題出在哪里？然后我們就可以針對性的解決。

　　拿上圖舉例，第4步“等待響應”所花的時間為3.03秒。所謂等待響應主要是頁面的處理時間，比如說查詢數據庫、業務邏輯處理計算等等直接最后把html代碼封裝成response返回。（關于IIS的請求處理過程我們后面再探討）如果這一步的時間過長，那我們就要考慮從后臺動態代碼處理邏輯，以及數據查詢方面下手去找問題了。另外需要監控并發量，是否服務器同時處理的請求過多導致處理時間過長等。

　　第3步和第5步如果時間過長，我們可以通過以下方式來解決。

1. Request會攜帶cookie傳輸，這就是除了安全性考慮以外為什么我們建議限制cookie數據和大小的原因。
2. Response 如果是html代碼我們可以考慮代碼壓縮和gzip壓縮。
3. 靜態資源可以采用其它的方式直接壓縮。
4. 建立CDN網絡服務不同地域的用戶。

瀏覽器的呈現過程

　　這里有一個略虛的問題，當我們輸完www.cnblogs.com之后，到底是一個http請求，還是多個？

　　我們或許可以說，只有一個請求是直接產生的，而后面一堆的請求是取絕于我們所輸入的URL。我們可以看到第一個請求的Path就是我們輸入的URL，當這個請求的類型為text/html的時候，也就是說這個請求返回給我們的是html代碼。那么瀏覽器會去呈現這個頁面。

      但是如果我們直接輸入：http://common.cnblogs.com/script/jquery.js 這個時候當然瀏覽器不會去發起其它請求（前提條件是這個JS里面沒有主動去請求其它資源的情況下）。而瀏覽器對于每一種請求類型的處理方式是不一樣的，像text/html、application/JavaScript、text/plain等等這些是可以直接呈現的，而對于不能呈現的類型，瀏覽器會將該資源下載到本地。

　　總的來說，實際的請求數量是1+這個請求資源里面所包含其它資源的數量。

　　接下來，我們主要看一下，瀏覽器如果呈現text/html類型的請求。上面我們講到的http的請求過程中的第6步瀏覽器已經拿到了返回結果即response。

      那么瀏覽器在確認這個response的狀態不是301（跳轉）或者401（未授權）或其它需要做特殊處理的狀態，之后開始進入呈現過程。

瀏覽器的呈現引擎

　　呈現引擎：負責顯示請求的內容。如果請求的內容是 HTML，它就負責解析 HTML 和 CSS 內容，并將解析后的內容顯示在屏幕上。默認情況下，呈現引擎可顯示 HTML 和 XML 文檔與圖片。通過插件（或瀏覽器擴展程序），還可以顯示其它類型的內容；例如，使用 PDF 查看器插件就能顯示 PDF 文檔。這里我們主要討論它的主要功能：顯示使用 CSS 格式化的 HTML 內容和圖片。

　　呈現引擎的處理步驟包括4個：

1. 解析html轉換成DOM樹。瀏覽器有一個內置組件叫HTML解析器，會遍歷HTML代碼去生成DOM樹。
2. 結合部分CSS樣式將DOM樹轉換成呈現樹（這里面的樣式包括顏色尺碼等）。這里有瀏覽器的另外一個內置組件叫CSS解析器會遍歷所有的CSS內容行成一組樣式規則。這里面的CSS解析器和上一步的HTML解析器是同時進行的，之后會將樣式規則附加到DOM樹上就形成了我們的呈現樹。
3. 通過呈現樹構建布局樹，主要是為每一個DOM元素分配了一個應出現在屏幕上的確切坐標。
4. 遍歷呈現樹，繪制每一個節點。

　　為了縮短整個呈現的過程，瀏覽器不會等到所有的DOM樹和所有的樣式規則都準備好再進行顯示。而是一邊解析一邊顯示，如果后面有JavaScript改變了某一些元素的樣式屬性則會導致重流（Reflow）和重繪(Repaint)。關于什么是重流和重繪這里就不詳述了，網上有很多相關的資料，有興趣的同鞋可以戳這里：重流和重繪

    這是我的第一篇博客，主要是想對自己所掌握的知識有一個總結，也查看了很多網上的資料以及前輩們的博客J。當然也是想跟大家分享關于web方面的知識，我的側重點主要在于web的一些運行機制，后面還會繼續，下一篇將討論一下關于IIS以及ASP.NET的運行機制，歡迎大家拍磚。

引用及延伸閱讀

1. 瀏覽器工作原理：http://ux.sohu.com/topics/50972d9ae7de3e752e0081ff
2. What happens when you navigate to a URL: http://igoro.com/archive/what-really-happens-when-you-navigate-to-a-url/　
3. 前端必讀之Best Practices for Speeding Up Your Web Site：http://developer.yahoo.com/performance/rules.html