Chromium网页FrameTree创建过程分析讲解.docVIP

Chromium网页Frame Tree创建过程分析 Chromium在加载一个网页之前，需要在Browser进程创建一个Frame Tree。Browser进程为网页创建了Frame Tree之后，再请求Render进程加载其内容。Frame Tree将网页抽象为Render Frame。Render Frame是为实现Out-of-Process iframes设计的。本文接下来就分析Frame Tree的创建过程，为后面分析网页加载过程打基础。 关于Chromium的Out-of-Process iframes的详细介绍，可以参考官方文档：，或者前面一文。我们通过图1所示的例子简单介绍，如下所示： 在图1中，网页A在一个Tab显示，并且它通过iframe标签包含了网页B和网页C。网页C通过window.open在另外一个Tab中打开了另外一个网页C实例。新打开的网页C通过iframe标签包含了网页D，网页D又通过iframe标签包含了网页A的另外一个实例。 这时候Browser进程会分别为图1的两个Tab创建一个WebContents对象，如图2所示： 在Browser进程中，一个网页使用一个WebContents对象描述。每一个WebContents对象都又关联有一个Frame Tree。Frame Tree的每一个Node代表一个网页。其中，Frame Tree的根Node描述的是主网页，子Node描述的是通过iframe标签嵌入的子网页。例如，第一个Tab的Frame Tree包含有三个Node，分别代表网页A、B和C，第二个Tab的Frame Tree也包含有三个Node，分别代表网页C、D和A。 网页A、B、C和D在Chromium中形成了一个Browsing Instance。关于Chromium的Browsing Instance，可以参考官方文档：Process Models，它对应于HTML5规范中的Browsing Context。 我们观察代表网页B的子Node，它关联有一个RenderFrameHost对象和三个RenderFrameProxyHost对象。其中，RenderFrameHost对象描述的是网页B本身，另外三个RenderFrameProxyHosts对象描述的是网页A、C和D。表示网页B可以通过JavaScript接口window.postMessage向网页A、C和D发送消息。 假设图1所示的网页A、B、C和D分别在不同的Render进程中渲染，如图3所示： 在负责加载和渲染网页B的Render进程中，有一个RenderFrame对象，代表图1所示的网页B。负责加载和渲染网页B的Render进程还包含有五个RenderFrameProxy对象，分别代表图1所示的两个网页A实例、两个网页C实例和一个网页D实例。在负责渲染网页A、C和D的Render进程中，也有类似的RenderFrame对象和RenderFrameProxy对象。 Browser进程的RenderFrameHost对象和Render进程的RenderFrame对象是一一对应的。同样，Browser进程的RenderFrameHostProxy对象和Render进程的RenderFrameProxy对象也是一一对应的。RenderFrame对象和RenderFrameProxy对象的存在，使得在同一个Browsing Instance或者Browsing Context中的网页可以通过Javascript接口window.postMessage相互发送消息。 例如，当网页B要向网页A发送消息时，负责加载和渲染网页B的Render进程就会在当前进程中找到与网页B对应的RenderFrame对象，以及与网页A对应的RenderFrameProxy对象，然后将要发送的消息从找到的RenderFrame对象传递给找到的RenderFrameProxy对象即可。与网页A对应RenderFrameProxy对象接收到消息之后，会进一步将该消息发送给负责加载和渲染网页A的Render进程处理，从而完成消息的发送和处理过程。 接下来，我们就结合源码分析Chromium为网页创建Frame Tree的过程，这个过程涉及到WebContents、RenderFrameHost和RenderFrame等重要对象的创建。 前面提到，Frame Tree是在Browser进程中创建的，并且与一个WebContents对象关联。从前面一文可以知道，WebContents是Chrom