关闭

浏览器架构

810人阅读 评论(0) 收藏 举报
分类:

如何开发一个浏览器

浏览器的最主要的功能概括起来就是,加载显示网页。怎么样使我们的应用具备这样的功能呢?
最简单的就是利用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代码,后来决定独立演进。
这里写图片描述

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:121333次
    • 积分:2092
    • 等级:
    • 排名:第18258名
    • 原创:51篇
    • 转载:2篇
    • 译文:35篇
    • 评论:28条
    最新评论