當我們在瀏覽器輸入網址後；瀏覽器都會做哪些事情才會讓我們看見頁面呢？

• 首先在客戶端瀏覽器輸入網址：www.baidu.com
• 客戶端瀏覽器向伺服器傳送請求 HTTP REQUEST（省略很多細節步驟）
• 伺服器端儲存著百度官網專案的原始碼
• 伺服器收到請求後：伺服器端把指定文中的程式碼返回給客戶端 HTTP RESPONSE

  

  

一、程式/執行緒

一個程式中，會包含零到多個執行緒

1、程式 process

• 電腦端安裝很多的應用軟體，每當執行一個應用程式，都相當於開闢了一個程式
• 而對於瀏覽器來說，每新建一個頁卡訪問一個頁面，都是新開闢一個程式

2、執行緒 thread

• 每一個程式當中可能還會同時做多件事情，如果同時做多件事情，則會開闢多個執行緒

二、瀏覽器常用執行緒

瀏覽器是“多執行緒”的，但是JS渲染或者頁面渲染是“單執行緒”的

• GUI 渲染執行緒
  • 渲染和繪製頁面
• JS 引擎執行緒
  • 執行和渲染JS程式碼
• 事件管控和觸發執行緒
• 定時器管控和觸發執行緒
• 非同步 HTTP 請求執行緒
• ......

三、同步/非同步

1、同步程式設計

• 單執行緒
• 一次只能處理一件事情，當前這件事情處理完，才能繼續處理下一件事情

2、非同步程式設計

• 同時可以進行好幾件事情（一般是基於多執行緒併發完成的）
• JS 中的非同步程式設計，有自己一些特殊的處理方式
  • 佇列 Queue
  • 事件迴圈 EventLoop

3、三種 CSS 樣式的渲染區別

GUI 渲染頁面時，當遇到其他請求時的兩種處理方法：

• 讓 GUI 執行緒自己去拿：
  • 在CSS檔案沒有從伺服器載入回來之前，下面的程式碼不會繼續渲染
• 在開闢一個執行緒，專門去伺服器載入CSS檔案：
  • 不用管CSS是否載入回來，GUI執行緒繼續向下渲染

-1).在渲染過程中遇到 <link> 引入式樣式 : 非同步操作

• 瀏覽器會新開闢一個 HTTP 的請求執行緒，專門去伺服器載入 CSS 樣式內容
• 此時 GUI 執行緒還可以繼續向下渲染（不用管 CSS 是否回來）

-2).如果遇到的是 @import 匯入式樣式 : 同步操作

• 不會開闢新的執行緒去載入 CSS ，而是當前執行緒去載入
• 這樣只要 CSS 沒有載入回來，下面的程式碼都不會繼續渲染（阻礙頁面渲染）

<link>和 @import 相比較： link 會提高頁面渲染速度

-3).內嵌式

上面雖然說link會提高頁面渲染速度 ,但是當 CSS 程式碼較少的情況下，我們最好採用內嵌式（把CSS 和 HTML 寫在一起），這樣只要把 HTML 載入回來，CSS 也回來了

任何形式的HTTP請求都一定會有時間和效能的消耗

• 前提是CSS程式碼少；
• 程式碼多的情況下，如果還是和HTML放在一起，那麼第一次請求HTML的速度都會變慢，也就得不償失了；

四、瀏覽器渲染頁面的步驟

1、生成 DOM 樹

渲染了所有的 HTML 標籤

• 轉換
  • 通過 HTTP 返還的首先是十六進位制的編碼位元組資料
  • 拿到位元組資料後，瀏覽器會通過內部的機制，把資料轉換成我們能看到的程式碼
• 令牌
  • 按照 W3C 規範（第五代版本的規範H5）的規則,轉換成我們能看懂的標籤
• 詞法分析
  • 通過轉換後的標籤，進行詞法解析，生成DOM節點
• DOM構建
  • 最後通過查詢每個DOM節點之間的關係，生成DOM樹

    

圖片來源：圖片摘自網路，如有侵權，聯絡刪除

2、生成 CSSOM 樹

請求回來 CSS 後，渲染完 CSS

同生成DOM樹一樣的過程生成CSSOM樹

圖片來源：圖片摘自網路，如有侵權，聯絡刪除

3、DOM 樹 + CSSOM 樹 => RENDER-TREE（渲染樹）

圖片來源：圖片摘自網路，如有侵權，聯絡刪除

4、 佈局（Layout）或 重排/迴流（reflow）

按照 RENDER-TREE 在裝置的視口中進行結構和位置的相關計算=>佈局（Layout）或 重排/迴流（reflow）

5、繪製（painting）或 柵格化（rasterizing）

根據渲染樹以及迴流得到的幾何資訊，得到節點的絕對畫素=>繪製（painting）或 柵格化（rasterizing）

思維導圖