首先，判斷是不是https的，如果是，則https其實是http + ssl / tls 兩部分組成，也就是在http上又加了一層處理加密資訊的模組。服務端和客戶端的資訊傳輸都會通過tls進行加密，所以傳輸的資料都是加密後的資料。
進行三次握手，建立tcp連線。
第一次握手：建立連線。客戶端傳送連線請求報文段，將syn位置為1，sequence number為x；然後，客戶端進入syn_send狀態，等待伺服器的確認；
第二次握手：伺服器收到syn報文段。伺服器收到客戶端的syn報文段，需要對這個syn報文段進行確認，設定acknowledgment number為x+1(sequence number+1)；同時，自己還要傳送syn請求資訊，將syn位置為1，sequence number為y；伺服器端將上述所有資訊放到乙個報文段（即syn+ack報文段）中，一併傳送給客戶端，此時伺服器進入syn_recv狀態；
第三次握手：客戶端收到伺服器的syn+ack報文段。然後將acknowledgment number設定為y+1，向伺服器傳送ack報文段，這個報文段傳送完畢以後，客戶端和伺服器端都進入established狀態，完成tcp三次握手。
ssl握手過程
第一階段 建立安全能力 包括協議版本 會話id 密碼構件 壓縮方法和初始隨機數
第二階段 伺服器傳送證書 金鑰交換資料和證書請求，最後傳送請求-相應階段的結束訊號
第三階段 如果有證書請求客戶端傳送此證書 之後客戶端傳送金鑰交換資料 也可以傳送證書驗證訊息
第四階段 變更密碼構件和結束握手協議
ack：此標誌表示應答域有效，就是說前面所說的tcp應答號將會包含在tcp資料報中；有兩個取值：0和1，為1的時候表示應答域有效，反之為0。tcp協議規定，只有ack=1時有效，也規定連線建立後所有傳送的報文的ack必須為1。
syn(synchronization)：在連線建立時用來同步序號。當syn=1而ack=0時，表明這是乙個連線請求報文。對方若同意建立連線，則應在響應報文中使syn=1和ack=1. 因此, syn置1就表示這是乙個連線請求或連線接受報文。
fin(finis）即完，終結的意思， 用來釋放乙個連線。當 fin = 1 時，表明此報文段的傳送方的資料已經傳送完畢，並要求釋放連線。tcp連線建立後，瀏覽器就可以利用http／https協議向伺服器傳送請求了。伺服器接受到請求，就解析請求頭，如果頭部有快取相關資訊如if-none-match與if-modified-since，則驗證快取是否有效，若有效則返回狀態碼為304，若無效則重新返回資源，狀態碼為200.
這裡有發生的乙個過程是http快取，是乙個常考的考點，大致過程如圖：
tcp連線建立後，瀏覽器就可以利用http／https協議向伺服器傳送請求了。伺服器接受到請求，就解析請求頭，如果頭部有快取相關資訊如if-none-match與if-modified-since，則驗證快取是否有效，若有效則返回狀態碼為304，若無效則重新返回資源，狀態碼為200.
這裡有發生的乙個過程是http快取，是乙個常考的考點，大致過程如圖：
第一次分手：主機1（可以使客戶端，也可以是伺服器端），設定sequence number和acknowledgment number，向主機2傳送乙個fin報文段；此時，主機1進入fin_wait_1狀態；這表示主機1沒有資料要傳送給主機2了；
第二次分手：主機2收到了主機1傳送的fin報文段，向主機1回乙個ack報文段，acknowledgment number為sequence number加1；主機1進入fin_wait_2狀態；主機2告訴主機1，我"同意"你的關閉請求；
第三次分手：主機2向主機1傳送fin報文段，請求關閉連線，同時主機2進入last_ack狀態；
第四次分手：主機1收到主機2傳送的fin報文段，向主機2傳送ack報文段，然後主機1進入time_wait狀態；主機2收到主機1的ack報文段以後，就關閉連線；此時，主機1等待2msl後依然沒有收到回覆，則證明server端已正常關閉，那好，主機1也可以關閉連線了。
按照渲染的時間順序，流水線可分為如下幾個子階段：構建 dom 樹、樣式計算、布局階段、分層、柵格化和顯示。如圖：
渲染程序將 html 內容轉換為能夠讀懂dom 樹結構。
渲染引擎將 css 樣式表轉化為瀏覽器可以理解的stylesheets，計算出 dom 節點的樣式。
建立布局樹，並計算元素的布局資訊。
對布局樹進行分層，並生成分層樹。
為每個圖層生成繪製列表，並將其提交到合成執行緒。合成執行緒將圖層分圖塊，並柵格化將圖塊轉換成位圖。
合成執行緒傳送繪製圖塊命令給瀏覽器程序。瀏覽器程序根據指令生成頁面，並顯示到顯示器上。
構建 dom 樹
瀏覽器從網路或硬碟中獲得html位元組資料後會經過乙個流程將位元組解析為dom樹,先將html的原始位元組資料轉換為檔案指定編碼的字元,然後瀏覽器會根據html規範來將字串轉換成各種令牌標籤，如html、body等。最終解析成乙個樹狀的物件模型，就是dom樹。
具體步驟：
轉碼（bytes -> characters）—— 讀取接收到的 html 二進位制資料，按指定編碼格式將位元組轉換為 html 字串
tokens 化（characters -> tokens）—— 解析 html，將 html 字串轉換為結構清晰的 tokens，每個 token 都有特殊的含義同時有自己的一套規則
構建 nodes（tokens -> nodes）—— 每個 node 都新增特定的屬性（或屬性訪問器），通過指標能夠確定 node 的父、子、兄弟關係和所屬 treescope（例如：iframe 的 treescope 與外層頁面的 treescope 不同）
構建 dom 樹（nodes -> dom tree）—— 最重要的工作是建立起每個結點的父子兄弟關係
樣式計算
渲染引擎將 css 樣式表轉化為瀏覽器可以理解的 stylesheets，計算出 dom 節點的樣式。
css 樣式**主要有 3 種，分別是通過 link 引用的外部 css 檔案、style標籤內的 css、元素的 style 屬性內嵌的 css。,其樣式計算過程主要為：
css 文字中有很多屬性值，如 2em、blue、bold，這些型別數值不容易被渲染引擎理解，所以需要將所有值轉換為渲染引擎容易理解的、標準化的計算值，這個過程就是屬性值標準化。處理完成後再處理樣式的繼承和層疊，有些文章將這個過程稱為cssom的構建過程。
頁面布局
布局過程，即排除 script、meta 等功能化、非視覺節點，排除 display: none 的節點，計算元素的位置資訊，確定元素的位置，構建一棵只包含可見元素布局樹。如圖：
其中，這個過程需要注意的是回流和重繪，關於回流和重繪，詳細的可以看我另一篇文章《瀏覽器相關原理(面試題)詳細總結二》，這裡就不說了～
生成分層樹
頁面中有很多複雜的效果，如一些複雜的 3d 變換、頁面滾動，或者使用 z-indexing 做 z 軸排序等，為了更加方便地實現這些效果，渲染引擎還需要為特定的節點生成專用的圖層，並生成一棵對應的圖層樹（layertree），如圖：
如果你熟悉 ps，相信你會很容易理解圖層的概念，正是這些圖層疊加在一起構成了最終的頁面影象。在瀏覽器中，你可以開啟 chrome 的"開發者工具"，選擇"layers"標籤。渲染引擎給頁面分了很多圖層，這些圖層按照一定順序疊加在一起，就形成了最終的頁面。
柵格化合成執行緒會按照視口附近的圖塊來優先生成位圖，實際生成點陣圖的操作是由柵格化來執行的。所謂柵格化，是指將圖塊轉換為位圖。如圖：
通常乙個頁面可能很大，但是使用者只能看到其中的一部分，我們把使用者可以看到的這個部分叫做視口（viewport）。在有些情況下，有的圖層可以很大，比如有的頁面你使用滾動條要滾動好久才能滾動到底部，但是通過視口，使用者只能看到頁面的很小一部分，所以在這種情況下，要繪製出所有圖層內容的話，就會產生太大的開銷，而且也沒有必要。
顯示最後，合成執行緒傳送繪製圖塊命令給瀏覽器程序。瀏覽器程序根據指令生成頁面，並顯示到顯示器上，渲染過程完成。
**前端q
從獲取到URL到頁面渲染完成瀏覽器執行過程
此文大體介紹瀏覽器從獲取到url到頁面渲染完成，瀏覽器都做了那些操作。具體內容不做深入的剖析。文章中會提到的一些網路傳輸方面的概念，現在不過多解釋 因我也沒有學習透徹 所以只記錄大概的渲染過程，以及過程中作為前台牽扯到web優化的方面。從獲取到url到頁面渲染完成過程如下 此過程涉及http狀態碼 ...
從輸入url到瀏覽器載入過程
從輸入url到頁面載入發生了什麼 最近在進行前端面試方面的一些準備，看了網上許多相關的文章，發現有乙個問題始終繞不開 在瀏覽器中輸入url到整個頁面顯示在使用者面前時這個過程中到底發生了什麼。仔細思考這個問題，發現確實很深，這個過程涉及到的東西很多。這個問題的回答真的能夠很好的考驗乙個web工程師的...
瀏覽器輸入 URL 到頁面載入完成，簡單介紹
從瀏覽器輸入 url 到頁面載入完的過程中都發生了什麼事情？這是乙個複雜的過程，但是對於了解瀏覽器的工作原理有一定的幫助，參考網上的資料，我今天簡單的介紹一下！例如 協議部分 www.haorooms com 資源路徑 post css div juzhong二 如果位址不是乙個ip位址，通過dns...