Chromium如何显示Web页面

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页面

时间: 2024-10-12 20:18:57

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

mime导致zabbix web页面css样式不能显示的问题

在一台新系统上yum装完zabbix后发现web页面不能正确显示css样式表.页面如下图: 看了下目录发现.css文件和图片文件都在,不是文件路径的问题.百度了下发现是mime把text/css解析成text/html造成的.于是干脆找了一份比较全的mime.types文件放到/etc下,重命名为apache_mime.types.然后修改Apache的配置文件修改mime文件路径为/etc/apache_mime.types. 重启httpd服务并清除缓存后页面显示正常. mime.types

shell自动收集服务器硬件系统信息通过web页面显示

1.脚本部分 #!/bin/bash #auto get system info echo -e "\033[34m\033[1m" cat <<EOF +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ++++++++++++++++++++Welcome to use system Coolect++++++++++++++++++++++++++++ ++++++

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

php程序写的时间长了,自然对他所提供的功能了如指掌,他所提供的一大堆功能,真是觉得很好用,但有时候会发现php也缺少一些功能,自己总是会产生为php添加一些自定义的功能的想法.久而久之,终于今天憋不住了,开始动手研究如何添加. 下载一个php的源代码包,这里使用的是php 4.0.5版,解压后会看到php的根目录下会有README.EXT_SKEL这样一个文件,打开详细阅读了一下,发现了一个非常好用的工具,这个工具可以帮你构建一个空的php扩展,然后你向里面添加相应的代码就可以完成你自己的功能

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

1.问题描写叙述 如今用户开发的系统基本上趋向于BS架构的浏览器/server模式.这些系统可能由不同的语言开发.如HTML.ASP.JSP.PHP等.因此须要将制作好的报表嵌入到这些页面中. FineReport制作出的报表能够通过Frame框架集成到Web页面中. 2.将报表显示在Frame框架内 2.1集成方法 报表作为页面的一部分,能够以iFrame方式嵌入在网页中.指定iFrame的src就可以. 1.     <iframe id="reportFrame" widt

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

1.问题描述 现在用户开发的系统基本上趋向于BS架构的浏览器/服务器模式,这些系统可能由不同的语言开发,如HTML.ASP.JSP.PHP等,因此需要将制作好的报表嵌入到这些页面中. FineReport制作出的报表可以通过Frame框架集成到Web页面中. 2.将报表显示在Frame框架内 2.1集成方法 报表作为页面的一部分,可以以iFrame方式嵌入在网页中,指定iFrame的src即可. 1.     <iframe id="reportFrame" width=&quo

记录一次zookeeper集群其中一节点在hbase web页面中显示Connection rese

集群环境:nn1,view和dn1三节点部署的zookeeper集群,gezookeeper进程均已启动hbase web页面显示zk_dump信息如下日志输出信息如下: shell> tail -f /var/log/zookeeper/zookeeper.log 2018-04-16 09:56:20,000 [myid:3] - INFO [ProcessThread(sid:3 cport:-1)::[email protected]] - Processed session termi

php与web页面交互(二)

一.获取表单数据 1.1 使用POST()方法提交表单  ---POST()方法可以没有限制地传递数据到服务器,所提交的数据在后台传输,用户在浏览器端是看不到这一过程的,安全性高,适用于发送保密数据和大容量数据到服务器. 范例: 1 <form name="form1" method="post" action="index2.php"> 2 <table border="1" width="400

转:Web页面通过URL地址传递参数常见问题及检测方法

Web页面即我们在浏览器中所看到的网页,在Web应用程序中,其页面往往需要进行动态切换和数据交互,页面间的数据常规传递方法有多种,本文主要介绍Web页面处理程序中常见的URL地址参数传递方法,包括概述其实现原理.特点和常见问题,最后介绍检测该方式常见应用问题的测试思路和方法. 1.web页面的概念 Web是internet上一个非常重要的资源信息网,产生于20世纪90年代初,它遵循超文本传输协议,以超文本或超媒介的形式传送各种各样的信息,为用户提供了一个具有友好的图形化界面--Web页面,以便用

基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作

在前面介绍了很多篇相关的<Bootstrap开发框架>的系列文章,这些内容基本上覆盖到了我这个Bootstrap框架的各个主要方面的内容,总体来说基本达到了一个稳定的状态,随着时间的推移可以会引入一些更好更新的内容进行完善,本篇继续这个系列,主要介绍如何实现Web页面内容的打印预览和保存操作. 1.Web页面打印的问题 在此之前,我一般使用比较好用的LODOP来执行打印的操作,这个在我之前有很多文章都有涉及,这个控件是一个ActiveX的控件,需要下载安装后就可以在页面是进行打印的排版设计,预