從輸入網址到頁面顯示經歷了那些步驟?

時間 2019-11-19

標籤輸入網址頁面顯示經歷那些步驟欄目職業生涯简体版

原文原文鏈接

第一步：查找域名的IP地址（瀏覽器緩存，系統緩存，路由器緩存，ISP的DNS緩存，遞歸搜索域名從頂級域名開始）javascript

第二步：經過三次握手創建TCP/IP鏈接css

第三步：發送HTTP請求（HTTP頭等分析）html

第四步：baidu.com到www.baidu.com的永久重定向相應(和搜索引擎重定向排名有關，搜索引擎知道301是什麼意思，因而將二者歸於同一個名下；用多個地址會致使緩存效果較差)java

第五步：跟蹤重定向地址發送請求ajax

第六步：服務器處理響應（可能要設置http頭）；四次放手協議瀏覽器

第七步：瀏覽器獲取到二進制的數據，轉換(Conversion）：瀏覽器從磁盤或者網絡上讀取HTML的原始字節，而後根據指定的編碼規則轉換成單獨的字符（好比按UTF-8編碼）。標記分解（Tokenizing）：瀏覽器將字符串按照W3C HTML5標準轉換成肯定的標記，好比<html>、<body>以及其餘帶尖括號的字符。每一個標記都有特定的意義以及一套規則。詞法分析（Lexing）：分解出來的標記被轉換成能定義其屬性和規則的對象。DOM 構造：最終因爲HTML標記定義了不一樣標籤的關係（有些標籤嵌套在其餘標籤裏面），建立出來的對象被關聯到一個樹形數據結構。這顆樹會反映在原先標籤裏定義的父子關係，好比HTML對象就是body對象的父對象，body對象又是paragraph對象的父對象等等。（參見谷歌 Web 開發最佳實踐手冊（4.1.1）：建立對象模型）緩存

第八步：發送請求獲取在html中其它內容如img/javascript/css等，若是是javascript可能要按順序逐個下載執行服務器

第九步：瀏覽器從服務端獲取網頁後會根據文檔的DOCTYPE定義顯示網頁，若是文檔正肯定義了DOCTYPE瀏覽器則會進入標準模式（Standards Mode），不然瀏覽器會進入怪異模式或混雜模式（Quirks mode）。網絡

第十步：構建DOM樹/CSSOM樹構建渲染樹（這時候對於head，或者display:none等不須要顯示的元素不會在渲染樹上），而後進行對象尺寸的計算，而且繪製到屏幕上!（DNS預處理，link prefetching，ajax請求等）數據結構