學習筆記
使用者輸入
使用者在位址列按下回車，檢查輸入（關鍵字 or 符合 url 規則），組裝完整 url；
回車前，當前頁面執行 onbeforeunload 事件；
瀏覽器進入載入狀態。
url 請求
瀏覽器程序通過 ipc 把 url 請求傳送至網路程序；
查詢資源快取（有效期內）；
dns 解析（查詢 dns 快取）；
進入 tcp 佇列（單個網域名稱 tcp 連線數量限制）；
建立 tcp 連線（三次握手）；
https 建立 tls 連線（client hello, server hello, pre-master key 生成『對話金鑰』）；
傳送 http 請求（請求行[方法、url、協議]、請求頭 cookie 等、請求體 post）；
接受請求（響應行[協議、狀態碼、狀態訊息]、響應頭、響應體等）；
準備渲染程序
根據是否同一站點（相同的協議和根網域名稱），決定是否復用渲染程序。
提交文件
瀏覽器程序接受到網路程序的響應頭資料，向渲染程序傳送『提交文件』訊息；
渲染程序收到『提交文件』訊息後，與網路程序建立傳輸資料『管道』；
傳輸完成後，渲染程序返回『確認提交』訊息給瀏覽器程序；
瀏覽器接受『確認提交』訊息後，移除舊文件、更新介面、位址列，導航歷史狀態等；
此時標識瀏覽器載入狀態的小圓圈，從此前 url 網路請求時的逆時針選擇，即將變成順時針旋轉（進入渲染階段）。 渲染
渲染流水線
構建 dom 樹
輸入：html 文件；
處理：html 解析器解析；
輸出：dom 資料解構。
樣式計算
輸入：css 文字；
處理：屬性值標準化，每個節點具體樣式（繼承、層疊）；
輸出：stylesheets(cssom)。
布局(dom 樹中元素的計畫位置)
dom & cssom 合併成渲染樹；
布局樹（dom 樹中的可見元素）；
布局計算。 分層
特定節點生成專用圖層，生成一棵圖層樹（層疊上下文、clip，類似 photoshop 裡的圖層）；
擁有層疊上下文屬性（明確定位屬性、透明屬性、css 濾鏡、z-index 等）的元素會建立單獨圖層；
沒有圖層的 dom 節點屬於父節點圖層；
需要剪裁的地方也會建立圖層。
繪製指令
輸入：圖層樹；
渲染引擎對圖層樹中每個圖層進行繪製；
拆分成繪製指令，生成繪製列表，提交到合成執行緒；
輸出：繪製列表。 分塊
合成執行緒會將較大、較長的圖層（一屏顯示不完，大部分不在視口內）劃分為圖塊（tile, 256256, 512512）。
光柵化（柵格化）
在光柵化執行緒池中，將視口附近的圖塊優先生成位圖（柵格化執行該操作）；
快速柵格化：gpu 加速，生成位圖（gpu 程序）。
合成繪製
繪製圖塊命令——drawquad，提交給瀏覽器程序；
瀏覽器程序的 viz 元件，根據drawquad命令，繪製在螢幕上。
相關概念
重排更新了元素的幾何屬性（如寬、高、邊距）；
觸發重新布局，解析之後的一系列子階段；
更新完成的渲染流水線，開銷最大。 重繪
更新元素的繪製屬性（元素的顏色、背景色、邊框等）；
布局階段不會執行（無幾何位置變換），直接進入繪製階段。 合成
直接進入合成階段（例如css 的 transform 動畫）；
直接執行合成階段，開銷最小。
瀏覽器工作流程
首先我們必須明確一點就是 瀏覽器工作流程中採用流式處理，可以簡單的理解為一部分dom元素構造好後，去檢查它匹配到了那些css規則，而不是等整棵dom樹構建好後才去匹配css規則。其次，瀏覽器工作的大致流程是什麼呢？輸入url 即目的是使用http https協議，向伺服器請求頁面 將url變成字元流...
從輸入url到瀏覽器載入過程
從輸入url到頁面載入發生了什麼 最近在進行前端面試方面的一些準備，看了網上許多相關的文章，發現有乙個問題始終繞不開 在瀏覽器中輸入url到整個頁面顯示在使用者面前時這個過程中到底發生了什麼。仔細思考這個問題，發現確實很深，這個過程涉及到的東西很多。這個問題的回答真的能夠很好的考驗乙個web工程師的...
從輸入 URL 到瀏覽器渲染完成
首先，判斷是不是https的，如果是，則https其實是http ssl tls 兩部分組成，也就是在http上又加了一層處理加密資訊的模組。服務端和客戶端的資訊傳輸都會通過tls進行加密，所以傳輸的資料都是加密後的資料。進行三次握手，建立tcp連線。第一次握手 建立連線。客戶端傳送連線請求報文段，...