瀏覽器的工作機制，一句話概括起來就是：web瀏覽器與web服務器之間通過HTTP協議進行通信的過程。所以，C/S之間握手的協議就是HTTP協議。瀏覽器接收完畢開始渲染之前大致過程如下：
從瀏覽器地址欄的請求鏈接開始，瀏覽器通過DNS解析查到域名映射的IP地址，成功之后瀏覽器端向此IP地址取得連接，成功連接之后，瀏覽器端將請 求頭信息 通過HTTP協議向此IP地址所在服務器發起請求，服務器接受到請求之后等待處理，最后向瀏覽器端發回響應，此時在HTTP協議下，瀏覽器從服務器接收到 text/html類型的代碼，瀏覽器開始顯示此html，並獲取其中內嵌資源地址，然后瀏覽器再發起請求來獲取這些資源，並在瀏覽器的html中顯示。
離我們最近並能直接顯示一個完整通信過程的工具就是Firebug了，看下圖:
//響應頭信息 HTTP/1.1 304 Not Modified Date: Wed, 02 Mar 2011 08:20:06 GMT Server: Apache/2.2.4 (Win32) PHP/5.2.1 Connection: Keep-Alive Keep-Alive: timeout=5, max=100 Etag: "1e483-1324-a86f5621"
//請求頭信息 GET /Docs/eva/api/colorBox.html HTTP/1.1 Host: ued.com User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; zh-CN; rv:1.9.2.13) Gecko/20101203 Firefox/3.6.13 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: zh-cn,zh;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: GB2312,utf-8;q=0.7,*;q=0.7 Keep-Alive: 115 Connection: keep-alive Referer: http://ued.com/Docs/ If-Modified-Since: Thu, 17 Feb 2011 10:14:07 GMT If-None-Match: "1e483-1324-a86f5621" Cache-Control: max-age=0
另外，ajax異步請求同樣遵循HTTP協議，原理大同小異。
瀏覽器加載顯示html頁面內容的順序
我們經常看到瀏覽器在加載某個頁面時,部分內容先顯示出來,又有些內容后顯示。那么瀏覽器加載顯示html究竟是按什么順序進行的呢?
其實瀏覽器加載顯示html的順序是按下面的順序進行的：
1、IE下載的順序是從上到下，渲染的順序也是從上到下，下載和渲染是同時進行的。
2、在渲染到頁面的某一部分時，其上面的所有部分都已經下載完成（並不是說所有相關聯的元素都已經下載完）。
3、如果遇到語義解釋性的標簽嵌入文件（JS腳本，CSS 劍 敲創聳盜E的下載過程會啟用單獨連接進行下載。
4、並且在下載后進行解析，解析過程中，停止頁面所有往下元素的下載。
5、樣式表在下載完成后，將和以前下載的所有樣式表一起進行解析，解析完成后，將對此前所有元素（含以前已經渲染的）重新進行渲染。
6、JS、CSS中如有重定義，后定義函數將覆蓋前定義函數。
Firefox處理下載和渲染順序大體相同，只是在細微之處有些差別，例如：iframe的渲染
如果你的網頁比較大，希望部分內容先顯示出來，粘住瀏覽者，那么你可以按照上面的規則合理的布局你的網頁，達到預期的目的。
JS的加載
不能並行下載和解析（阻塞下載）
當 引用了JS的時候，瀏覽器發送1個jsrequest就會一直等待該request的返回。因為瀏覽器需要1個穩定的DOM樹結構，而JS中很有可能有代 碼直接改變了DOM樹結構，比如使用 document.write 或 appendChild,甚至是直接使用的location.href進行跳轉，瀏覽器為了防止出現JS修改DOM樹，需要重新構建DOM樹的情況，所以 就會阻塞其他的下載和呈現.
為了更清楚的顯示頁面元素的加載順序，動手寫了一個程序，程序對頁面中的每個元素都延遲10秒。
程序的位置在見附件。
首先查看TestHtmlOrder.aspx這個頁面，使用HttpWatcher來檢測頁面元素的加載。
從下面的圖中可以看到加載順序。
IE首先加載了主頁面TestHtmlOrder.aspx，
下載了主頁面后，頁面首先顯示的是“紅色劍靈”、“藍色劍靈”幾個字，但此時顯示的是只是黑色字體，沒有樣式，因為樣式還沒有下載下來。
接下來頁面中的標簽是JS標簽，屬於嵌入文件，因此IE需要將其下載下來。這有兩個文件，雖然IE同時能夠和WebServer建立兩個鏈接，但是此時並沒有使用兩個連接，而是使用一個連接，在下載完成后，接下來才下載另外一個文件。
究其原因，是因為JS包含了語法定義，在第二個文件里面的函數可能用到了第一個文件里面的變量和函數，IE沒有辦法判斷，或者需要很耗時的判斷，才 能判斷文件下載的先后順序。而在解釋方面，IE對JS文件是下載一個，解釋一個(可以執行文件TestJsOrder2.aspx)。如果先下載的是第二 個文件，此時就會發生解釋錯誤。因此需要開發者自己在放置JS文件位置時，按先后順序放好，IE依次下載進行解釋。后面的函數覆蓋前面的函數定義
在下載完成后，我們看到helloWorld，helloworld2，開始順序執行。而此時字體的樣式表和圖片仍然沒有下載下來。
在helloWorld，helloWorld2執行過程時，此時頁面停留在函數執行的中斷點(alert部分)。此時IE並沒有去下載CSS的文件。由此說明JS函數的執行會阻塞IE的下載。
接下來我們看到CSS文件的下載也是使用了一個連接，也是串行下載。其串行下載的原因和JS串行下載原因是一樣的。
在兩個CSS文件下載過程中，我們看到“紅色劍靈”，“藍色劍靈”依次變為紅色和藍色，兩者顏色的轉換時間相差在10秒，說明樣式文件和JS文件一樣是下載完一個解析一個的。
現在轉到TestCssOrder.aspx看一下，可以看到 開始時“紅色劍靈”，“紅色強壯劍靈”，顯示為紅色，過了10秒“藍色劍靈”顯示為藍色，再過10秒，“紅色強壯劍靈”字體變粗了，同時“紅色強壯劍靈 2”開始出現。在剛開始“紅色劍靈”，“紅色強壯劍靈”顯示紅色時，第三個樣式還沒有下載下來，此時IE使用已經下載到樣式對上面的元素渲染了一遍，此時 雖然“紅色劍靈”，“紅色強壯劍靈”樣式定義不同，但是顯示效果一樣。第三個文件下載后，此時IE又重新對“紅色強壯劍靈”渲染了一遍，此時其變為加粗， 以上所有的文件加載並且渲染完成后，開始渲染下面的標簽“紅色強壯劍靈2”
有一點需要證明：在IE使用樣式對標簽進行渲染時，是不是停止了其他頁面元素的下載?原來我想通過加長渲染時間(利用濾鏡，將標簽元素數目增大)來檢測，不過沒有驗證成功。只是從JS函數的執行推斷CSS的渲染也是如此。
接下來看到的是圖片文件下載，此時看到的是兩個圖片同時開始下載，而且是下載完成后，立即在頁面上開始顯示，直到所有的圖片下載完成。
注：一個測試文件在網絡傳輸上所花費時間的辦法。
首先需要明白檢測中w ait值的意義：wait = 服務器所花時間 + 網絡時間
服務器所花時間我們可以用Thread.Sleep(10000);來讓其休息10s，
比如這個：
由此大概可以計算出 10.002-10 = 0.002秒，這就是大概在網絡上所花的時間。
來源: 瀏覽器加載渲染網頁過程解析