关于浏览器输入一个网址后页面经历的过程总结
瀏覽器進程
瀏覽器輸入一個網址后的主流程
一、用戶輸入
根據以下規(guī)則，把用戶輸入的內容加上協(xié)議，合成為完整的 URL。
判斷輸入的關鍵字是搜索內容，還是請求的 URL
如果是搜索內容：使用瀏覽器默認的搜索引擎，來合成新的帶搜索關鍵字的 URL。
如果是地址：添加協(xié)議頭等信息
二、網絡請求
瀏覽器進程通過IPC進程協(xié)議與網絡進程通信，讓網絡進程開始請求：
檢查緩存，如果有緩存則直接返回
瀏覽器發(fā)送請求前，根據請求頭的expires和cache-control判斷是否命中（包括是否過期）強緩存策略，如果命中，直接從緩存獲取資源，并不會發(fā)送請求。如果沒有命中，則進入下一步。
DNS解析，獲取真實IP地址
TCP三次握手
第一次握手
客戶端向服務端發(fā)送連接請求報文段。該報文段中包含自身的數據通訊初始序號。請求發(fā)送后，客戶端便進入 SYN-SENT 狀態(tài)，x 表示客戶端的數據通信初始序號。
第二次握手
服務端收到連接請求報文段后，如果同意連接，則會發(fā)送一個應答，該應答中也會包含自身的數據通訊初始序號，發(fā)送完成后便進入 SYN-RECEIVED 狀態(tài)。
第三次握手
當客戶端收到連接同意的應答后，還要向服務端發(fā)送一個確認報文。客戶端發(fā)完這個報文段后便進入ESTABLISHED 狀態(tài)，服務端收到這個應答后也進入 ESTABLISHED 狀態(tài)，此時連接建立成功。
HTTPS握手（HTTPS協(xié)議需要）
客戶端發(fā)送第一個隨機值client-random，需要的協(xié)議和加密方式
服務端收到客戶端的隨機值，自己也產生第二個隨機值service-random，并根據客戶端需要的協(xié)議和加密方式來使用對應的方式，發(fā)送自己的證書（如果需要驗證客戶端證書需要說明）
客戶端收到服務端的證書并驗證是否有效，驗證通過會通過證書的公鑰加密client-random + service-random再生成第三個隨機值pre-master并發(fā)送給服務端。
服務端收到加密過的隨機值pre-master，會使用私鑰解密pre-master獲得3個隨機值后，按照之前規(guī)定的加密方式，生成密鑰master secret 并發(fā)送確認消息給瀏覽器。
這時候客戶端也將擁有的三個隨機值client-random、service-random、pre-maste，按照之前約定的加密方式生成密鑰master secret，接下來的通信就可以通過該密鑰來加密解密
構建與響應請求
發(fā)送請求
響應請求
三、渲染頁面
準備渲染進程
新增渲染進程（默認策略）
從一個頁面點擊打開了另一個非同源新頁面或者直接網站輸入打開新標簽頁面；比如打開QQ頁面，因為直接新增新標簽頁面，新增渲染進程
再從該頁面點擊新開標簽新聞頁，因為新增了不同源標簽頁（new.qq.com），所以新增渲染進程?
復用渲染進程
從一個頁面內點擊打開了另一個同源新頁面；
比如從一個網站點擊打開一個新標簽頁，該標簽頁同站，所以復用了進程。
比如從新聞頁面國際欄目點擊進入軍事欄目，沒有新增標簽頁，也是同站，所以復用進程。?
同源策略如下：
提交文檔
瀏覽器需要進行提交文檔的流程，所以輸入地址后，之前頁面是加載一會才更新為新頁面，具體流程如下：
渲染階段（瀏覽器核心中的核心）
構建DOM樹（主線程）
分為四個階段：
? ? ? ? 1. 輸入HTML文件；
????????2. 字節(jié)流轉換為Token：分為?Tag Token?和文本 Token。對應我們的起始標簽、終止標簽、和文本內容。
? ? ? ? 3. HTML解析器解析
? ? ? ? 4. 轉換輸出為document
樣式計算，生成樣式樹styleSheets（主線程）
????????1. 首先將 CSS 樣式轉換為?document里的?styleSheets，優(yōu)先級——元素style?>?<style>標簽內CSS?>?<link>引用的CSS文件。與 DOM 轉換為?TOKEN，styleSheets?才是瀏覽器能理解的數據結構。
????????2. 屬性值標準化
? ? ? ? 3. 進行樣式計算，基于繼承規(guī)則和層疊規(guī)則，確定樣式優(yōu)先級，為每個 DOM 生成一個?Computed?的樣式。
-
繼承規(guī)則：每一個節(jié)點都可能包含父節(jié)點的樣式——假設繼承了父屬性a，若對應一個dom有同一個屬性，記?b，如果?b的優(yōu)先級大于?a 那樣式就采用?b。
-
層疊規(guī)則：定義了如何合并來自多個源的屬性值的算法
布局階段，生成布局樹（主線程）
計算每一個 DOM 節(jié)點的位置信息，然后保存在布局樹中：
????????1. 遍歷DOM樹所有可見節(jié)點，會忽略不可見節(jié)點，比如head標簽、display：none的元素等；
? ? ? ? 2. 結合 computeStyle 進行布局計算， 創(chuàng)建布局樹。
圖層構建，生成圖層樹（主線程）
為了方便局部渲染，瀏覽器會根據布局數把展示的元素進行分層。
不是布局樹的每個節(jié)點都包含一個圖層，節(jié)點若沒有對應的層則從屬于父節(jié)點的圖層。
而節(jié)點是否創(chuàng)建新圖層的條件包括層疊上下文屬性——position: fixed，z-index，filter，opacity 以及文字過多需要剪裁。
可以在 chrome DevTools 的 Layers 查看分層信息：
圖層繪制階段，生成繪制列表（主線程）
簡單來說，圖層繪制階段就是生成由一系列繪制指令構成的指令表，提交給合成線程。流程如下：
點擊單個圖層，可以查看到繪制指令：
分塊（合成線程）
因為圖層大小可能遠大于視口的大小，所以合成線程會把土城分割層圖塊。
柵格化，生成位圖（合成線程）
柵格化簡單來說就是將圖塊轉換成位圖（瀏覽器渲染進程能理解的01集合），合成線程會按照視口附近的圖塊來優(yōu)先生成位圖。具體流程是：
-
每一個圖塊調用柵格化線程；
-
柵格化線程將圖塊繪制指令提交給GPU進程去生成位圖，并保存在GPU內存中。
合成與顯示（非主線程）
這是瀏覽器交接給用戶的最終階段：
? ? ? ? 1. 發(fā)送繪制命令：柵格化結束后，發(fā)送繪制圖塊命令--DrawQuad；
? ? ? ? 2. 合成繪制命令：由 viz 組件合成所有柵格線程的繪制命令；
? ? ? ? 3. 繪制：將頁面內容繪制到內存中，然后將內存顯示到屏幕上。
總結
渲染進程將 HTML 內容轉換為能夠讀懂的DOM 樹結構。
渲染引擎將 CSS 樣式表轉化為瀏覽器可以理解的styleSheets，計算出 DOM 節(jié)點的樣式，形成ComputedStyle。
創(chuàng)建布局樹，將元素的布局信息的信息保存在樹中。
對布局樹進行分層，并生成圖層樹。
為每個圖層生成繪制列表，并將其提交到合成線程。
合成線程將圖層分成圖塊，并在光柵化線程池中將圖塊轉換成位圖。
合成線程發(fā)送繪制圖塊命令DrawQuad給瀏覽器進程。
瀏覽器進程根據 DrawQuad 消息生成頁面，并顯示到顯示器上
概念補充
總結
以上是生活随笔為你收集整理的关于浏览器输入一个网址后页面经历的过程总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 机器学习之人脸识别(Face Recog
- 下一篇： 火狐浏览器翻译页面功能如何设置