成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

webkit渲染機制淺析

Cobub / 1694人閱讀

摘要：模塊和將下面的渲染機制，安全機制，插件機制等等隱藏起來，提供一個接口層。進行網(wǎng)頁的渲染進程，可能有多個。最后進程將結(jié)果由線程傳遞給進程最后，進程接收到結(jié)果并將結(jié)果繪制出來。

這是之前在簡書上面的處女作，也搬過來了，以后就一直在 segmentfault 上面寫文章了，webkit技術(shù)內(nèi)幕-朱永盛是我大四買的書，很舊的一本書了，當時只看了一點點，一直沒繼續(xù)看完它，現(xiàn)在才看完，，，說來慚愧。

瀏覽器內(nèi)核

瀏覽器中，內(nèi)核模塊（渲染引擎）作用是把HTML頁面轉(zhuǎn)變?yōu)榭梢暬陕牷膱D像結(jié)果。

下面我們來逐步打開渲染引擎這個黑盒：

渲染引擎模塊及其依賴模塊

html解釋器是將HTML文本解釋成DOM，CSS是為DOM的各個元素對象計算出樣式信息，從而為計算最后網(wǎng)頁的布局提供基礎(chǔ)，JavaScript可以解釋JavaScript代碼并通過DOM接口和CSSOM接口來修改網(wǎng)頁內(nèi)容和樣式信息

網(wǎng)頁加載及渲染過程

首先是網(wǎng)頁內(nèi)容，加載完輸入到HTML解釋器，解釋后構(gòu)成DOM樹，這期間如果遇到JavaScript代碼就交給JavaScript引擎去處理，如果網(wǎng)頁中包含CSS，就交給CSS解釋器；DOM樹簡歷的時候，渲染引擎接收來自CSS解釋器的樣式信息，構(gòu)建一個新的你日不會吐模型，該模型由布局模塊計算模型內(nèi)部各個元素的位置和大小信息

為了簡便起見，下文將網(wǎng)頁加載過程及渲染過程統(tǒng)稱為渲染過程，將其分為三個階段：從網(wǎng)頁URL到構(gòu)建DOM樹；構(gòu)建webkit繪圖上下文；生成最終的圖像。

第一階段較簡單可跳過，第二階段具體過程：

CSS文件被CSS解釋器解釋成內(nèi)部表示結(jié)構(gòu)

CSS解釋器工作完之后，在DOM樹構(gòu)建RenderObject樹

RenderObject節(jié)點仔創(chuàng)建的同時，webkit會根據(jù)網(wǎng)頁的層次結(jié)構(gòu)創(chuàng)建RenderLayer樹，同時構(gòu)建一個虛擬的繪圖上下文。

細細道來：

對于head，script，display:none等等之外的‘可視節(jié)點’，webkit會為他們建立相應(yīng)的RenderObject對象，一個RenderObject對象報錯了微會之DOM借點所需要的各種信息，比如樣式布局信息。這些RenderObject對象和DOM節(jié)點對象類似，也夠成一棵新樹：RenderObject樹，HTMLDocument節(jié)點對應(yīng)RenderView節(jié)點，RenderView節(jié)點是RenderObject樹的根節(jié)點。

另外，網(wǎng)頁是有層次結(jié)構(gòu)的，webkit會創(chuàng)建相應(yīng)的RenderLayer對象，當某些類型RenderObject節(jié)點或者具有某些CSS樣式的RenderObject節(jié)點出現(xiàn)的時候，webkit就會創(chuàng)建RenderLayer對象。所以說RenderLayer樹是基于RenderObject樹建立起來的一顆新樹，并且RenderLayer節(jié)點和RenderObject節(jié)點不是一一對應(yīng)的關(guān)系。以下情況的RenderObject節(jié)點需要建立新的RenderLayer節(jié)點：

DOM樹的Document節(jié)點對應(yīng)的RenderView節(jié)點

DOM樹中的HTML節(jié)點對應(yīng)的RenderBlock節(jié)點

顯示指定css position（not static）的RenderObject節(jié)點

有透明效果的RenderObject節(jié)點

節(jié)點有移除overflow，alpha或者反射效果的，v街道

使用canvas2d 3d（webgl）的RenderObject節(jié)點

video節(jié)點對應(yīng)的RenderObject節(jié)點

最后就是根據(jù)繪圖上下文來生成最終的圖像

基于Blink的Chromium瀏覽器架構(gòu) 架構(gòu)和模塊

chromium模塊結(jié)構(gòu)圖：

沒有Content模塊的話，也可以在Webkit的Chromium移植上渲染網(wǎng)頁內(nèi)容，但是沒有辦法獲得沙箱模型，跨進程的GPU硬件加速機制，眾多的HTML5功能，因為這些功能是在Content層里面實現(xiàn)的。

Content模塊和Content API將下面的渲染機制，安全機制，插件機制等等隱藏起來，提供一個接口層。該接口目前被上層模塊或者其他項目使用，內(nèi)部調(diào)用者包括Chromium瀏覽器，Content Shell，外部包括Chromium Embedded Framework，Opera瀏覽器等等。

Chromium瀏覽器和Content Shell是夠健在Content API之上的兩個‘瀏覽器’，Chromium具有瀏覽器完整的功能，也就是我們編譯出來能看到的瀏覽器式樣，content Shell是使用content API來包裝的一層簡單的殼，可以使用content模塊來渲染和顯示網(wǎng)頁內(nèi)容。

content Shell的作用，其一可以測試content模塊的很多功能，比如渲染、硬件加速；其二是一個參考，被很多外部項目參考來開發(fā)基于content API的瀏覽器或者其他類型的項目。在Android上，其作用更大，因為chromium瀏覽器的部分代碼沒有開源，所以只能依賴于content Shell。

Android WebView其思想是利用chromium的實現(xiàn)來替換Android默認的webview。

多進程模型

Browser進程：瀏覽器主進程，負責瀏覽器頁面的顯示，各個頁面的管理，所有其他類型進程的祖先，負責他們的創(chuàng)建和銷毀。

Render進行：網(wǎng)頁的渲染進程，可能有多個。

NPAPI插件進程

GPU進程：最多只有一個，GPU硬件加速打開時才會被創(chuàng)建。

Pepper插件進程

其他類型的進程，比如Linux的Zygote進程；Sandbox進程。

多線程模型

每個進程內(nèi)部都有很多線程，對于Browser進程，多線程的主要目的是為了保持用戶界面的高響應(yīng)度，保證UI進程（主線程）不會被任何其他費時操作（比如本地文件讀寫，socket讀寫，數(shù)據(jù)庫操作）阻礙，從而影響了對用戶操作的響應(yīng)；對于Render進程中，Chromium則不讓其他操作阻止渲染線程的快速執(zhí)行，多核的話chromium會將渲染過程管線化，可以讓渲染的不同階段在不同的線程執(zhí)行。

網(wǎng)頁加載和渲染過程在圖中模型下的基本工作方式有以下步驟：

Browser進程受到用戶的請求，首先由UI線程處理，而且將相應(yīng)的任務(wù)轉(zhuǎn)給IO線程，他隨即將該任務(wù)傳遞給Render進程

Render進程的IO線程經(jīng)過簡單解釋后交給渲染線程，渲染線程接受請求，加載網(wǎng)頁并且渲染網(wǎng)頁，其中可能需要Browser進程獲取資源和GPI進城來幫助渲染。最后Render進程將結(jié)果由IOS線程傳遞給Browser進程

最后，Browser進程接收到結(jié)果并將結(jié)果繪制出來。

本文主要是講webkit渲染模塊，若是對其他模塊有興趣的話，可以去當當或者京東上買來看看

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/52742.html

相關(guān)文章

  • H5實例教學--微信內(nèi)嵌視頻1（案例淺析）

    摘要：但好在中，新增了屬性，可以使視頻內(nèi)聯(lián)播放。以上為該案例主要需要解決的問題。補充資料視頻播放優(yōu)化 showImg(https://segmentfault.com/img/bVJCVu?w=133&h=136); 以上為案例二維碼 首個H5案例解析 從頭開始分析 在 iOS 上，APP 都是使用的系統(tǒng)自帶的瀏覽器進行頁面渲染，video 播放視頻的效果是統(tǒng)一的，只需要考慮不同的 iOS ...

    quietin 評論0 收藏0

  • H5實例教學--微信內(nèi)嵌視頻1（案例淺析）

    摘要：但好在中，新增了屬性，可以使視頻內(nèi)聯(lián)播放。以上為該案例主要需要解決的問題。補充資料視頻播放優(yōu)化 showImg(https://segmentfault.com/img/bVJCVu?w=133&h=136); 以上為案例二維碼 首個H5案例解析 從頭開始分析 在 iOS 上，APP 都是使用的系統(tǒng)自帶的瀏覽器進行頁面渲染，video 播放視頻的效果是統(tǒng)一的，只需要考慮不同的 iOS ...

    Riddler 評論0 收藏0

  • 瀏覽器渲染頁面過程與頁面優(yōu)化

    摘要：由一道面試題引發(fā)的思考從用戶輸入瀏覽器輸入到頁面最后呈現(xiàn)有哪些過程一道很常規(guī)的題目，考的是基本網(wǎng)絡(luò)原理，和瀏覽器加載，過程。所以抽出時間研究下瀏覽器渲染頁面的過程。 由一道面試題引發(fā)的思考： 從用戶輸入瀏覽器輸入url到頁面最后呈現(xiàn) 有哪些過程？一道很常規(guī)的題目，考的是基本網(wǎng)絡(luò)原理，和瀏覽器加載css，js過程。 答案大致如下： 用戶輸入URL地址 瀏覽器解析URL解析出主機名 瀏覽...

    djfml 評論0 收藏0

  • 淺析 React 生命周期

    摘要：在使用組件的進行組件實例化時，得到的便是其返回值。也就是說，如果其子組件的或發(fā)生改變時，只會取決于那個組件的方法的返回值。文章為本人原創(chuàng)，原文見本人個博淺析生命周期一淺析生命周期二 Overview 最近常有學習React相關(guān)的技術(shù)，寫了幾個React的小Demo，使用 React/Express 技術(shù)棧。實在太小，羞于拿出來細說。React 的確是一個值得追隨的技術(shù)。但React體系...

    lansheng228 評論0 收藏0

發(fā)表評論

0條評論

Cobub

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<