總體來說分為以下幾個過程:
1.dns解析
2.tcp連線
3.傳送http請求
4.伺服器處理請求並返回http報文
5.瀏覽器解析渲染頁面
連線結束
2.tcp連線
http協議是使用tcp作為其傳輸層協議的，當tcp出現瓶頸時，http也會受到影響。
3.傳送http請求。
其實這部分又可以稱為前端工程師眼中的http，它主要發生在客戶端。傳送http請求的過程就是構建http請求報文並通過tcp協議中傳送到伺服器指定埠(http協議80/8080, https協議443)。http請求報文是由三部分組成: 請求行, 請求報頭和請求正文。
4.伺服器處理請求並返回http報文
自然而然這部分對應的就是後端工程師眼中的http。後端從在固定的埠接收到tcp報文開始，這一部分對應於程式語言中的socket。它會對tcp連線進行處理，對http協議進行解析，並按照報文格式進一步封裝成http request物件，供上層使用。這一部分工作一般是由web伺服器去進行，我使用過的web伺服器有tomcat, jetty和netty等等。
http響應報文也是由三部分組成: 狀態碼, 響應報頭和響應報文。
5.瀏覽器解析渲染頁面
瀏覽器是乙個邊解析邊渲染的過程。首先瀏覽器解析html檔案構建dom樹，然後解析css檔案構建渲染樹，等到渲染樹構建完成後，瀏覽器開始布局渲染樹並將其繪製到螢幕上。這個過程比較複雜，涉及到兩個概念: reflow(回流)和repain(重繪)。dom節點中的各個元素都是以盒模型的形式存在，這些都需要瀏覽器去計算其位置和大小等，這個過程稱為relow;當盒模型的位置,大小以及其他屬性，如顏色,字型,等確定下來之後，瀏覽器便開始繪製內容，這個過程稱為repain。頁面在首次載入時必然會經歷reflow和repain。reflow和repain過程是非常消耗效能的，尤其是在移動裝置上，它會破壞使用者體驗，有時會造成頁面卡頓。所以我們應該盡可能少的減少reflow和repain。
js的解析是由瀏覽器中的js解析引擎完成的。js是單執行緒執行，也就是說，在同乙個時間內只能做一件事，所有的任務都需要排隊，前乙個任務結束，後乙個任務才能開始。但是又存在某些任務比較耗時，如io讀寫等，所以需要一種機制可以先執行排在後面的任務，這就是：同步任務(synchronous)和非同步任務(asynchronous)。js的執行機制就可以看做是乙個主線程加上乙個任務佇列(task queue)。同步任務就是放在主線程上執行的任務，非同步任務是放在任務佇列中的任務。所有的同步任務在主線程上執行，形成乙個執行棧;非同步任務有了執行結果就會在任務佇列中放置乙個事件；指令碼執行時先依次執行執行棧，然後會從任務佇列裡提取事件，執行任務佇列中的任務，這個過程是不斷重複的，所以又叫做事件迴圈(event loop)。
從輸入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 客戶端錯誤 請求有語法錯誤或...