**
我的github(ps:希望star):
這是一道經典的面試題，這道面試題不光前端面試會問到，後端面試也會被問到。這道題沒有乙個標準的答案，它涉及很多的知識點，面試官會通過這道題了解你對哪一方面的知識比較擅長，然後繼續追問看看你的掌握程度。當然我寫的這些也只是我的一些簡單的理解，從前端的角度出發，我覺得首先回答必須包括幾個基本的點，然後在根據你的理解深入回答。
1、瀏覽器的位址列輸入url並按下回車。
2、瀏覽器查詢當前url是否存在快取，並比較快取是否過期。
3、dns解析url對應的ip。
4、根據ip建立tcp連線（三次握手）。
5、http發起請求。
6、伺服器處理請求，瀏覽器接收http響應。
7、渲染頁面，構建dom樹。
8、關閉tcp連線（四次揮手）。
說完整個過程的幾個關鍵點後我們再來展開的說一下。
一、url
我們常見的rul是這樣的:這個網域名稱由三部分組成：協議名、網域名稱、埠號，這裡埠是預設所以隱藏。除此之外url還會包含一些路徑、查詢和其他片段，例如：我們最常見的的協議是http協議，除此之外還有加密的https協議、ftp協議、file協議等等。url的中間部分為網域名稱或者是ip，之後就是埠號了。通常埠號不常見是因為大部分的都是使用預設埠，如http預設埠80，https預設埠443。說到這裡可能有的面試官會問你同源策略，以及更深層次的跨域的問題，我今天就不在這裡展開了。
二、快取
說完url我們說說瀏覽器快取,http快取有多種規則，根據是否需要重新向伺服器發起請求來分類，我將其分為強制快取，對比快取。
強制快取判斷http首部字段：cache-control，expires。
expires是乙個絕對時間，即伺服器時間。瀏覽器檢查當前時間，如果還沒到失效時間就直接使用快取檔案。但是該方法存在乙個問題：伺服器時間與客戶端時間可能不一致。因此該欄位已經很少使用。
cache-control中的max-age儲存乙個相對時間。例如cache-control: max-age = 484200，表示瀏覽器收到檔案後，快取在484200s內均有效。 如果同時存在cache-control和expires，瀏覽器總是優先使用cache-control。
對比快取通過http的last-modified，etag欄位進行判斷。
last-modified是第一次請求資源時，伺服器返回的字段，表示最後一次更新的時間。下一次瀏覽器請求資源時就傳送if-modified-since欄位。伺服器用本地last-modified時間與if-modified-since時間比較，如果不一致則認為快取已過期並返回新資源給瀏覽器；如果時間一致則傳送304狀態碼，讓瀏覽器繼續使用快取。
etag：資源的實體標識（雜湊字串），當資源內容更新時，etag會改變。伺服器會判斷etag是否發生變化，如果變化則返回新資源，否則返回304。
三、dns網域名稱解析
我們知道在位址列輸入的網域名稱並不是最後資源所在的真實位置，網域名稱只是與ip位址的乙個對映。網路伺服器的ip位址那麼多，我們不可能去記一串串的數字，因此網域名稱就產生了，網域名稱解析的過程實際是將網域名稱還原為ip位址的過程。
如果沒找到則會查詢本地dns解析器快取，如果查詢到則返回。
如果還是沒有找到則會查詢本地dns伺服器，如果查詢到則返回。
最後迭代查詢，按根域伺服器 ->頂級域,.cn->第二層域，hb.cn ->子域，www.hb.cn的順序找到ip位址。
四、tcp連線
在通過第一步的dns網域名稱解析後，獲取到了伺服器的ip位址，在獲取到ip位址後，便會開始建立一次連線，這是由tcp協議完成的，主要通過三次握手進行連線。
第一次握手： 建立連線時，客戶端傳送syn包（syn=j）到伺服器，並進入syn_sent狀態，等待伺服器確認；
第二次握手： 伺服器收到syn包，必須確認客戶的syn（ack=j+1），同時自己也傳送乙個syn包（syn=k），即syn+ack包，此時伺服器進入syn_recv狀態；
第三次握手： 客戶端收到伺服器的syn+ack包，向伺服器傳送確認包ack(ack=k+1），此包傳送完畢，客戶端和伺服器進入established（tcp連線成功）狀態，完成三次握手。
完成三次握手，客戶端與伺服器開始傳送資料。
五、瀏覽器向伺服器傳送http請求
完整的http請求包含請求起始行、請求頭部、請求主體三部分。
六、瀏覽器接收響應
伺服器在收到瀏覽器傳送的http請求之後，會將收到的http報文封裝成http的request物件，並通過不同的web伺服器進行處理，處理完的結果以http的response物件返回，主要包括狀態碼，響應頭，響應報文三個部分。
狀態碼主要包括以下部分
1xx：指示資訊–表示請求已接收，繼續處理。
2xx：成功–表示請求已被成功接收、理解、接受。
3xx：重定向–要完成請求必須進行更進一步的操作。
4xx：客戶端錯誤–請求有語法錯誤或請求無法實現。
5xx：伺服器端錯誤–伺服器未能實現合法的請求。
響應頭主要由cache-control、 connection、date、pragma等組成。
響應體為伺服器返回給瀏覽器的資訊，主要由html，css，js，檔案組成。
七、頁面渲染
如果說響應的內容是html文件的話，就需要瀏覽器進行解析渲染呈現給使用者。整個過程涉及兩個方面：解析和渲染。在渲染頁面之前，需要構建dom樹和cssom樹。
在瀏覽器還沒接收到完整的html檔案時，它就開始渲染頁面了，在遇到外部鏈入的指令碼標籤或樣式標籤或時，會再次傳送http請求重複上述的步驟。在收到css檔案後會對已經渲染的頁面重新渲染，加入它們應有的樣式，檔案載入完立刻顯示在相應位置。在這一過程中可能會觸發頁面的重繪或重排。這裡就涉及了兩個重要概念：reflow和repaint。
reflow，也稱作layout，中文叫回流，一般意味著元素的內容、結構、位置或尺寸發生了變化，需要重新計算樣式和渲染樹，這個過程稱為reflow。
repaint，中文重繪，意味著元素發生的改變只是影響了元素的一些外觀之類的時候（例如，背景色，邊框顏色，文字顏色等），此時只需要應用新樣式繪製這個元素就ok了，這個過程稱為repaint。
所以說reflow的成本比repaint的成本高得多的多。dom樹里的每個結點都會有reflow方法，乙個結點的reflow很有可能導致子結點，甚至父點以及同級結點的reflow。
下面這些動作有很大可能會是成本比較高的：
基本上來說，reflow有如下的幾個原因：
八、關閉tcp連線或繼續保持連線
通過四次揮手關閉連線(fin ack, ack, fin ack, ack)。
第一次揮手是瀏覽器發完資料後，傳送fin請求斷開連線。
第二次揮手是伺服器傳送ack表示同意，如果在這一次伺服器也傳送fin請求斷開連線似乎也沒有不妥，但考慮到伺服器可能還有資料要傳送，所以伺服器傳送fin應該放在第三次揮手中。
這樣瀏覽器需要返回ack表示同意，也就是第四次揮手。
從輸入url到頁面載入完成發生了什麼
從前端的角度來看，從輸入url到頁面載入完成發生了什麼呢？總結地來看就是這樣幾點 瀏覽器的位址列輸入url並按下回車 瀏覽器查詢當前url是否存在快取，並比較快取是否過期 dns解析url對應的ip 根據ip位址建立tcp連線 http發起請求 伺服器處理請求，瀏覽器接收http響應 構建dom樹，...
從輸入URL到頁面載入完成
例如 協議部分 http www.guokr.com 資源路徑 question 554991 2 如果位址不是乙個ip位址，通過dns 網域名稱系統 將該位址解析成ip位址。ip位址對應著網路上一台計算機，dns伺服器本身也有ip，你的網路設定包含dns伺服器的ip。例如 www.guokr.co...
《從輸入URL到頁面載入完成發生了什麼》學習過程
發現自己有以下幾個問題不理解。a.資料在路由器之間是傳輸的?b.tcp工作原理。對於其他步驟，雖然不了解具體細節，但是了解大概的工作原理。比如第4步伺服器的處理，可以模擬現有業務的架構 第5步瀏覽器渲染頁面，可以模擬現有業務被瀏覽器請求後的處理。2.分步驟學習。要了解網絡卡是怎麼封裝資料的，必須了解...