幾個問題： 1. 以上這段代碼的邏輯？ 2. 返回的字符串該如何解析？ 3. 想讓返回的字符串呈現為圖像，怎么做？ <br> # 遠程主機響應 ## HTTP協議 #### 請求報文格式：   #### 響應報文格式：  <br> <br> # 網頁內容的組成 * doctype：提供瀏覽器的html版本信息 * head：html頭部 * meta：元數據信息 * charset：此特性聲明當前文檔所使用的字符編碼 * http-equiv：客戶端行為，如渲染模式，緩存等 * name[keywords]：搜索引擎關鍵字 * name[description]：搜索引擎描述 * name[viewport]：瀏覽器視口設置 * link * script：需要在body前完成加載或運行的腳本 * body：html實體 * script：需要在body解析時加載或運行的腳本 <br> <br> # 渲染需要做的工作  上圖表示了渲染引擎的一般渲染過程，虛線表示該階段所依賴的外部模塊(不屬于渲染引擎) 重要組件： HTML解釋器：解釋HTML文本的解釋器。HTML文本->DOM樹 CSS解釋器：遇到級聯樣式時，需要使用級聯樣式表解釋器，為DOM對象計算出樣式信息 JS引擎：遇到js代碼時，需要使用js解釋器，并使得js代碼有調用DOM接口和CSSOM接口的能力 布局：結合CSS，計算出每個DOM對象的大小位置信息 繪圖：將經過布局計算的DOM節點繪制成圖像 <br> ## 思考 1. 通過響應的內容，我們可以看到內容中還存在許多外聯資源，瀏覽器是如何處理的？ 2. 著名的優化：“css放在頭部，js放在尾部”，為什么？ 3. 瀏覽器在渲染之前或之后還要做哪些事情？ 4. 移動端的瀏覽器和PC端的瀏覽器是否相同？ <br> # 瀏覽器內核架構 ## 回答上一節 1. 不同的外鏈資源，webkit中右不同的資源加載器，當瀏覽器解析到URL地址時，調用特定的資源加載器，如果不是特殊資源(js)，加載過程不會阻礙渲染過程 2. 一般來說css資源不會阻礙渲染過程，但是js資源在瀏覽器會阻礙渲染過程的進行，如果放在頭部，渲染過程會暫停，造成“白屏”，但現代瀏覽器的優化已經做得很好了，所以當渲染被阻塞時，瀏覽器會開啟新的線程繼續渲染。 3. 渲染之前需要加載資源，渲染之后在DOM或者CSS變化后，重新進行布局計算和重渲染操作。 4. 功能基本相同，但所運行的操作系統不同，渲染機制有些差異 ## 內核架構 根據上面問題回答我們會發現，webkit僅僅包含渲染功能是不夠的，因為它需要獲取網絡資源，支持不同的瀏覽器，支持不同的操作系統，同樣還要包含調試工具。 <br> 所以我們應該給出一張更全的webkit架構圖 <br> <br>  虛線框表示該部分模塊在不同瀏覽器使用webkit的實現是不一樣的，實線框是基本一致的。 ## Chromium架構(chrome的開源版本，激進的版本，平常用的chrome是穩定的版本) 基于webkit內核就可以構建瀏覽器應用，了解著名的chromium瀏覽器對我們的web開發也有很多啟發。 1. 除去webkit內核完成的功能，瀏覽器的工作有哪些？ 2. 進程是什么？ 3. IPC是什么？ 4. 線程是什么？ 5. 線程同步是什么？ #### 現代瀏覽器的工作 * 資源管理： * 多頁面管理：也就是多個標簽頁的管理 * 插件和拓展：如flash，chrome拓展程序 * 賬戶和同步 * 安全機制 * 多系統支持 #### 進程和線程 * 進程：操作系統對一個正在運行的程序的抽象。你可以查看進程占用CPU，內存的大小。 * 線程，組成進程的執行單位 * 進程通訊：進程間傳輸數據(交換信息) * 線程同步：  上圖是IPC通訊(進程間的通訊)，總得來說，Chromium多進程架構為 * 父進程：Browser，負責管理整個瀏覽器的狀態，運行UI，消息派發（如申請文件資源）。 * 子進程： * Render，負責渲染網頁，于Webkit（Blink）交互，向外（Browser、GPU）發送請求。 * GPU，當GPU硬件加速時會打開 <br> #### 多進程架構的目的所在 1. 職責分離，故障范圍小 2. 隔離性 3. 性能 <br>