從輸入URL到頁面渲染

url請求過程

瀏覽器收到http響應

reference

前人栽樹，後人乘涼，以下為學習筆記。

從輸入url到頁面展示，這中間發生了什麼?

這是一道經典面試題，涉及到了網路、作業系統、web 等一系列的知識。

當我們在位址列中輸入url並按下回車後，瀏覽器裡發生第一件事是觸發解除安裝事件，即 beforeunload 事件。這也是當前頁面最後的機會，你可以最後彈個彈窗嘗試阻止使用者關閉頁面。此時使用者可以選擇取消導航，那麼瀏覽器就會停止處理後續操作。

瀏覽器程序會通過程序間通訊（ipc）把 url 請求傳送至網路執行緒，網路執行緒接收到 url 請求後，會在這裡發起真正的 url 請求流程。

網路執行緒會查詢本地快取是否快取了該資源。如果有快取資源，那麼直接返回資源給瀏覽器程序；如果在快取中沒有查詢到資源，那麼直接進入網路請求流程。

進入網路請求的第一步，是進行dns解析，獲取url對應的伺服器 ip 位址。

獲取到 ip 位址後，瀏覽器向該 ip 的伺服器發起tcp連線，雙方進行tcp三次握手。

在三次握手成功建立 tcp 連線後，瀏覽器向伺服器傳送http請求。

伺服器接收到請求資訊後，會根據請求資訊生成響應資料（包括響應行、響應頭和響應體等資訊），並發給網路執行緒。

當網路執行緒接收到伺服器響應資訊之後，就開始解析響應頭內容了。

(1). 基本過程

瀏覽器會將html解析成乙個dom樹。

將css解析成 css rule tree 。

每個css檔案都被分析成乙個stylesheet物件，每個物件都包含css規則。css規則物件包含對應於css語法的選擇器和宣告物件以及其他物件。

渲染樹構建完成後，每個節點都是可見節點並且都含有其內容和對應規則的樣式。這也是渲染樹與dom樹的最大區別所在。渲染樹是用於顯示，那些不可見的元素當然就不會在這棵樹**現了，譬如。除此之外，display等於none的也不會被顯示在這棵樹裡頭，但是visibility等於hidden的元素是會顯示在這棵樹裡頭的。

有了render tree，瀏覽器已經能知道網頁中有哪些節點、各個節點的css定義以及他們的從屬關係.

在繪製階段，遍歷渲染樹，呼叫渲染器的paint()方法在螢幕上顯示其內容。渲染樹的繪製工作是由瀏覽器的ui後端元件完成的。

(2). 從渲染程序的角度來看

當 chrome 的瀏覽器網路執行緒拿到乙個 html 資源後，將會給該資源分配乙個渲染程序。這個渲染程序往往是瀏覽器新建立的乙個程序，除非該 url 是從同一**（same-site）中開啟，那麼他們將共享同乙個渲染程序。

網路執行緒接收到 html 資料，瀏覽器通知渲染程序，渲染程序與網路執行緒建立連線，解析 html 資料並載入需要的資源，接收資料完畢後，通知瀏覽器程序更新介面。

舉例webkit渲染的過程：

瀏覽器是乙個邊解析邊渲染的過程。首先瀏覽器解析html檔案構建dom樹，然後解析css檔案構建渲染樹，等到渲染樹構建完成後，瀏覽器開始布局渲染樹並將其繪製到螢幕上。

js的解析是由瀏覽器中的js解析引擎完成的。

js是單執行緒執行，但是又存在某些任務比較耗時，如io讀寫等，所以需要一種機制可以先執行排在後面的任務，這就是：同步任務(synchronous)和非同步任務(asynchronous)。js的執行機制就可以看做是乙個主線程加上乙個任務佇列(task queue)。同步任務就是放在主線程上執行的任務，非同步任務是放在任務佇列中的任務。所有的同步任務在主線程上執行，形成乙個執行棧;非同步任務有了執行結果就會在任務佇列中放置乙個事件；指令碼執行時先依次執行執行棧，然後會從任務佇列裡提取事件，執行任務佇列中的任務，這個過程是不斷重複的，所以又叫做事件迴圈(event loop)。

當伺服器給瀏覽器傳送js,css這些檔案時，會告訴瀏覽器這些檔案什麼時候過期（使用cache-control或者expire），瀏覽器可以把檔案快取到本地，當第二次請求同樣的檔案時，如果不過期，直接從本地取就可以了。如果過期了，瀏覽器就可以詢問伺服器端，檔案有沒有修改過？（依據是上一次伺服器傳送的last-modified和etag），如果沒有修改過（304 not modified），還可以使用快取。否則的話伺服器就會被最新的檔案發回到瀏覽器。

從輸入url到頁面渲染出來過程

在瀏覽器輸入url後的訪問 url的組成協議 網域名稱 有時候也是ip,埠號 數字表示，若為http的預設值 80 可省略 路徑 以 字元區別路徑中的每乙個目錄名稱 查詢引數 get模式的窗體引數，以 字元為起點，每個引數以 隔開，再以 分開引數名稱與資料，通常以utf8的url編碼，避開字元衝突的...

從輸入URL到渲染頁面發生了什麼？

網域名稱解析 發起tcp三次握手建立連線 建立連線後發起http請求 伺服器響應請求，瀏覽器獲取html原始碼 瀏覽器渲染頁面 然後先上一張比較直觀的圖 因為 http是不是一種面向連線的協議，在應用層中，僅僅是生成了http請求的資訊和資料，但無法直接傳送，所以才需要先建立tcp連線。tcp在將h...

從輸入URL到頁面渲染發生了什麼

例如 從輸入到頁面渲染發生了下方如圖的事情。詳細的過程 1 客戶端將url輸入到瀏覽器位址列，向dns伺服器請求獲取指定網域名稱的ip位址 2 dns伺服器解析從客戶端發來的網域名稱，獲取到對應的ip位址，將ip位址傳回到客戶端 3 客戶端獲取到ip位址後，在應用層按照http協議，生成針對目標we...