浏览器架构

如何开发一个浏览器

浏览器的最主要的功能概括起来就是，加载显示网页。怎么样使我们的应用具备这样的功能呢？
最简单的就是利用Android WebView（以Android OS为例），还有CEF（Windows/Linux/Mac OS）。
加载显示网页背后其实是一个很复杂的过程：

1. 从服务器获取主文档
2. 解析主文档，执行js脚本
3. 加载子资源
4. 对页面进行渲染排版
5. 显示页面

每一步都是一个很复杂的过程，整个工程加起来，不亚于一个操作系统。
如果我们只是想开发一个具备加载显示网页的本地应用，就不用去关心WebView和CEF背后的逻辑，只需要了解怎么用它们提供的接口就可以了。

Android WebView

这里的Android是指Android系统，WebView是一个控件类，用于在应用中显示网页的试图（view），从技术的角度讲，它是一个Java类，提供了一系列的接口，应用通过调用这些接口来加载并显示网页。
你可以使用Android WebView来创建自己的浏览器或仅仅显示一些在线内容，它使用Blink渲染引擎渲染页面，包括前进/后退的接口，还支持放大/缩小、页内查找等功能。
最简单的使用方法是：

 WebView webView = new WebView(this);
 WebSettings settings = webView.getSettings();
 settings.setJavaScriptEnabled(true);
 webView.loadUrl("www.example.com");

Android WebView是基于Chromium实现的（Android WebView原来是基于Android WebKit实现的，从Android 4.4 Kitkat开始被换成基于Chromium实现的WebView），它是content/Blink在Java层的试图类，应用通过WebView提供的接口来使用content，Blink，V8等的功能。要注意，Chrome for Android并不使用WebView，它们都基于Chromium开发。Chrome for Android的有些功能可能WebView不支持，包括：

-	WebView v30	WebView v33	WebView v36
datalist	x	✓	✓
File Input Type	x	x	x
FileSystem API	x	x	x
Form Validation	x	✓	✓
Fullscreen API	x	x	x
WebAudio	x	x	✓
WebGL	x	x	✓
WebRTC	x	x	✓

目前Android默认浏览器（Stock Browser）是基于WebView接口。它只支持单进程，不支持沙箱，性能也差不少。Chrome for Android是基于content实现的，支持多进程模式，具有很好的稳定性和安全性。
Android WebView的代码组织结构图：

AwContents提供的不是WebView的API，所以，需要一层桥接部分，将AwContents桥接到WebView，这就是图中的桥接模块，该模块位于Android源代码中，目前没有开源，应该稍后会开放出来。

CEF

The Chromium Embedded Framework(CEF)是一个用于在其它应用中嵌入基于Chromium的浏览器功能的简单框架。
CEF是一个基于Chromium的开源项目。CEF旨在帮助第三方应用嵌入浏览器功能，它提供质量可靠的，稳定的API，对用户隐藏Chromium和Blink的复杂性。
一些使用CEF的场景包括：

• 在一个native应用中嵌入兼容HTML-5的浏览器
• 用于在自定义绘制框架的应用中渲染Web内容
• 用作自动测试主机，测试现有的Web熟悉和应用
• 在其上做一个包装，给用户提供一个更简单的接口，方便其使用Web技术

CEF支持多语言（C/C++, Java, Python等）和多操作系统，而且很容易集成到应用中。它设计的目标就是性能和易用性。
新手可以参考这篇使用指南，跟随文档的指引，很容易就可以在我们的应用中嵌入一个浏览器。
项目主页：https://bitbucket.org/chromiumembedded/cef
CEF目前不支持Android系统，将来可能会支持，不过还没有提上日程。

Chrome for Android

Chrome for Android是Android版的Chrome浏览器，它和Android WebView都是基于Chromium开发。Chrome for Android是基于Chromium content实现的，支持多进程模式，具有很好的稳定性和安全性。开发者也可以基于Chrome for Android开发自己的浏览器，这对开发者的要求会比较高，需要了解许多Chromium的内部细节，一般开发浏览器的厂商才会选择这样做。

架构图

使用WebKit的浏览器架构

在Google推出Blink之前，只有一个开源的渲染引擎，那就是WebKit。基于WebKit的浏览器架构图如下：

Safari和Chrome（2014年4月切换至Blink）都使用WebKit。其他的OS X低下的应用程序也使用WebKit。
WebCore是WebKit项目中的一个组件，是WebKit的核心。技术上讲，WebCore其实是当大家讨论HTML和SVG布局、渲染和DOM处理时提到的WebKit，WebKit是WebCore和各种ports之间的绑定层。一般而言，只有开发者才会提到WebCore。
要进一步了解WebKit，可以看”开发者需要了解的WebKit“。

基于Blink的浏览器架构

2014年4月3日，Google 宣布他将自行开发WebCore的分支，也就是Blink引擎。如对启动Blink分支的坊间传闻感兴趣，可以看这篇文章”历史在重演：从KHTML到WebKit，再到Blink“。Blink是基于WebKit分支出来的，主要使用了WebKit中的WebCore。自此，Blink成为了Chromium的排版引擎。相信会有更多的浏览器厂商跟进Google，切换至Blink引擎。必尽web对Google的意义远大于Apple的意义。
下面是较早前使用blink引擎的浏览器架构图：

图中有个webkit_glue，即webkit胶合层，它的作用在于对webkit进行一层封装，使上层不用关心WebKit的变化。后来不叫glue了，叫Blink Public API。其原因应该是，开始时Chromium可能想同步WebKit代码，后来决定独立演进。