阅读webkit技术内幕

WebKit架构

image.png

WebKit源代码结构

  1. 一级目录 LayoutTests、PerformanceTests、Source、Tools
  2. Source目录 JavaScriptCore Platform WebCore Webkit WebKit2 WTF
  3. WebCore重要目录 css dom html inspector loader page platform storage

    Chromium架构和模块

    image.png

多进程模型

image.png

  1. Brower进程：浏览器的主进程，负责浏览器界面的显示，各个页面的管理，是所有其他类型进程的祖先，负责他们的创建和销毁等工作，它有且仅有一个
  2. Renderer进程：网页的渲染进程，负责页面的渲染工作，Blink/WebKit的渲染工作主要在这个进程中完成，可能有多个，但是Renderer进程的数量是否通用化打开的网页数量一致呢？答案是不一定。Chromium设计了灵活的机制，允许用户配置。
  3. NPAPI插件进程：该进程是为NPAPI类型的插件而创建的。其创建的基本原则是每种类型的插件只会被创建一次，二期进档使用的时才被创建。
  4. GPU进程：最多只有一个，当且仅当GPU硬件加速打开的时候才会被创建，主要对3D图形加速调用的实现。
  5. Pepper插件进程：同NPAPI插件进程，不同的是为Pepper插件而创建的进程。
  6. 其他类型的进程。
  • Browser进程和页面的渲染是分开的，这保证了也免得渲染导致崩溃不会导致浏览器主界面的崩溃
  • 每个网页是独立的进程，这保证了页面相互不影响。
  • 插件进程也是独立的，插件本身的问题不会影响浏览器主界面和网页。

  • GPU硬件加速进程也是独立的

    Renderer

  • Process-per-site-instance:该类型的含义是为每一页面都创建一个独立的Renderer进程，不管这些页面是否来自于同一个域。

  • Process-per-site: 该类型的含义是属于同一个域的页面共享同一个进程，而不同属一个域的页面则分属不同的进程。
  • Process-per-tabL该类型的含义是，Chromium为每个标签页都创建一个独立的进程，而不管他们是否是不同域的不同实例，这是默认行为。
  • Single process: 该类型的含义是，Chromium部位页面创建任何独立的进程，所有的渲染工作都在Browser进程中进行，他们是Browser进程中的多个线程。

    Brower进程和Render进程

image.png

多线程模式

多线程主要目的是为了保持用户界面的高响应度，保证UI线程（Browser的进程中的主线程）不会被任何其他费事的操作阻碍从而影响了对用户操作的响应。

image.png
网页的加载和渲染过程在图中的模型下的基本工作方式

  1. Browser进程收到用户的请求，首先由UI线程处理，而且将相应的任务转给IO线程，他随即将该任务传递给Renderer进程。
  2. Renderer进程的IO线程经过简单介绍后交给渲染线程。渲染线程接受请求，加载网页并渲染网页，这其中可能需要Broweser进程获取资源和需要GPU进程来帮助渲染。最后Renderer进程将结果又IO线程传递给Browser进程。

  3. 最后，Browser进程接受到结果并将结果绘制出来。

    Conenet接口

    content接口不仅提供了一层对多进程进行渲染的抽象接口，而且它从诞生依赖一个重要目标就是要支撑所有的HTML5功能、GPU硬件加速功能和沙箱机制，这可以让Content接口的使用者不需要很多的工作即可得到很强大的功能。

  4. APP这部分主要与应用程序或者进程的创建和出事话相关，它呗所有的进程使用，用来处理一些进程的公共操作，具体包括两种类型，第一类主要包括进程创建的初始化函数，也就是Content模块的出事化和关闭动作；第二类主要是各种的回调函数，用来告诉嵌入者启动完成，进程启动、退出，沙盒模型初始化开始和结束等。

  5. Browser同样包括两类，第一类包括对HTML5功能和其他一些高级功能实现的参与，因为这些实现需要Chromium的不同平台的实现，同时需要例如 notification(通知)、speech recognition（语音识别）、web worker、Download、Geolocation(地理位置)等这些Content层提供接口，Content模块需要调用他们实现HTML5的功能。第二类中的典型接口类是ContentBrowserClient，主要是实现部分的逻辑，被Browser进程调用，还有就是一些事件的函数回调。
  6. Common主要定义一些公共的接口，这些被Renderer和Browser共享，例如一些进程相关、参数、GPU相关等。
  7. Plugin仅有的一个接口类，通知嵌入者Plugin进程合适被创建。
  8. Renderer该部分也包括两类，第一类包含获取RenderThread的消息循环、注册V8Extension、计算JavaScript表达式等；第二类包括ContentRendererClient，主要实现部分逻辑，被Browser端调用，还有就是一些事件的函数回调。
  9. Utility工具类的接口，主要包括让嵌入者参与Content接口中的线程创建和消息的过滤

webkit2

webkit2架构及模块

image.png