Please enable JavaScript.

Coggle requires JavaScript to display documents.

瀏覽器(Chrome) - Coggle Diagram

- - - - 主執行緒
        
        處理從伺服器傳送來的大部分程式碼
      - 工作執行緒
        
        如果有使用web worker或service worker，部分JS將由工作執行緒處理
      - 合成執行緒
      - 光柵執行緒
    - - 將HTML、CSS、JS轉換為使用者可以與之互動的網頁
  - - - 收到導航提交並開始接受HTML資料時，主執行緒開始解析HTML，並將其轉換為DOM
    - - 主執行緒按處理順序逐個請求圖片、CSS及JS等外部資源
      - 預載入掃描器(Preload scanner)
        
        為加快速度，同時運行
        
        若HTML中有<img> 或 <link> 之類的內容，PS查看HTML解析生成的標記，並在瀏覽器處理程式中向網路執行緒傳送請求
    - - HTML 解析器遇到 <script> 標記時，暫停解析HTML，載入、解析並執行JS，因為JS可能會改變DOM
    - - <script>: async或defer。非同步載入運行JS，不阻塞解析
        
        <link rel="preload"> 告知瀏覽器當前導航肯定需要該資源，盡快下載
  - - - 渲染管道中最重要的事情是：每個步驟中，前一個操作的結果用於後一個操作建立新資料
      - 顯示器每秒刷新60次，產生流暢動畫
        
        主執行緒渲染操作過程，若運行JS會阻塞
        
        可將JS拆小塊並使用requestAnimationFrame
  - - - 光柵化
        
        把上述資訊轉換為螢幕上的像素
    - - 將頁面各個部份分層，分別光柵化，並在合成執行緒合成為頁面的技術
      - 如果發生滾動，由於圖層已經光柵化，因此它所要做的只是合成一個新幀。動畫也可以以相同的方式（移動圖層和合成新幀）實現
    - - 主執行緒遍歷布局樹建立圖層樹
    - - 建立圖層樹並確定繪製順序後，主執行緒就會將該資訊提交給合成執行緒
      - 一個圖層可能很大，因此合成執行緒分塊後傳送到光柵執行緒
        
        合成執行緒會給不同的光柵執行緒設定優先度，以便viewport內畫面可先被光柵化
      - 光柵執行緒光柵化每個小塊(點陣圖)後，將其儲存在GPU
      - 一旦光柵化，合成執行緒收集這些塊資訊(繪製四邊形draw quads)，建立合成幀(compositor frame)
        
        繪製四邊形(Draw quads)
        
        包含諸如圖塊在記憶體中的位置，以及合成時繪製圖塊在頁面中的位置等資訊
        
        合成幀(compositor frame)
        
        一個繪製四邊形的集合，代表一個頁面的一幀
      - 合成幀通過 IPC（處理程式間通訊）提交給瀏覽器處理程式，此時，可以從 UI 執行緒或其他外掛的渲染處理程式新增另一個合成幀。這些合成器幀被傳送到 GPU 然後在螢幕上顯示
      - 如果接收到滾動事件，合成執行緒會建立另一個合成幀傳送到 GPU
- - - - 合成執行緒會將頁面裡新增了事件監聽的區域標記為之
      - 若輸入事件發生在此區，合成執行緒可以確定應將其發往主執行緒處理
      - 若事件發生在此區外，合成執行緒則確定無需等待主執行緒，可繼續合成新幀
      - 注意事項
        
        因應此特性，應避免將事件綁在頂層，以避免流暢度降低
        
        事件監聽新增一個 passive:true 選項，將這種負面效果最小化，合成執行緒不等後繼續建立新幀
  - - - 獲取幀內事件
- - - - UI執行緒
        
        繪製瀏覽器按鈕及輸入欄
      - 網路執行緒
        
        處理網路棧
        
        從網路獲取資料
      - 儲存執行緒
        
        控制檔案訪問
  - - - 網址列輸入的是「搜尋查詢」或「URL網址」
    - - UI執行緒告知網路執行緒導航位址
        
        網路執行緒透過適當的協議(DNS查找、TLS連接)建立連線、請求資料
    - - 網路執行緒查看響應的content-type及payload(body)
        
        若為HTML檔，把資料傳給渲染處理程式，並進行SafeBrowsing及CORB檢查
        
        若為壓縮檔或其他檔案，意味著其為下載請求，將資料傳給下載管理器
    - - 當UI執行緒傳送URL請求給網路執行緒時，與此同時UI執行緒會主動尋找或開啟一個渲染處理程式
    - - 資料與渲染處理程式已就緒，瀏覽器處理程式傳送IPC到渲染處理程式以提交導航
      - 傳遞資料流，渲染處理程式保持接收HTML資料
      - 當瀏覽器處理程式收到渲染處理程式已經提交的確認消息後，導航完畢並開始載入與解析文件
      - 網址列更新，相關UI反映新頁面的站點資訊
        session歷史紀錄被更新
    - - 渲染完畢時，渲染處理程式傳送IPC給瀏覽器處理程式
        
        頁面所有的 frame 的 onload 事件已經觸發和執行完畢後發生
        
        UI執行緒停止頁籤上的載入動畫
  - - - 瀏覽器處理程式檢查當前渲染的站點是否關心bedoreunload事件，接著再進行導航
      - 若為渲染處理程式啟動導航，會先檢查beforeunload事件，接著發起導航請求給瀏覽器處理程式
  - - - 是一種通過與 service worker 啟動平行載入資源來加速此過程的機制
      - 用一個頭部來標記這些請求，允許伺服器決定為這些請求傳送不同的內容；例如，只更新資料而不是完整文件
- - - - 應用程式的執行程式
        
        作業系統提供其記憶體
    - - 存在於處理程式並執行程式任意部分
  - - - 主要處理程式種類
        
        瀏覽器處理程式
        
        控制應用中"Chrome"部分
        
        包含網址列、書籤、上下一頁
        
        網路請求、檔案訪問
        
        渲染處理程式
        
        控制標籤頁內部網站展示
        
        外掛處理程式
        
        控制站點使用的任意外掛，如Flash
        
        GPU處理程式
        
        處理獨立於其它處理程序的 GPU 任務
        
        被分成不同處理程式，因為 GPU 處理來自多個不同應用的請求並繪製在相同表面
      - 優點
        
        處理程式互相獨立，單一處理程式失效不影響其他的
        
        安全性與沙合化
      - 每個iframe的渲染處理程式-站點隔離