我願稱之為絕殺面試題，計算機網路方面的知識甚至瀏覽器的渲染機制，同時考察知識面的廣度和深度，面試官問這乙個題就足以探清你這方面知識的掌握情況。另一方面了解這其中的細節，對於前端優化來說也至關重要，本文也只能盡自己所了解到的進行總結。從輸入url到載入完頁面主要發生了以下過程（不考慮cdn和資源的強快取）：一、dns解析
二、建立tcp連線
三、客戶端傳送http請求
四、服務端返回資源
五、瀏覽器渲染頁面
六、斷開tcp連線
什麼是dns？
dns（domain name system，網域名稱系統），網際網路上作為網域名稱和ip位址相互對映的乙個分布式資料庫，能夠使使用者更方便的訪問網際網路，而不用去記住能夠被機器直接讀取的ip數串。
dns解析的詳細過程：
1、解析網域名稱時，瀏覽器會首先會依次檢視自己的dns快取、作業系統中的dns快取、本地硬碟的 hosts 檔案、路由器快取，看看其中有沒有快取和這個網域名稱對應的ip位址，如果有的話就直接使用 。
2、如果在上面的檔案中沒有找到對應的 ip 位址，瀏覽器就會發出乙個 dns請求到本地dns伺服器 。本地dns伺服器一般是你的網路接入伺服器商提供，比如中國電信，中國移動。
3、於是本地dns伺服器檢視自己有沒有快取對應的 ip 位址，若有則直接返回結果，否則本地dns伺服器需要向dns根伺服器進行查詢。根 dns 伺服器沒有記錄具體的網域名稱和 ip 位址的對應關係，而是告訴本地 dns 伺服器，你可以到域伺服器上去繼續查詢，並返回頂級網域名稱伺服器的 ip 位址給本地dns 伺服器。
4、本地dns伺服器再請求頂級網域名稱伺服器返回二級網域名稱伺服器ip，再請求二級網域名稱伺服器返回**網域名稱伺服器ip…直到找到對應的 ip 位址，返回給瀏覽器。
5、最後，本地dns伺服器不僅要把ip位址返回給使用者電腦，還要把這個對應關係儲存在快取中，以備下次別的使用者查詢時，可以直接返回結果，加快網路訪問。
注：域伺服器收到請求之後，不會直接返回網域名稱和ip位址的對應關係，而是告訴本地dns伺服器，相關網域名稱的dns伺服器的位址。
**自第一篇參考文章）
網域名稱的級別是指乙個網域名稱由多少級組成，網域名稱的各個級別被"."分開，總而言之，有多少個點就是幾級網域名稱。
頂級網域名稱在開頭有乙個點(.com .cn .net)
一級網域名稱就是在"com cn net"前加一級 (baidu.com)
二級網域名稱就是在一級網域名稱前再加一級(www.baidu.com)
二級網域名稱及以上級別的網域名稱，統稱為子網域名稱，不在註冊網域名稱的範疇中
主要是三次握手：
（1）第一次握手：
客戶端主動向服務端傳送請求建立連線的報文，並進入同步已傳送狀態；syn = 1 表示連線請求，seq = x 表示起始序列號，x表示乙個隨機數，通常為1。（syn=1，seq=x）
（2）第二次握手：
服務端收到客戶端的報文之後，返回一段確認接收到請求報文並同意建立新連線的報文，並進入同步收到狀態。（syn=1, ack=1, seq=y, ack=x+1）
（3）第三次握手：
客戶端接收到服務端的確認報文之後，也返回一段確認報文給服務端表示自己已收到確認報文並進入建立連線狀態，服務端收到確認報文後也進入建立連線狀態，此時雙方成功建立tcp連線。（ack=1, seq=x+1, ack=y+1）
（詳解歡迎參考我的另一篇部落格tcp三次握手、四次揮手過程詳解）
瀏覽器將使用者輸入的位址封裝成http request請求報文，傳送到伺服器。
http請求報文格式：請求行+請求頭+空行+請求體
//請求行：請求方法+http版本
accept:image/gif.image/jpeg //從這裡開始直到空行都是請求頭
accept-language:zh-cn
connection:keep-alive
host:localhost
user-agent:mozila/
4.0(compatible;
msie5
.01;window nt5.0)
accept-encoding:gzip,deflate
username=jinqiao&password=
1234
//請求體
伺服器收到請求後會返回響應報文，並在響應體中返回相關資源。
http響應報文格式：狀態行+響應頭+空行+響應體
//狀態行：http版本+狀態碼+提示資訊
server:apache/r/n //從這裡開始直到空行都是響應頭
content-encoding:gzip/r/nxi
//響應體
擴充套件問題：（1）get和post的區別 傳送門
（2）常見的狀態碼 傳送門
（3）常見的請求頭和響應頭
（4）強快取與協商快取 傳送門
（1）html被html解析器解析成dom tree, css則被css解析器解析成cssom tree（並行解析）。
（2）dom tree和cssom tree解析完成後，被合併到一起，形成渲染樹（render tree）。
（3）重排：節點資訊計算，即根據渲染樹計算每個節點的幾何資訊（大小及位置）。
（4）重繪：渲染繪製，即根據計算好的資訊繪製整個頁面，渲染出最終的頁面。
擴充套件問題：
（1）重排和重繪，如何減少 傳送門
（2）html**執行的順序和細節
主要是四次揮手：
（1）第一次揮手：
資料傳輸完畢，客戶端想要釋放連線（沒有資料需要傳輸給服務端了），於是向服務端傳送一段tcp報文請求釋放連線，然後進入終止等待狀態一。並且停止在客戶端到服務端方向上傳送資料，但是客戶端仍然能接收從服務端傳輸過來的資料。fin=1 表示請求釋放連線, u為隨機生成的起始報文段序號（fin=1，seq=u）
（2）第二次揮手：
服務端收到連線釋放報文，立即發出確認報文，表示接收到客戶端傳送的釋放連線的請求，並進入關閉等待狀態。（ack=1，seq=v，ack=u+1）
（3）第三次揮手：
服務端自從發出ack確認報文之後，經過了關閉等待階段，做好了釋放伺服器端到客戶端方向上的連線準備，再次向客戶端發出一段tcp報文表示已經準備好釋放連線了（沒有資料需要傳輸給客戶端了），然後進入最後確認狀態。（fin=1，ack=1，seq=w，ack=u+1）
（4）第四次揮手：
客戶端收到從伺服器端發出的tcp報文，確認了伺服器端已做好釋放連線的準備，於是再次向服務端傳送報文表示接收到服務端準備好釋放連線的訊號，並進入time-wait階段等待2msl ( 最大報文生存時間) 後再斷開連線，服務端收到最終確認報文後立即斷開連線，雙方斷開tcp連線。（ack=1，seq=u+1，ack=w+1）
（詳解歡迎參考我的另一篇部落格tcp三次握手、四次揮手過程詳解）
參考文章：
從輸入url到頁面載入完成期間經歷了什麼？（總覽篇）
從輸入url到頁面展示的詳細過程
從輸入URL到頁面載入，發生了什麼
整理之前的筆記時，發現之前的掌握的東西尚差的太遠，就仔細查詢了這個問題。總體來說，可以分為一下幾個部分 1.dns解析 2.tcp連線 3.傳送http請求 4.伺服器處理請求並返回http報文 5.瀏覽器解析渲染頁面 6.連線結束 dns解析是將網域名稱轉換成ip的過程,從使用者在瀏覽器位址列輸入...
從輸入URL到頁面載入發生了什麼
最近在進行前端面試方面的一些準備，看了網上許多相關的文章，發現有乙個問題始終繞不開 在瀏覽器中輸入url到整個頁面顯示在使用者面前時這個過程中到底發生了什麼。仔細思考這個問題，發現確實很深，這個過程涉及到的東西很多。這個問題的回答真的能夠很好的考驗乙個web工程師的水平，於是我自問自答一番。總體來說...
從輸入URL到頁面載入發生了什麼
tcp連線 傳送http請求 伺服器處理請求並返回http報文 瀏覽器解析渲染頁面 連線結束 系統快取主要存在 etc hosts linux系統 中 http請求 2xx 成功 表示請求已被成功接收 理解 接受。3xx 重定向 要完成請求必須進行更進一步的操作。4xx 客戶端錯誤 請求有語法錯誤或...