原文：http://yogurtcat.com/posts/cef/hello-cef.html

發(fā)表于:?2013-03-31 20:20???|??更多相關(guān)文章：?browser?CEF?Chrome?OSR?Webkit

---

CEF是什么

CEF是Chromium Embedded Framework的縮寫(xiě)，是個(gè)基于Google Chromium項(xiàng)目的開(kāi)源Web browser控件，支持Windows, Linux, Max平臺(tái)。除了提供C/C++接口外，也有其他語(yǔ)言的移植版。

因?yàn)榛贑hromium，所以CEF支持Webkit & Chrome中實(shí)現(xiàn)的HTML5的特性，并且在性能上面，也比較接近Chrome。

CEF還提供的如下特性：自定義插件、自定義協(xié)議、自定義JavaScript對(duì)象和擴(kuò)展；可控制的resource loading, navigation, context menus等等。

誰(shuí)在用CEF

讓我們通過(guò)一些實(shí)戰(zhàn)中的例子，來(lái)說(shuō)明大家都使用CEF做了什么：

• 各種瀏覽器

  早期的雙核瀏覽器(IE + Webkit)，有些使用了CEF來(lái)作為Webkit內(nèi)核瀏覽器控件。

  不過(guò)對(duì)于瀏覽器來(lái)說(shuō)，直接在Chrome上面擴(kuò)展，其實(shí)才是王道，大家現(xiàn)在都這么做了（各種極速瀏覽器）。

• Evernote Client (on Windows)

  Evernote允許用戶將網(wǎng)頁(yè)粘貼到筆記中，還提供了插件用來(lái)將網(wǎng)頁(yè)保存為筆記。

  那肯定是需要在Client上面可以正確的渲染頁(yè)面咯，這個(gè)任務(wù)就交給了CEF。

• GitHub Client (on Windows)

  GitHub也打包了libcef.dll，從表現(xiàn)上面看，用來(lái)展示項(xiàng)目的ReadMe頁(yè)面的，肯定是CEF，其他地方的UI，可能部分也是用頁(yè)面來(lái)實(shí)現(xiàn)的。

• QQ

  QQ很早之前就通過(guò)內(nèi)嵌IE來(lái)實(shí)現(xiàn)一些功能和界面。從去年開(kāi)始，QQ引入了CEF，對(duì)一些之前用IE的地方進(jìn)行了替換，這樣就可以使用一些基于Webkit的新特性，同時(shí)也獲得了速度、穩(wěn)定性、兼容性方面的優(yōu)勢(shì)。

• Adobe Edge Animate & Adobe Edge Reflow

  Adobe推出了一整套制作現(xiàn)代網(wǎng)頁(yè)(或者說(shuō)HTML5?)的工具，取名Edge。

  • Adobe Edge Animate，做動(dòng)畫(huà)用的，可以通過(guò)編輯時(shí)間線，創(chuàng)建原件(Edge Animate里面叫做symbol)，來(lái)實(shí)現(xiàn)復(fù)雜的動(dòng)畫(huà)。

  • Edge Reflow則是Design the responsive web. 有人翻譯為響應(yīng)式，其實(shí)就是自適應(yīng)了。

  上面兩款軟件，其基本面向的是Webkit內(nèi)核的瀏覽器，那么內(nèi)嵌一個(gè)Webkit內(nèi)核，來(lái)提供所見(jiàn)即所得的預(yù)覽、編輯界面就是必須的了。他們都使用了CEF。（后面會(huì)介紹CEF和純Webkit的差別）

• Q+

  Q+在Web App的概念下，為Web頁(yè)面提供了一個(gè)運(yùn)行環(huán)境(簡(jiǎn)單來(lái)說(shuō)就是：Client的一個(gè)框和一些可用的API)，支持IE和Webkit內(nèi)核。

  對(duì)Web開(kāi)發(fā)同學(xué)來(lái)說(shuō)，我們引入的Webkit內(nèi)核（實(shí)際上是CEF），無(wú)需考慮IE的版本兼容問(wèn)題，既提高了開(kāi)發(fā)效率，又可以利用一些新的HTML5特性。當(dāng)時(shí)Q+的應(yīng)用市場(chǎng)、消息中心、壁紙、音樂(lè)Widget等應(yīng)用都是基于Webkit內(nèi)核開(kāi)發(fā)的。

  Q+項(xiàng)目可以說(shuō)對(duì)CEF進(jìn)行了比較多的嘗試，比如：

  • 開(kāi)發(fā)的音樂(lè)Widget，就使用了HTML5的audio標(biāo)簽；

  • 一些應(yīng)用使用了HTML5的離線功能（就是配個(gè)manifest文件那個(gè)），當(dāng)然其中也遇到些曲折，收獲了不少經(jīng)驗(yàn)。

  • 打包的Webkit調(diào)試工具（Dev Tools）。

  • 自定義協(xié)議：比如對(duì)qplus://協(xié)議的訪問(wèn)，可以重定向到某個(gè)特殊文件夾之類的功能。

  • Off Screen Rendering（OSR，離屏渲染）：通過(guò)離屏渲染 + Windows的Layered Window，就制作了不規(guī)則的網(wǎng)頁(yè)窗口（網(wǎng)頁(yè)不透明區(qū)域是什么形狀，窗口就是什么形狀）

為什么要給客戶端內(nèi)嵌CEF？

舉了那么多例子之后，這個(gè)問(wèn)題說(shuō)起來(lái)就容易多了：

• 用來(lái)展示W(wǎng)eb頁(yè)面，使用各種Web Service；

• 用Web頁(yè)面來(lái)做UI；

• 使用HTML5的特性，比如audio、canvas等，包括CSS3特性等。

• Off Screen Rendering（OSR，離屏渲染）：

  所謂的OSR，就是不創(chuàng)建真窗口，將整個(gè)頁(yè)面渲染到一張位圖上面。當(dāng)然不只是渲染，還有一系列的API來(lái)處理鼠標(biāo)、鍵盤(pán)事件，處理輸入法事件等。

  這個(gè)特性在不能使用真窗口的時(shí)候特別有用，比如Layered Window上面，或者是游戲中渲染到Texture上。

  利用OSR特性，可以做出一些有趣的效果，比如：

  AlloyTeam做出了Webtop，里面用OSR做了純網(wǎng)頁(yè)實(shí)現(xiàn)的瀏覽器、播放器等。

  有一個(gè)Awesomium項(xiàng)目，也是支持OSR，已經(jīng)有游戲項(xiàng)目用Awesomium來(lái)在游戲中渲染網(wǎng)頁(yè)了。 （看Awesomium的輸出文件，應(yīng)該和CEF的實(shí)現(xiàn)方式差不多，都是對(duì)Chromium的封裝，Awesomium能做的CEF應(yīng)該也可以做）

  我業(yè)余時(shí)間做了一個(gè)demo，用CEF將網(wǎng)頁(yè)渲染到了OpenGL的Texture上面，也算是將CEF應(yīng)用在游戲中的一小步嘗試，如圖：

Why CEF?（CEF vs 其他可選方案）

IE

IE作為內(nèi)嵌的瀏覽器控件已經(jīng)有很久的歷史了，準(zhǔn)確的說(shuō)是現(xiàn)在我們有了很多可以替代IE的方案。

CEF vs IE：

• 兼容性：

  IE：內(nèi)核隨著操作系統(tǒng)不同，版本從6到10，Web開(kāi)發(fā)對(duì)這些版本的兼容工作量不可小視。

  CEF：使用的是Webkit內(nèi)核，從特性上看，一個(gè)CEF版本，可以對(duì)應(yīng)一個(gè)Chrome的版本號(hào)，這樣Web開(kāi)發(fā)就有了明確的特性集合，免去了考慮兼容性的工作量。

• HTML5標(biāo)準(zhǔn) & 新特性：

  IE：當(dāng)然舊版本的IE也不支持最新的HTML特性和標(biāo)準(zhǔn)。

  CEF：毫無(wú)疑問(wèn)，在對(duì)新特性的支持上Webkit和Chrome都是走在前沿的。

• 開(kāi)源 & 跨平臺(tái)：

  IE：不開(kāi)源，限Windows平臺(tái)

  CEF：開(kāi)源，使用的Webkit, Chromium都是開(kāi)源的，開(kāi)源就意味著更多可定制的可能；且跨Windows, Mac, Linux3個(gè)平臺(tái)。

• 離屏渲染（OSR）：

  IE：可以通過(guò)一些hack的方法來(lái)實(shí)現(xiàn)離屏渲染，但是工作量不小，而且不是官方支持的。

  CEF：有專門(mén)的離屏渲染模式和對(duì)應(yīng)的API。

• 普及率：

  IE：所有Windows用戶都有IE，這是IE的優(yōu)勢(shì)（不過(guò)有些用戶的IE設(shè)置不正缺，會(huì)導(dǎo)致無(wú)法使用，比如jscript.dll未注冊(cè)，導(dǎo)致無(wú)法使用JavaScript）

  CEF：要自己更安裝包打包

Webkit

為什么要特意將CEF和Webkit做對(duì)比呢？

最近看了一篇很好的文章，講了Webkit到底是什么，不是什么，以及為什么要有那么多的Webkit port：《開(kāi)發(fā)者需要了解的WebKit》

這里大概總結(jié)一下：

Webkit是網(wǎng)頁(yè)的解析和排布引擎，是所有基于Webkit的瀏覽器共享的。默認(rèn)的Webkit port是Safari，就是下載下來(lái)Webkit源碼編譯的版本。 除此之外還有其他的Webkit port，包括Chromium, QtWebkit等，在2D繪圖、GPU加速、JavaScript引擎、audio/video解碼等，都有不同的實(shí)現(xiàn)。

• CEF vs webkit（其實(shí)可以說(shuō)是Chromium vs Webkit）

  V8引擎，skia的2D渲染，Chromium的GPU加速的實(shí)現(xiàn)，等等，借助Chromium的優(yōu)秀實(shí)現(xiàn)，使CEF也成為了一個(gè)優(yōu)秀的Webkit port。

CEF缺點(diǎn)：

做人要厚道，CEF也有自己的缺點(diǎn)和局限，也不能只提優(yōu)點(diǎn)，這里我把CEF的缺點(diǎn)、劣勢(shì)介紹一下：

• 體積：

  最新版的CEF，所有DLL體積加起來(lái)，應(yīng)該接近40M了，壓縮之后估計(jì)也要10M+。 如果你的項(xiàng)目本身安裝包體積就不大，并且也無(wú)法接收這體積，那CEF不適合你。

  當(dāng)然對(duì)于現(xiàn)在按G來(lái)計(jì)算的游戲的話，這個(gè)體積應(yīng)該還是可以接受的。

  普通的Client項(xiàng)目，就看項(xiàng)目本身需要使用CEF實(shí)現(xiàn)的特性，是否值得讓產(chǎn)品的安裝包增大這么多。 當(dāng)然這里也有一些實(shí)現(xiàn)上的妥協(xié)，比如做安裝后下載（個(gè)人認(rèn)為這個(gè)意義不大，畢竟安裝包用戶還可以選擇用下載軟件來(lái)加速）

• 緩存：

  Chrome的緩存設(shè)計(jì)成只能有一個(gè)進(jìn)程讀寫(xiě)，CEF自然也是如此。

  對(duì)于需要多開(kāi)的Client，目前只能每個(gè)進(jìn)程實(shí)例指定一個(gè)不同的緩存文件夾。但是這無(wú)疑增加了硬盤(pán)占用，也使某些本來(lái)被緩存的文件被下載了多次（比如A進(jìn)程緩存了jQuery.js，B進(jìn)程由于緩存不同目錄，還得去請(qǐng)求、緩存一次jQueyr.js）

• OSR：

  OSR目前不像真窗口模式那樣，可以使用GPU加速，OSR目前還只能使用軟件渲染，也就是說(shuō)一些CSS 3D的效果無(wú)法支持。

  不過(guò)OSR的特性還在不停完善中，個(gè)人認(rèn)為還是值得期待。

后續(xù)要分享的內(nèi)容

寫(xiě)了這么多，算是一個(gè)CEF的簡(jiǎn)介吧，后續(xù)要寫(xiě)點(diǎn)兒干貨，即如何使用CEF，包括：

CEF代碼獲取，編譯，嵌入，處理頁(yè)面和Client的API調(diào)用，OSR離屏渲染，緩存，自定義協(xié)議，CEF1 & CEF3等。

嗯，今天就到這里吧。

總結(jié)

以上是生活随笔為你收集整理的CEF：给客户端内嵌一个Chrome吧的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。