最近在進行前端面試方面的一些準備，遇到了乙個經典前端問題，乙個url從輸入到頁面載入中間到底發生了什麼，以前也認真想過這個問題，但是當時回答的都不全面，現在來好好總結一下：
總體來說分為以下六個步驟：
1、dns解析
2、tcp連線
3、傳送http請求
4、伺服器處理請求並返回http報文
5、瀏覽器解析渲染頁面
6、連線結束
具體過程：
1、dns解析
dns解析是乙個遞迴查詢的過程
例如你在瀏覽器中輸入乙個www.google.com的ip位址，首先在本地網域名稱伺服器中查詢ip位址，如果沒有找到，本地網域名稱伺服器會向根網域名稱伺服器傳送乙個請求，如果根網域名稱伺服器也不儲存該網域名稱，本地網域名稱會向com頂級網域名稱伺服器傳送乙個請求，依次類推下去，直到最後本地網域名稱伺服器得到google的ip位址並把它快取到本地，供下次查詢使用（自己計算機上的hosts檔案就是網域名稱到ip的乙個對映，他可以不用去尋找網路上的dns解析），，從上述過程中，可以看出**的解析是乙個從右到左的過程：com->google.com->www.google.com，但是你是否發現少了點什麼，根網域名稱伺服器的解析過程呢？實際上，真正的**是www.google.com，並不是我多開啟乙個.，這個.對應的就是根網域名稱伺服器，預設情況下所有的**的最後一位都是.，即然是預設情況下，為了方便使用者，通常都會省略，瀏覽器在請求dns的時候會自動加上去，所有的**真正解析的過程為.->.com->google.com->www.google.com
dns優化
為了了解dns的過程，可以為我們帶來什麼?上文中請求道google的ip位址，經歷了8個步驟，這個步驟中存在多個請求（同時存在udp和tcp請求），為什麼有兩種請求方式呢）如果每次都經過這麼多步驟，是否太耗時間，如何減少該過程的步驟呢，那就是dns快取
dns快取
dns存在著多級快取，從離瀏覽器的距離排序的話，有以下幾種：瀏覽器快取，系統快取，路由快取，ips伺服器快取，根網域名稱伺服器快取，頂級網域名稱伺服器快取，主網域名稱伺服器快取
在你的chrome瀏覽器中輸入:chrome://dns/，你就可以看到chrome瀏覽器的dns快取
系統快取主要存在hosts檔案中
dns負載均衡
不知道大家有沒有思考過乙個問題，dns返回的ip位址石佛偶每次都一樣呢？如果每次都一樣是否說明你請求的資源都位於同一臺機器上面，那麼這台伺服器需要多高的效能和儲存才能滿足億萬請求呢？其實真是的網際網路世界背後存在成千上百的伺服器，大型的**甚至更多，在使用者眼裡，它需要的只是處理它的請求，哪台伺服器處理並不重要。dns可以返回乙個合適的機器的ip給使用者，例如可以根據每台伺服器的負載量，該機器離使用者地理位置的距離等，這種過程就是dns負載均衡，又可以叫做dns重定向，大家耳熟能詳的cdn就是利用dns的重定向技術，dns伺服器會返回乙個跟使用者最接近的點的ip位址給使用者，cdn節點的伺服器負責響應使用者的請求，提供所需的內容。
2、tcp連線
http協議是使用tcp作為其傳輸層協議的，當tcp出現瓶頸時，http也會受到影響
3、http協議
http報文是包裹在tcp報文中傳送的，伺服器端收到tcp報文時會解包提取出http報文，但是這個過程存在一定風險，http報文時明文，如果中間被擷取的話存在一些資訊洩露的風險，那麼在進入tcp報文之前對http做一次加密就可以解決這個問題了，https協議的本質就是http+ssl（or tls）。在http報文進入到tcp報文之前，先使用ssl對http報文進行加密，從網路層結構看他位於http協議與tcp協議之間。
https過程
https在傳輸資料之前需要客戶端與伺服器進行乙個握手(tls/ssl握手)，在握手過程中將確立雙方加密傳輸資料的密碼資訊，tls/ssl使用了非對稱加密，對稱加密及hash等，https相比http，雖然提供了安全保證，但是也勢必會帶來一些時間上的損耗，如握手和加密過程等，是否使用https需要根據具體情況在安全和效能方面做權衡。
http請求
傳送http請求的過程就是構建http請求報文並通過tcp協議中傳送到伺服器指定埠（http協議是80/8080，https埠是443）.http請求報文由三部分組成：請求行，請求報頭，請求正文。
請求行格式如下：
常用的方法有：get,post,put,delete,options,head
請求抱頭
請求報頭允許客戶端向伺服器傳遞請求的附加資訊和客戶端自身的資訊。客戶端並不一定特指瀏覽器，有時候也可以使用測試工具等
常見的請求報頭有：accept,accept-charset,accept-endding,accept-language,content-type,authorization,cookie,user-agent等。
accept用於指定客戶端用於接受哪些型別的資訊，accept-encoding與accept類似，它用於指定接受的編碼方式。connection設定為keep-alive用於告訴客戶端本次http請求結束之後並不需要關閉tcp連線，這樣可以使下次http請求使用相同的tcp通道，節省tcp連線建立的時間。
請求正文
4、伺服器處理請求並返回http報文
這些就是後端工程師眼中的http，後端從固定的埠接收到tcp報文開始，這一部分對應程式語言中的socket。它對tcp連線進行處理，對http協議進行解析，並按照報文格式進一步封裝成http request物件，供上層使用，這一部分工作一般是由web伺服器去進行，我們使用過的w惡霸伺服器又tomcat等
http響應報文也是由散步分組成的狀態碼、響應報頭、響應報文
狀態碼：
狀態碼是由三個數字組成的，第乙個數字定義了響應的類別，且有5種可能取值：
1xx:指示資訊-表示請求已接收，繼續處理
2xx:成功-表示請求已被成功接收
3xx:重定向-要完成請求必須進行更進一步的操作
4xx：客戶端錯誤-請求的語法錯誤或請求無法實現
5xx:伺服器端錯誤--伺服器未能實現合法的請求。
響應報文：
伺服器返回給瀏覽器的文字資訊，通常html、css、js、等檔案就放在這一部分
5、瀏覽器解析渲染頁面
瀏覽器收到html\css\js檔案後，它是如何把頁面呈現到螢幕上的？
瀏覽器是乙個邊解析邊渲染的過程。首先瀏覽器解析html檔案構建dom樹，然後解析css檔案構建渲染樹，等到渲染樹構建完成後，瀏覽器開始布局渲染樹並將其繪製到螢幕上，這個過程比較複雜，設計到兩個概念：reflow回流和repain重繪。dom節點中的各個元素都是以盒模型的形式存在的，這些都需要瀏覽器去計算其位置和大小等，這個過程稱為relow,當盒模型的位置大小和其他屬性，顏色，字型確定下來之後，瀏覽器便開始繪製內容了，這個過程稱為repain，頁面在首次載入時必然會經歷reflow和repain。這個過程是非常消耗效能的，尤其是在移動裝置上，他會破壞使用者體驗，有時會造成頁面卡頓，所以我們盡可能減少reflow和repain。
js解析是由瀏覽器中的js解析引擎完成的，js是單執行緒執行，也就是說，在同乙個時間內只能做一件事，所有的任務都需要排隊，前乙個任務結束，後乙個任務才開始，但是又存在某些任務比較耗時，如io讀寫，所以需要一種機制可以先執行排在後面的任務，這就是：同步任何和非同步任務，js的執行機制可以看作是乙個主線程加上乙個任務佇列，同步任務就是放在主線程上執行的任務，非同步任務是放在任務佇列中的任務。所有的同步任務在主線程上執行，形成乙個執行棧，非同步任務有了執行結果就會在任務佇列中放置乙個事件；指令碼執行時先依次執行執行棧，然後會從任務佇列裡提取事件，執行任務佇列中的任務，這個過程是不斷重複的，所以又叫事件迴圈。
web優化
了解上面過程的目的就是為了web優化，在談到web優化之前，我們回到乙個更原始的問題，web前端的本質是什麼？我的理解是：將資訊快速並友好的展示給使用者並能夠與使用者進行互動，快速的意思就是在盡可能短的時間內完成頁面的載入，試想一下如果你在**購買東西的時候，**頁面載入十幾秒才顯示出物品，這個時候你還有心情去購物嗎？怎麼快速完成頁面的載入呢？最簡單的答案就是參照雅虎34條軍規，這34條軍規實際上就是圍繞請求過程進行的一些優化方式。
如何盡快地載入資源呢?答案就是不能從網路中載入的資源就不從網路中載入，當我們合理使用快取，將資源放在瀏覽器端，這是最快的方式，如果資源必須從網路中獲取，則要考慮縮短連線時間，即dns優化部分，減少響應內容大小，即對內容進行壓縮。另一方面，如果載入的資源數比較少的話，額可以快速的響應使用者，當資源到達瀏覽器之後，瀏覽器開始盡心那個解析渲染，瀏覽器中最耗時間的就是reflow，所以圍繞這一部分可以澳旅如何減少reflow的次數。
乙個網頁開啟的全過程
從使用者在瀏覽器輸入網域名稱開始，到web頁面載入完畢，這是乙個說複雜不複雜，說簡單不簡單的過程，下文暫且把這個過程稱作網頁載入過程。下面我將依靠自己的經驗，總結一下整個過程。如有錯漏，歡迎指正。閱讀本文需要讀者已有一定的計算機知識，了解tcp dns等。眾所周知，開啟乙個網頁的過程中，瀏覽器會因頁...
訪問乙個網頁的全過程
前言 訪問目標位址有兩種方式 使用目標ip位址訪問。由於ip位址是一堆數字不方便記憶，於是有了網域名稱這種字元型標識。使用網域名稱訪問。網域名稱解析就是網域名稱到ip位址的轉換過程，網域名稱的解析工作由dns伺服器完成。比如說訪問 baidu.com 1.如果是網域名稱，首先將網域名稱解析成ip 計...
訪問乙個網頁的全過程詳解！
開啟乙個網頁的過程中，瀏覽器會因頁面上的css js image等靜態資源會多次發起連線請求，所以我們暫且把這個網頁載入過程分成兩部分 1 html jsp php aspx 頁面載入 假設存在簡單的nginx負載均衡 2 css js image等 網頁靜態資源載入 假設使用cdn 什麼是dns解...