CEF：给客户端内嵌一个Chrome吧
原文：http://yogurtcat.com/posts/cef/hello-cef.html
發表于:?2013-03-31 20:20???|??更多相關文章：?browser?CEF?Chrome?OSR?WebkitCEF是什么
CEF是Chromium Embedded Framework的縮寫，是個基于Google Chromium項目的開源Web browser控件，支持Windows, Linux, Max平臺。除了提供C/C++接口外，也有其他語言的移植版。
因為基于Chromium，所以CEF支持Webkit & Chrome中實現的HTML5的特性，并且在性能上面，也比較接近Chrome。
CEF還提供的如下特性：自定義插件、自定義協議、自定義JavaScript對象和擴展；可控制的resource loading, navigation, context menus等等。
誰在用CEF
讓我們通過一些實戰中的例子，來說明大家都使用CEF做了什么：
-
各種瀏覽器
早期的雙核瀏覽器(IE + Webkit)，有些使用了CEF來作為Webkit內核瀏覽器控件。
不過對于瀏覽器來說，直接在Chrome上面擴展，其實才是王道，大家現在都這么做了（各種極速瀏覽器）。
-
Evernote Client (on Windows)
Evernote允許用戶將網頁粘貼到筆記中，還提供了插件用來將網頁保存為筆記。
那肯定是需要在Client上面可以正確的渲染頁面咯，這個任務就交給了CEF。
-
GitHub Client (on Windows)
GitHub也打包了libcef.dll，從表現上面看，用來展示項目的ReadMe頁面的，肯定是CEF，其他地方的UI，可能部分也是用頁面來實現的。
-
QQ
QQ很早之前就通過內嵌IE來實現一些功能和界面。從去年開始，QQ引入了CEF，對一些之前用IE的地方進行了替換，這樣就可以使用一些基于Webkit的新特性，同時也獲得了速度、穩定性、兼容性方面的優勢。
-
Adobe Edge Animate & Adobe Edge Reflow
Adobe推出了一整套制作現代網頁(或者說HTML5?)的工具，取名Edge。
-
Adobe Edge Animate，做動畫用的，可以通過編輯時間線，創建原件(Edge Animate里面叫做symbol)，來實現復雜的動畫。
-
Edge Reflow則是Design the responsive web. 有人翻譯為響應式，其實就是自適應了。
上面兩款軟件，其基本面向的是Webkit內核的瀏覽器，那么內嵌一個Webkit內核，來提供所見即所得的預覽、編輯界面就是必須的了。他們都使用了CEF。（后面會介紹CEF和純Webkit的差別）
-
-
Q+
Q+在Web App的概念下，為Web頁面提供了一個運行環境(簡單來說就是：Client的一個框和一些可用的API)，支持IE和Webkit內核。
對Web開發同學來說，我們引入的Webkit內核（實際上是CEF），無需考慮IE的版本兼容問題，既提高了開發效率，又可以利用一些新的HTML5特性。當時Q+的應用市場、消息中心、壁紙、音樂Widget等應用都是基于Webkit內核開發的。
Q+項目可以說對CEF進行了比較多的嘗試，比如：
-
開發的音樂Widget，就使用了HTML5的audio標簽；
-
一些應用使用了HTML5的離線功能（就是配個manifest文件那個），當然其中也遇到些曲折，收獲了不少經驗。
-
打包的Webkit調試工具（Dev Tools）。
-
自定義協議：比如對qplus://協議的訪問，可以重定向到某個特殊文件夾之類的功能。
-
Off Screen Rendering（OSR，離屏渲染）：通過離屏渲染 + Windows的Layered Window，就制作了不規則的網頁窗口（網頁不透明區域是什么形狀，窗口就是什么形狀）
-
為什么要給客戶端內嵌CEF？
舉了那么多例子之后，這個問題說起來就容易多了：
-
用來展示Web頁面，使用各種Web Service；
-
用Web頁面來做UI；
-
使用HTML5的特性，比如audio、canvas等，包括CSS3特性等。
-
Off Screen Rendering（OSR，離屏渲染）：
所謂的OSR，就是不創建真窗口，將整個頁面渲染到一張位圖上面。當然不只是渲染，還有一系列的API來處理鼠標、鍵盤事件，處理輸入法事件等。
這個特性在不能使用真窗口的時候特別有用，比如Layered Window上面，或者是游戲中渲染到Texture上。
利用OSR特性，可以做出一些有趣的效果，比如：
AlloyTeam做出了Webtop，里面用OSR做了純網頁實現的瀏覽器、播放器等。
有一個Awesomium項目，也是支持OSR，已經有游戲項目用Awesomium來在游戲中渲染網頁了。 （看Awesomium的輸出文件，應該和CEF的實現方式差不多，都是對Chromium的封裝，Awesomium能做的CEF應該也可以做）
我業余時間做了一個demo，用CEF將網頁渲染到了OpenGL的Texture上面，也算是將CEF應用在游戲中的一小步嘗試，如圖：
Why CEF?（CEF vs 其他可選方案）
IE
IE作為內嵌的瀏覽器控件已經有很久的歷史了，準確的說是現在我們有了很多可以替代IE的方案。
CEF vs IE：
-
兼容性：
IE：內核隨著操作系統不同，版本從6到10，Web開發對這些版本的兼容工作量不可小視。
CEF：使用的是Webkit內核，從特性上看，一個CEF版本，可以對應一個Chrome的版本號，這樣Web開發就有了明確的特性集合，免去了考慮兼容性的工作量。
-
HTML5標準 & 新特性：
IE：當然舊版本的IE也不支持最新的HTML特性和標準。
CEF：毫無疑問，在對新特性的支持上Webkit和Chrome都是走在前沿的。
-
開源 & 跨平臺：
IE：不開源，限Windows平臺
CEF：開源，使用的Webkit, Chromium都是開源的，開源就意味著更多可定制的可能；且跨Windows, Mac, Linux3個平臺。
-
離屏渲染（OSR）：
IE：可以通過一些hack的方法來實現離屏渲染，但是工作量不小，而且不是官方支持的。
CEF：有專門的離屏渲染模式和對應的API。
-
普及率：
IE：所有Windows用戶都有IE，這是IE的優勢（不過有些用戶的IE設置不正缺，會導致無法使用，比如jscript.dll未注冊，導致無法使用JavaScript）
CEF：要自己更安裝包打包
Webkit
為什么要特意將CEF和Webkit做對比呢？
最近看了一篇很好的文章，講了Webkit到底是什么，不是什么，以及為什么要有那么多的Webkit port：《開發者需要了解的WebKit》
這里大概總結一下：
Webkit是網頁的解析和排布引擎，是所有基于Webkit的瀏覽器共享的。默認的Webkit port是Safari，就是下載下來Webkit源碼編譯的版本。 除此之外還有其他的Webkit port，包括Chromium, QtWebkit等，在2D繪圖、GPU加速、JavaScript引擎、audio/video解碼等，都有不同的實現。
-
CEF vs webkit（其實可以說是Chromium vs Webkit）
V8引擎，skia的2D渲染，Chromium的GPU加速的實現，等等，借助Chromium的優秀實現，使CEF也成為了一個優秀的Webkit port。
CEF缺點：
做人要厚道，CEF也有自己的缺點和局限，也不能只提優點，這里我把CEF的缺點、劣勢介紹一下：
-
體積：
最新版的CEF，所有DLL體積加起來，應該接近40M了，壓縮之后估計也要10M+。 如果你的項目本身安裝包體積就不大，并且也無法接收這體積，那CEF不適合你。
當然對于現在按G來計算的游戲的話，這個體積應該還是可以接受的。
普通的Client項目，就看項目本身需要使用CEF實現的特性，是否值得讓產品的安裝包增大這么多。 當然這里也有一些實現上的妥協，比如做安裝后下載（個人認為這個意義不大，畢竟安裝包用戶還可以選擇用下載軟件來加速）
-
緩存：
Chrome的緩存設計成只能有一個進程讀寫，CEF自然也是如此。
對于需要多開的Client，目前只能每個進程實例指定一個不同的緩存文件夾。但是這無疑增加了硬盤占用，也使某些本來被緩存的文件被下載了多次（比如A進程緩存了jQuery.js，B進程由于緩存不同目錄，還得去請求、緩存一次jQueyr.js）
-
OSR：
OSR目前不像真窗口模式那樣，可以使用GPU加速，OSR目前還只能使用軟件渲染，也就是說一些CSS 3D的效果無法支持。
不過OSR的特性還在不停完善中，個人認為還是值得期待。
后續要分享的內容
寫了這么多，算是一個CEF的簡介吧，后續要寫點兒干貨，即如何使用CEF，包括：
CEF代碼獲取，編譯，嵌入，處理頁面和Client的API調用，OSR離屏渲染，緩存，自定義協議，CEF1 & CEF3等。
嗯，今天就到這里吧。
總結
以上是生活随笔為你收集整理的CEF：给客户端内嵌一个Chrome吧的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： WinForm界面开发之布局控件Weif
- 下一篇： 优秀的领导与差劲的领导