資訊專欄INFORMATION COLUMN
摘要：模塊和將下面的渲染機制，安全機制，插件機制等等隱藏起來，提供一個接口層。進行網頁的渲染進程，可能有多個。最后進程將結果由線程傳遞給進程最后，進程接收到結果并將結果繪制出來。
這是之前在簡書上面的處女作，也搬過來了，以后就一直在 segmentfault 上面寫文章了，webkit技術內幕-朱永盛是我大四買的書，很舊的一本書了，當時只看了一點點，一直沒繼續看完它，現在才看完，，，說來慚愧。
瀏覽器內核瀏覽器中，內核模塊（渲染引擎）作用是把HTML頁面轉變為可視化，可聽化的圖像結果。
下面我們來逐步打開渲染引擎這個黑盒：
渲染引擎模塊及其依賴模塊html解釋器是將HTML文本解釋成DOM，CSS是為DOM的各個元素對象計算出樣式信息，從而為計算最后網頁的布局提供基礎，JavaScript可以解釋JavaScript代碼并通過DOM接口和CSSOM接口來修改網頁內容和樣式信息
網頁加載及渲染過程首先是網頁內容，加載完輸入到HTML解釋器，解釋后構成DOM樹，這期間如果遇到JavaScript代碼就交給JavaScript引擎去處理，如果網頁中包含CSS，就交給CSS解釋器；DOM樹簡歷的時候，渲染引擎接收來自CSS解釋器的樣式信息，構建一個新的你日不會吐模型，該模型由布局模塊計算模型內部各個元素的位置和大小信息
為了簡便起見，下文將網頁加載過程及渲染過程統稱為渲染過程，將其分為三個階段：從網頁URL到構建DOM樹；構建webkit繪圖上下文；生成最終的圖像。
第一階段較簡單可跳過，第二階段具體過程：
CSS文件被CSS解釋器解釋成內部表示結構
CSS解釋器工作完之后，在DOM樹構建RenderObject樹
RenderObject節點仔創建的同時，webkit會根據網頁的層次結構創建RenderLayer樹，同時構建一個虛擬的繪圖上下文。
細細道來：
對于head，script，display:none等等之外的‘可視節點’，webkit會為他們建立相應的RenderObject對象，一個RenderObject對象報錯了微會之DOM借點所需要的各種信息，比如樣式布局信息。這些RenderObject對象和DOM節點對象類似，也夠成一棵新樹：RenderObject樹，HTMLDocument節點對應RenderView節點，RenderView節點是RenderObject樹的根節點。
另外，網頁是有層次結構的，webkit會創建相應的RenderLayer對象，當某些類型RenderObject節點或者具有某些CSS樣式的RenderObject節點出現的時候，webkit就會創建RenderLayer對象。所以說RenderLayer樹是基于RenderObject樹建立起來的一顆新樹，并且RenderLayer節點和RenderObject節點不是一一對應的關系。以下情況的RenderObject節點需要建立新的RenderLayer節點：
DOM樹的Document節點對應的RenderView節點
DOM樹中的HTML節點對應的RenderBlock節點
顯示指定css position（not static）的RenderObject節點
有透明效果的RenderObject節點
節點有移除overflow，alpha或者反射效果的，v街道
使用canvas2d 3d（webgl）的RenderObject節點
video節點對應的RenderObject節點
最后就是根據繪圖上下文來生成最終的圖像
基于Blink的Chromium瀏覽器架構 架構和模塊chromium模塊結構圖：
沒有Content模塊的話，也可以在Webkit的Chromium移植上渲染網頁內容，但是沒有辦法獲得沙箱模型，跨進程的GPU硬件加速機制，眾多的HTML5功能，因為這些功能是在Content層里面實現的。
Content模塊和Content API將下面的渲染機制，安全機制，插件機制等等隱藏起來，提供一個接口層。該接口目前被上層模塊或者其他項目使用，內部調用者包括Chromium瀏覽器，Content Shell，外部包括Chromium Embedded Framework，Opera瀏覽器等等。
Chromium瀏覽器和Content Shell是夠健在Content API之上的兩個‘瀏覽器’，Chromium具有瀏覽器完整的功能，也就是我們編譯出來能看到的瀏覽器式樣，content Shell是使用content API來包裝的一層簡單的殼，可以使用content模塊來渲染和顯示網頁內容。
content Shell的作用，其一可以測試content模塊的很多功能，比如渲染、硬件加速；其二是一個參考，被很多外部項目參考來開發基于content API的瀏覽器或者其他類型的項目。在Android上，其作用更大，因為chromium瀏覽器的部分代碼沒有開源，所以只能依賴于content Shell。
Android WebView其思想是利用chromium的實現來替換Android默認的webview。
多進程模型Browser進程：瀏覽器主進程，負責瀏覽器頁面的顯示，各個頁面的管理，所有其他類型進程的祖先，負責他們的創建和銷毀。
Render進行：網頁的渲染進程，可能有多個。
NPAPI插件進程
GPU進程：最多只有一個，GPU硬件加速打開時才會被創建。
Pepper插件進程
其他類型的進程，比如Linux的Zygote進程；Sandbox進程。
多線程模型每個進程內部都有很多線程，對于Browser進程，多線程的主要目的是為了保持用戶界面的高響應度，保證UI進程（主線程）不會被任何其他費時操作（比如本地文件讀寫，socket讀寫，數據庫操作）阻礙，從而影響了對用戶操作的響應；對于Render進程中，Chromium則不讓其他操作阻止渲染線程的快速執行，多核的話chromium會將渲染過程管線化，可以讓渲染的不同階段在不同的線程執行。
網頁加載和渲染過程在圖中模型下的基本工作方式有以下步驟：
Browser進程受到用戶的請求，首先由UI線程處理，而且將相應的任務轉給IO線程，他隨即將該任務傳遞給Render進程
Render進程的IO線程經過簡單解釋后交給渲染線程，渲染線程接受請求，加載網頁并且渲染網頁，其中可能需要Browser進程獲取資源和GPI進城來幫助渲染。最后Render進程將結果由IOS線程傳遞給Browser進程
最后，Browser進程接收到結果并將結果繪制出來。
本文主要是講webkit渲染模塊，若是對其他模塊有興趣的話，可以去當當或者京東上買來看看
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52742.html
摘要：但好在中，新增了屬性，可以使視頻內聯播放。以上為該案例主要需要解決的問題。補充資料視頻播放優化 showImg(https://segmentfault.com/img/bVJCVu?w=133&h=136); 以上為案例二維碼 首個H5案例解析 從頭開始分析 在 iOS 上，APP 都是使用的系統自帶的瀏覽器進行頁面渲染，video 播放視頻的效果是統一的，只需要考慮不同的 iOS ...
摘要：但好在中，新增了屬性，可以使視頻內聯播放。以上為該案例主要需要解決的問題。補充資料視頻播放優化 showImg(https://segmentfault.com/img/bVJCVu?w=133&h=136); 以上為案例二維碼 首個H5案例解析 從頭開始分析 在 iOS 上，APP 都是使用的系統自帶的瀏覽器進行頁面渲染，video 播放視頻的效果是統一的，只需要考慮不同的 iOS ...
摘要：由一道面試題引發的思考從用戶輸入瀏覽器輸入到頁面最后呈現有哪些過程一道很常規的題目，考的是基本網絡原理，和瀏覽器加載，過程。所以抽出時間研究下瀏覽器渲染頁面的過程。 由一道面試題引發的思考： 從用戶輸入瀏覽器輸入url到頁面最后呈現 有哪些過程？一道很常規的題目，考的是基本網絡原理，和瀏覽器加載css，js過程。 答案大致如下： 用戶輸入URL地址 瀏覽器解析URL解析出主機名 瀏覽...
摘要：在使用組件的進行組件實例化時，得到的便是其返回值。也就是說，如果其子組件的或發生改變時，只會取決于那個組件的方法的返回值。文章為本人原創，原文見本人個博淺析生命周期一淺析生命周期二 Overview 最近常有學習React相關的技術，寫了幾個React的小Demo，使用 React/Express 技術棧。實在太小，羞于拿出來細說。React 的確是一個值得追隨的技術。但React體系...
閱讀 2664·2021-11-24 09:38
閱讀 1979·2019-08-30 15:53
閱讀 1234·2019-08-30 15:44
閱讀 3229·2019-08-30 14:10
閱讀 3579·2019-08-29 16:29
閱讀 1800·2019-08-29 16:23
閱讀 1099·2019-08-29 16:20
閱讀 1472·2019-08-29 11:13
