1、瀏覽器本地快取匹配；
2、本地hosts對映對比;
3、本地dns快取解析；
4、遠端dns解析獲得伺服器ip地址；
5、瀏覽器傳送tcp連線請求包(syn)；
6、請求包經過傳輸層、網路層、資料鏈路層封裝通過網路卡到達路由器；
7、路由器轉發資料包到所屬運營商伺服器；
8、運營商伺服器通過定址最短路徑通過中繼節點到達指定ip地址；
9、伺服器端可能存在反向代理或者負載均衡，都是直接轉發請求至上游伺服器，當然也可以制定安全防禦規則直接丟棄請求包；
10、上游伺服器收到連線請求，在自身可用的情況下，返回(syn+ack)；
11、瀏覽器校驗ack，再次傳送(syn+ack)；
12、伺服器校驗ack切換連線狀態至established，然後根據請求傳輸資料包；
13、當transform-encoding為chunked時，瀏覽器開始渲染頁面；
14、四次揮手，連線關閉；
15、渲染資料完成。
渲染的細節
- html頁面的解析與渲染
- 客戶端瀏覽器載入了html檔案後，由上到下解析html為DOM樹（DOM Tree）。
- 遇到css檔案，css中的url發起http請求。
- 這是第二次http請求，由於http1.1協議增加了Connection: keep-alive宣告，故tcp連線不會關閉，可以複用。
- http連線是無狀態連線，客戶端與伺服器端需要重新發起請求–響應。在請求css的過程中，解析器繼續解析html，然後到了script標籤。
- 由於script可能會改變DOM結構，故解析器停止生成DOM樹，解析器被js阻塞，等待js檔案發起http請求，然後載入。這是第三次http請求。js執行完成後解析器繼續解析。
- 由於css檔案可能會影響js檔案的執行結果，因此需等css檔案載入完成後再執行。
- 瀏覽器收到css檔案後，開始解析css檔案為CSSOM樹（CSS Rule Tree）。
- CSSOM樹生成後，DOM Tree與CSS Rule Tree結合生成渲染樹（Render Tree）。
- Render Tree會被css檔案阻塞，渲染樹生成後，先佈局，繪製渲染樹中節點的屬性(位置，寬度，大小等)，然後渲染，頁面就會呈現資訊。
- 繼續邊解析邊渲染，遇到了另一個js檔案，js檔案執行後改變了DOM樹，渲染樹從被改變的dom開始再次渲染。
- 繼續向下渲染，碰到一個img標籤，瀏覽器發起http請求，不會等待img載入完成，繼續向下渲染，之後再重新渲染此部分。
- DOM樹遇到html結束標籤，停止解析，進而渲染結束。
本作品採用《CC 協議》，轉載必須註明作者和本文連結