web前端之瀏覽器： 知識彙總
一、URL到頁面
**準備階段： **
輸入URL，Enter進入查找
瀏覽器在本地查找host文件，匹配對應的IP； 找到返回瀏覽器並緩存
沒有，則進入路由查找； 找到返回瀏覽器並緩存
再沒有，再進入公網DNS根目錄 ； 找到返回瀏覽器並緩存
進入，等待發送請求，建立tcp/ip 傳輸連接， 若沒有等候的請求，則直接發送
**服務器階段： **
根據請求，查找數據，返回數據
渲染階段：
逐行解析HTML， 遇到同步的請求代碼，則發送數據請求，cssLink， js， 圖片，視頻等；
構建htmlDOM-tree， CSSDOM ，
render-tree
2、html頁面渲染:
- 發送請求，服務器返回HTML，瀏覽器解析HTML，發出相應css的和js請求
- html 不是緩存的
- css下載完成，構建dom樹，構建cssDOM完成後，結合DOM生成Rendering Tree，
- css是由單獨的下載線程異步下載的
- css加載不會阻塞DOM樹的解析
- css加載會阻塞DOM樹的渲染
- css加載會阻塞後面js語句的執行
- js下載完成，操作DOM，更新DOM；在html解析過程中或是DOM和CSSDOM結構構建中，同步請求加載JS，解析js都會阻塞瀏覽器的構和渲染
- 解析到js會, js引擎會使html解析線程暫停，html頁面停止解析
- js請求加載完畢， js執行完畢， js引擎停止， html線程繼續工作解析
3、異步請求，頁面更新
重排， 重繪
4、web瀏覽器引擎
- 瀏覽器內核（瀏覽器渲染引擎）：
瀏覽器內核可以分爲這四種：Trident（IE）、Gecko（火狐）、Blink（Chrome、Opera）、Webkit（Safari）
- 瀏覽器js引擎
5、瀏覽器本地存儲
indexDB， storage，cookie
6、瀏覽器緩存
解析url， 查找緩存，發送請求
6.1、解析url，驗證是否有緩存標識信息
- 有，進一步驗證是否過期
- 未過期，則返回緩存的資源
6.2 查找緩存：
- Service Worker （瀏覽器獨立線程）
- Memory Cache （內存中）
- Disk Cache （磁盤）
- Push Cache （推送緩存，session）
7、瀏覽器的事件輪詢
- 同步任務，解析執行語句
- 同步執行棧空， 去輪詢異步隊列
- 檢查微任務
- 檢查宏任務
- 一般性異步任務
定時器： 解析時，是現在瀏覽器中開闢一個獨立計時環境， 在設定時間結束後，再自行加入異步輪詢隊列，所以定時器的回調函數執行順序，主要與設定時間，和輪詢隊列決定；
8、TTFB：
TTFB是“最初的網絡請求被髮起”到“從服務器接收到第一個字節前”所花費的毫秒數。
9、timechart: (以可並行)
blocked： 預處理： 緩存查詢， 網絡阻塞
DNS lookup： 域名IP查詢 （瀏覽器生命週期內只查詢解析一次）
connect： TCP建立連接的時間
send： 請求開始，到發送完的時間
wait： 接收服務器響應的第一個字節的時間，可以代表服務器的處理的時間
Receive：從接收第一個字節的時間， 接收完成
TTFB：是“最初的網絡請求被髮起”到“從服務器接收到第一個字節前”所花費的毫秒數；即： DNS lookup~wait
network： 更網絡相關的時間，TTFB+Rececive
**優化建議： **
https： 減少重定向
https： 減少請求，就會對上面的階段減少，也會減少瀏覽器重繪重排；提升用戶體驗
圖片合併： 減少服務器查找時間，IO時間
10、新版 Timing 表
Queued： 請求解析到的事件
Startlled ： 開始進入線程的時間
Resource Scheduling 資源拍排程
Queueing： 排程中的時間
Connection Start
Stalled： 預處理時間
DNS Lookup： 域名映射IP時間
initial connection： 初始化連接時間
SSL： 安全套接字時間
Request sent 請求發送時間
Waiting（TTFB）： 服務器查詢時間
Content Download： 資源下載時間
11、瀏覽器5個常駐線程：
js引擎分配的線程
GUI渲染頁面的線程
瀏覽器事件線程
瀏覽器定時器觸發線程
瀏覽器http請求線程
其他插件線程