Displaying A Web Page In Chrome

概念化的应用分层

参见原文档:http://goo.gl/MsEJX

每一个box代表一个抽象层。下层不依赖于上层。

  • WebKit:渲染引擎。Safari,Chrome / Chromium均在使用。国内的则有百度浏览器,QQ浏览器,猎豹等。Port(即移植)是webkit的一部分,它负责整合与系统相关的服务,如资源下载,图像解码等。
  • Glue:胶水层。负责把WebKit的数据类型转换为Chromium的数据类型(与android平台中的glue含义一致)。他属于webkit嵌入层。正是这一层的作用使得webkit可以嵌入到系统中。它也是Chromium和test_shell的基础。
  • Renderer/Render host:Chromium的多进程部件。它处理通知及命令。
  • WebContents:Content模块的主类,一个可以利用的组件。使用他就可以实现多进程渲染。更多细节请点击content module pages
  • Browser:代表浏览器窗口。它包含多个WebContent。
  • Tab Helpers:一群独立对象。它们可以附着到一个WebContents上。

WebKit

我们使用开源的WebKit实现网页布局。这部分代码是从Apple拉取的,放在third_party/WebKit目录下(启用blink后不一样了亲。。。)。WebKit由两个引擎构成:WebCore和JavaScriptCore。WebCore负责网页布局;JavaScriptCore负责运行js代码。我们仅在测试的情况下才会运行JavascriptCore。正常情况,我们使用我们自己的V8引擎。它的性能比JavaScriptCore要好的多。我们没有使用WebKit这一层(Apple的称呼)。

WebKit Port (移植或适配层)

在底层,我们有自己的WebKit适配层(port)。与平台相关的功能接口均在这里面实现。这些代码位于WebKit目录下的chromium目录。其实,许多的移植是与os无关的。但像字体渲染是必须和平台绑定在一起的。

  • 网络流量由多进程资源加载系统处理,而不是依赖于os。
  • 图像使用为Android开发的Skia图形库。这是一个跨平台的图形库,处理所有的图像和图形。Skia代码位于/third_party/skia目录下。图形操作的入口位于/webkit/port/platform/graphics/GraphicsContextSkia.cpp中。

WebKit glue (胶水层)

Chromium应用使用不同于WebKit源代码的数据类型,代码风格,以及代码布局。WebKit glue提供一个更加方便的嵌入API。该API使用google代码类型,比如,我们使用std:string代替WebCore::String,使用GURL替换KURL。glue代码位于/webkit/glue目录下。glue的对象命名与WebKit的对象类似,但均以”Web”开头。比如,WebCore::Frame变成WebFrame。

WebKit glue层将Chromium代码与WebCore的数据类型分离,把WebCore对Chromium的影响降到最低。所以,WebCore中的数据类型绝对不会被Chromium直接使用。

“test shell”应用是一个“裸”的web浏览器,仅用于测试WebKit移植和glue代码。它使用glue接口与WebKit通信。Chromium也是这样做的。它向开发者提供一个更简便的测试新代码的方式,不需要关注众多复杂的浏览器feature,线程及进程。WebKit的自动化测试也是由这个应用跑的。但是,test shell的缺点就是它毕竟和Chromium不一样。content模块嵌入到一个叫“content shell”的应用中。

Render进程

Chromium的render进程通过glue接口嵌入WebKit port。它没有太多的代码:它的首要职责是作为连接browser的IPC channel另一端 - Renderer。

Renderer中最为重要的类是RenderView,位于/content/renderer/render_view_impl.cc。这个对象代表一个web页面(web page)。它处理所有的navigation相关的命令。这些命令可以来自Browser进程或者发向Browser进程。RenderView类继承自RenderWidget。RenderWidget提供绘制和输入事件的处理。RenderView与Browser进程间通过全局对象RenderProcess通信。

FAQ:RenderWidget和RenderView两者间有什么不同?

RenderWidget实现了glue层的抽象接口WebWidgetDelegate,以此映射到WebCore::Widget。这是屏幕上最基本的一个窗口。该窗口会接收输入事件并且绘制的结果也送到该窗口中。RenderView继承自RenderWidget。它是一个tab或一个弹出窗口的内容。它处理navigational性质的命令(导航命令??)。RenderWidget仅在一种情况下可以独立于RenderView存在:web页面上的选择框。这些框通常带有向下的箭头。这个箭头用于弹出可选项。这个选择框性友用native窗口渲染。因为只有这样,选择框才能出现在其他元素的上面。这些窗口需要接收输入事件,但并没有一个分离的“web page”(即RenderView)来做这件事。

Renderer中的线程

每一个Renderer有两个线程。一个是render thread(即渲染线程);另一个是主线程。像RenderView和WebKit代码均运行在这个线程里面。当Renderer需要与Browser通信时,消息先被发给主线程。主线程负责把消息转发给Browser进程。除了别的之外,这种机制也允许我们以同步方式向Browser发送消息。这种情况发生在一小部分操作时。这些操作通常需要等待浏览器的返回结果才可以继续。比如,通过js获取一个page的cookies。此时,Renderer线程就会阻塞。主线程把收到的所有消息入队直到收到正确的响应。这期间收到的任何消息均会被送到Renderer线程,走正常的处理流程。

Browser进程

低级对象(low-level browser process objects)

所有Renderer进程的IPC通信都是在Browser的I/O线程中完成的。这个线程也处理网络通信。该方案可以避免对用户交互的影响。

当主线程初始化完一个RenderProcessHost对象后,该对象会创建一个新的Renderer进程并分配一个ChannelProxy给Renderer(以命名管道方式)。该对象运行在浏览器的I/O线程里,监听该命名管道并自动把消息转发给RenderProcessHost对象(该对象在UI线程,即主线程里)。一个ResourceMessageFilter对象会被安装到Channel上,用于过虑特定的消息。这些特定的消息可以被I/O线程直接处理,如网络请求。这种过滤行为发生在ResourceMessageFilter::OnMessageReceived里。UI线程里的RenderProcessHost负责分发所有view相关的消息给相应的RenderViewHost。这种分发行为发生在RenderProcessHost::OnMessageReceived里。

高级浏览进程对象(High-level browser process objects)

View相关的消息来到RenderViewHost::OnMessageReceived中。这些消息有大部分在这里被处理掉。剩下的则被转发给RenderWidgetHost基类。这两个类分别映射到Renderer中的RenderView和RenderWidget。每一个平台均会有一个view class(RenderWidgetHostView[Aura|Gtk|Mac|Win]),实现到native view系统的整合。

WebContents对象位于RenderView/Widget之上。大多数消息在这个对象被方法调用消费掉。一个WebContents代表一个web page的内容。它是content模块的顶层对象。它负责在一个矩形视图(view)里显示一个web page。要查阅细节,请点击“Content Module Pages”。

WebContents对象被一个叫做TabContentsWrapper包含。该类位于chrome目录,代表一个tab(即标签页)。

两个说明性示例

Set Cursor(光标)消息的生命周期

暂无

鼠标点击消息的生命周期

暂无

Chromium如何显示Web页面的更多相关文章

  1. web页面请求历程

    web页面请求历程 1)准备DHCP,UDP,IP和以太网 客户端要访问www.google.com的网站. 首先客户端要与网络相接,没有IP地址地址就不能做什么事情,所以客户端采取的一个网络相关的动 ...

  2. 如何把报表放到网页中显示(Web页面与报表简单集成例子)

    1.问题描述 现在用户开发的系统基本上趋向于BS架构的浏览器/服务器模式,这些系统可能由不同的语言开发,如HTML.ASP.JSP.PHP等,因此需要将制作好的报表嵌入到这些页面中. FineRepo ...

  3. [置顶] 读取pdf并且在web页面中显示

    读取pdf并且在web页面中显示 if (System.IO.File.Exists(f)) { Response.ContentType = "applicationpdf"; ...

  4. ios访问web页面<div>点击事件不起效果,以及alert()显示url的解决办法

    ios访问web页面<div>点击不起效果,在其div上添加style=”cursor:pointer:“ jquery web页面动态append()事件调用方法:$(document) ...

  5. [Hadoop异常处理] Namenode和Datanode都正常启动,但是web页面不显示

    异常 namenode和data都正常启动 但是web页面却不显示,都为零 解决办法一: 在hdfs-site.xml配置文件中,加入 <property> <name>dfs ...

  6. php中调用这个功能可以在web页面中显示hello world这个经典单词

    php程序写的时间长了,自然对他所提供的功能了如指掌,他所提供的一大堆功能,真是觉得很好用,但有时候会发现php也缺少一些功能,自己总是会产生为php添加一些自定义的功能的想法.久而久之,终于今天憋不 ...

  7. 怎样把报表放到网页中显示(Web页面与报表简单集成样例)

    1.问题描写叙述 如今用户开发的系统基本上趋向于BS架构的浏览器/server模式.这些系统可能由不同的语言开发.如HTML.ASP.JSP.PHP等.因此须要将制作好的报表嵌入到这些页面中. Fin ...

  8. QT使用插件QAxWidget来展示web页面

    要求:用qt版开发一个桌面程序,该程序有一个界面,用来显示一个采用silverlight开发的web页面. 分析:在qt中实现web显示,根据qt的版本和对应编译器的版本,有如下选择: (1)5.6以 ...

  9. ASP.NET Core应用针对静态文件请求的处理[5]: DefaultFilesMiddleware中间件如何显示默认页面

    DefaultFilesMiddleware中间件的目的在于将目标目录下的默认文件作为响应内容.我们知道,如果直接请求的就是这个默认文件,那么前面介绍的StaticFileMiddleware中间件会 ...

随机推荐

  1. redis的分布式解决方式--codis

    codis是豌豆荚开源的分布式server.眼下处于稳定阶段. 原文地址:https://github.com/wandoulabs/codis/blob/master/doc/tutorial_zh ...

  2. Linux下PHP与普通C程序通信

    Linux下的普通C程序之前可以使用FIFO(有名管道来进行进程间通信,因为这个管道以一个文件的形式存在于文件系统上,因此只要能读写这个文件就可以实现进程间通信. 首先使用mkfifo命令有文件系统上 ...

  3. 当前项目与当前环境的JDK版本不匹配”Bad version number in .class file“

    java.lang.UnsupportedClassVersionError: Bad version number in .class file at java.lang.ClassLoader.d ...

  4. jQuery相关面试题

    1 你在公司是怎么用jquery的? 答:在项目中是怎么用的是看看你有没有项目经验(根据自己的实际情况来回答) 你用过的选择器啊,复选框啊,表单啊,ajax啊,事件等 配置Jquery环境 下载jqu ...

  5. POJO概念

    POJO是一个简单的普通的Java对象,它不包含业务逻辑或持久逻辑等,但不是JavaBean.EntityBean等,不具有任何特殊角色和不继承或不实现任何其它Java框架的类或接口.

  6. jackson的简单实用实例(json)

    一个json格式的字符串比如: {"status":10001,"code":"HDkGzI","pubkey":&qu ...

  7. 获取json格式字符串的简单方法

    有的时候需要找一些Json格式的字符串,可以打开任意一个网页进入到调试模式,然后看network相关的访问信息,就可以获取到. 比如: 在记笔记的时候,点击保存后,会发出一些请求,然后有相应的相应,任 ...

  8. Nmon的安装及使用

    1.安装软件 1) 用root用户登录系统,建立目录:#mkdir  /nmon 2) 通过FTP将下载的nmon工具上传至服务器 192.168.40.212目录/nmon下. 3) 修改tar包权 ...

  9. 二分查找(Java)

    二分查找的前提的要查找的数组必须有序. 代码如下: 程序1 public class source { public int binary_sort(int[] array, int item) { ...

  10. python的虚拟运行环境

    Python 虚拟环境:Virtualenv 博客分类: Python python 在进行python开发的时候避免不同版本python或python不同版本组件之间的冲突, 有必要配置python ...