我们都知道chromium是用webkit完成页面显示的,
 
那么chromium是怎样集成和封装webkit的呢?
 
是怎样将webkit整合到自己的框架中,并将一个页面渲染出来的?
 
这篇我们主要研究这些问题。

 
    从源码看,chromium将webkit作为第三方库引用(src/third_party/WebKit下)。从框架和实现上,chromium实际上做了两件事情:webkit port和webkit glue。
 
    webkit port
 
    webkit port是在某种OS上运行webkit引擎的打包和实现,比如QtWebkit、Gtk+ port、Chromium port、Adobe AIR port等。webkit主要包括三部分:webcore、javascript core和ports。webcore和jscore处理DOM解析、页面渲染、js解析等浏览器核心功能,而ports则提供了一系列抽象接口,不同平台上可以完成各自的实现,这些接口包括网络访问、UI绘制、线程和文件操作等,同时还可以port一些接口给外部程序调用或由外部程序给webkit提供支持。换句话说,webkit将核心部分与外部应用(OS相关)之间定义了一个接口协议组,port对这些接口进行部分或全部的支持,达到核心部分与应用环境的整合。
    webkit port需要做哪些工作呢?基本都是OS相关的:
    1,线程(thread);
    2,网络访问(network access);
    3,时钟(timer),时间日期(date/time);
    4,图形渲染系统(graphics and rendering);
    5,widgets与OS绘图的对接;
    6,Unicode(chromium用icu库);
    7,定义API层(外部与内核之间的交互接口)。
    对chromium来说,这部分源码都直接提交到了webkit的源码库中。
    
    webkit glue
    webkit port之上,还有一层glue,顾名思义就是chromium对webkit的抽象接口层,目的是将chromium和webkit解耦,最重要的一点是数据类型的解耦。这样做的好处是,webkit内部的变化都不会影响到chromium对其的调用。
 
    chromium是怎么做的?来仔细研究这篇官方文档:How Chromium Displays Web Pages
    第一个图:
 
 
  
  首先最底层是webkit及其port,提供核心引擎;其上紧接着就是glue层;这两层已经将webkit封装完毕。
 
Renderer和Renderer host两层构成chromium的“多进程嵌入层”,从图中看两层之间就是进程边界,可见其主要作用就是在进程间代理传递消息和命令。WebContents是一个内容层,对于chromium来说,一个html页面首先要被解释成content(src/content),然后由上层的Browser输出到窗口成为最终的视图。
 
简单来说,Renderer通过多进程架构,将webkit解释html的结果转为content,再输出显示视图。层次结构最重要的特点是底层的模块从不依赖和访问上层模块(DEPS rules)。关于content层更详细的信息参考:Content module,还是用图来帮助理解:

    对于外部浏览器应用程序来说,有两个API可以直接调用:webkit API和content API。chromium设计content API的目的一是封装content内部负责的逻辑,二是划清browser和content的层次概念。content API的接口定义在src/content/public。关于content API的理解还可以参考这篇文章:理解WebKit和Chromium: Content API和CEF3,其中提到的CEF是个不错的开源,其致力于将chromium独立封装,使浏览器程序能方便地嵌入调用:chromiumembedded
 
    在此框架下,webkit的port尽量做到跨平台支持,比较重要的port设计:
    1,多进程的网络访问系统,与渲染进程分离;(后面具体研究chromium的进程和线程体系)
    2,图形系统采用了为Android系统开发的跨平台的skia库。
 
    关于Renderer部分,我们在后面研究chromium多进程架构时讨论。
 
    在网上找到一个chromium和webkit的类关系图,可以好好研究一下,引用自类图:WebKit WebCore到Chrome Browser

    了解了chromium对webkit封装的框架层次,对后面理解chromium的多进程架构至关重要!
分享:

 
 

chromium ⑤的更多相关文章

  1. QT5利用chromium内核与HTML页面交互

    在QT5.4之前,做QT开发浏览器只能选择QWebkit,但是有过使用的都会发现,这个webkit不是出奇的慢,简直是慢的令人发指,Release模式下还行,debug下你就无语了,但是webkit毕 ...

  2. Google之Chromium浏览器源码学习——base公共通用库(一)

    Google的优秀C++开源项目繁多,其中的Chromium浏览器项目可以说是很具有代表性的,此外还包括其第三开发开源库或是自己的优秀开源库,可以根据需要抽取自己感兴趣的部分.在研究.学习该项目前的时 ...

  3. 如何在windows上编译Chromium (CEF3) 并加入MP3支持(二)

    时隔一年,再次编译cef3,独一无二的目的仍为加入mp3支持.新版本的编译环境和注意事项都已经发生了变化,于是再记录一下. 一.编译版本 cef版本号格式为X.YYYY.A.gHHHHHHH X为主版 ...

  4. 如何在Windows上从源码编译Chromium (CEF3) 加入mp3支持

    一.什么是CEF CEF即Chromium Embeded Framework,由谷歌的开源浏览器项目Chromium扩展而来,可方便地嵌入其它程序中以得到浏览器功能. CEF包括CEF1和CEF3两 ...

  5. 构建基于Chromium的应用程序

    chromium是google chrome浏览器所采用的内核,最开始由苹果的webkit发展而出,由于webkit在发展上存在分歧,而google希望在开发上有更大的自由度,2013年google决 ...

  6. ubuntu中chromium无法播放flash,安装flash

    ubuntu14.0.4中系统自带的chromium无法播放flash,后来查了下,得知chromium已经不支持adobe flash了,用户可使用pepper flash替代.安装pepper f ...

  7. windows下编译chromium浏览器的15个流程整理

    编译chromium 系统为windows, 国内在windows上编译chromium的资料比较少, 我这篇文章只能作为参考, 记录我遇到的一些问题,因为chromium团队也会修改了代码,或者编译 ...

  8. Google之Chromium浏览器源码学习——base公共通用库(二)

    上次提到Chromium浏览器中base公共通用库中的内存分配器allocator,其中用到了三方库tcmalloc.jemalloc:对于这两个内存分配器,个人建议,对于内存,最好是自己维护内存池: ...

  9. 浏览器-10 Chromium 移动版

    移动版 chromium 的iOS版和Android是为两个流行的移动操作系统设计的, UI方面进行了 较大的重新设计; 两者从外观上看颇为相似,但是其内部的渲染引擎的差别非常的大,原因在于iOS对应 ...

  10. 浏览器-09 javascript引擎和Chromium网络栈

    语言的运行 C/C++语言 使用编译器直接将它们编译成本地代码(机器指令),这是由开发人员在代码编写完成之后实施; 用户只是使用这些编译好的本地代码,这些本地代码被系统的加载器加载执行,由操作系统调度 ...

随机推荐

  1. apiCloud 调微信支付,调支付宝支付

    data里面的参数信息,需要从后台接口中调取,点击查看微信支付详情,https://docs.apicloud.com/Client-API/Open-SDK/wxPay 首先,需要在config.x ...

  2. gitlab 集成Jenkins

    项目:使用git+jenkins实现持续集成 开始构建  General  源码管理 我们安装的是Git插件,还可以安装svn插件  我们将git路径存在这里还需要权限认证,否则会出现error  我 ...

  3. 『MXNet』第三弹_Gluon模型参数

    MXNet中含有init包,它包含了多种模型初始化方法. from mxnet import init, nd from mxnet.gluon import nn net = nn.Sequenti ...

  4. hdu-4819-线段树套线段树

    http://acm.hdu.edu.cn/showproblem.php?pid=4819 给出一个N*N的矩阵,每次询问一个m*m的子矩阵里的floor((maxv+minv)/2)并把中间的元素 ...

  5. visio画等分树状图

    一 树状图形状 Search里搜索Tree,找到Double Tree或者Multi Tree的形状 二 分出更多branch 按住主干上的黄色小方块,拖出更多分支. 三 等分分支 将每个分支和对应的 ...

  6. 专题[vjudge] - 数论0.1

    专题[vjudge] - 数论0.1 web-address : https://cn.vjudge.net/contest/176171 A - Mathematically Hard 题意就是定义 ...

  7. 二十三、Spring框架的相关知识点总结

    1.Spring的优点: 1.1.Spring在大小和透明性方面是轻量级的,Spring框架大约只有2MB大小. 1.2.控制反转(IOC):使用控制反转技术实现了低耦合,依赖注入(DI)到对象,而不 ...

  8. 整合SpringDataJPA

    JPA:ORM(Object Relational Mapping); 1).编写一个 实体类(bean)和数据表进行映射,并且配置好映射 关系: /** * Created by windMan o ...

  9. JavaScript -基础- 函数与对象(四) BOM 对象

    一.BOM对象 BOM游览器对象模型,可以与游览器对话 BOM下Window对象最重要,还有history.location对象 二.Window对象方法 1.alert提示框 2.confirm c ...

  10. Grafana的安裝(一)

    Grafana的安裝 grafana是用于可视化大型测量数据的开源程序,他提供了强大和优雅的方式去创建.共享.浏览数据.dashboard中显示了你不同metric数据源中的数据 Granafa的安裝 ...