chromium+blink网页加载流程

内容目录

1 加载网页的大致过程 1

2 加载网页详细过程 1

2.1.Browser准备加载 1

2.2.Render准备加载 2

2.3.browser的实际加载工作 3

2.3.1 browser开始加载request 3

2.3.2 http层的工作 3

2.3.2.1 收到responseheader 4

2.3.2.2 收到responsebody 4

2.4.Render对接收到的数据的处理 4

2.4.1 ResourceMsg_SetDataBuffer的处理 4

2.4.2 ResourceMsg_DataReceived的处理 5

2.4.3 ResourceMsg_RequestComplete的处理 5



1 加载网页的大致过程

加载网页是render,browser共同参与的过程。

  1. 用户提交一个加载申请,首先到达browser里,browser会做一些准备工作,生成navigationentry,浏览历史数据。

  2. 然后browser会通知render要加载的网页。Render创建对应的renderview,FrameLoader,DocumentLoader等,render处理完毕后,会把真正的网络加载工作交给browser完成。

  3. browser的io线程负责从网络发送读取数据,数据通过sharedmem的方式发送给render.

  4. render接受倒数据后,解析处理。

2 加载网页详细过程

2.1.Browser准备加载

Webview.loadUrl

->WebViewChromium.loadUrl(glue层)

->AwContents.loadUrl()(android_webview层)

->ContentViewCore::loadUrl()(content/browser下)

->nativeLoadUrl()

-----------native 界限---------------

->ContentViewCoreImpl::LoadUrl(),content模块

->NavigationControllerImpl::LoadURLWithParams()

->NavigationControllerImpl::LoadEntry()

->NavigationControllerImpl::NavigateToPendingEntry()

->WebContentsImpl::NavigateToPendingEntry()

->NavigatorImpl::NavigateToEntry()

通过RenderFrameHostManager创建一个RenderFrameHostImpl,

然后通知observers:AboutToNavigateRenderView

然后调用RenderFrameHostImpl.Navigate()

然后通知observers:NavigateToPendingEntry().



其中,RenderFrameHostImpl.Navigate()调用:

->Send(newFrameMsg_Navigate(routing_id_, params)),发送message给render.

2.2.Render准备加载

Render:

RenderViewImpl::OnMessageReceived,render线程

->RenderFrameImpl::OnNavigate

更新renderView的historypage ids.

判断是否是reload,或者backforward, 还是新的加载。如果新的加载:

->WebLocalFrameImpl::loadRequest(constWebURLRequest& request) (webkit层)

->FrameLoader::load(FrameLoadRequest&passedRequest)

->FrameLoader::loadWithNavigationAction

这里涉及到Policydocumentloader, provisional documentloader. 基本上先创建一个policydocument loader. 然后判断该request是否需要继续,如果不继续,那么此次navigation停止。不继续的例子比如shell拦截处理了本次navigation,不需要内核加载网址,如果继续就会切换到provisionaldocument loader.

->DocumentLoader::startLoadingMainResource()

->ResourceFetcher::fetchMainResource()

->ResourceFetcher::requestResource()

这里会检查该request是否已经在memcache里如果在,会尝试使用memcache里的数据。否则会继续加载。Cache里面的数据可能需要revalidate,比如需要把last-modified,etag等header信息提取出来,生成httprequest发送给server检查是否有更新。

->Resource::load()

->createresourceLoader然后ResourceLoader::start()

创建WebURLLoader.

->WebURLLoaderImpl::loadAsynchronously()(进入content层)

->WebURLLoaderImpl::Context::Start(),整理requestinfo, load_flags, request body.

->IPCResourceLoaderBridge::Start()这个bridge就是resourceloaderbridge.定义在resource_dispatcher.cc.生成requestid, 并发送request消息给browser.

->ResoureDispatcher::message_sender()->send(ResourceHostMsg_RequestResource),message_sender()得到一个IPC::Sender对象。发送ResourceHostMsg_RequestResource消息

2.3.browser的实际加载工作

2.3.1 browser开始加载request

Browser:

content/browser/loader模块

->ResourceDispatcherHostImpl::OnMessageReceived()

->ResourceDispatcherHostImpl::OnRequestResource()

->ResourceDispatcherHostImpl::BeginRequest()

->ResourceDispatcherHostImpl::BeginRequestInternal()

创建ResourceLoader,并启动加载。会创建AsyncResourceHandler,并传入ResourceLoader里。

->ResourceDispatcherHostImpl::StartLoading()

->ResourceLoader::StartRequest()

通知handler.onWillStart().这里会通知到所有的resourcethrottle, 也就是一些用来intercept资源加载的callback.比如InterceptNavigationResourceThrottle就是一种。可以用来拦截加载请求。可以处理第三方协议。

->ResourceLoader::StartRequestInternal()

->URLRequest::Start()(net层)

先通过URLRequestJobManager和URLRequestJobFactory创建URLRequestJob.job依赖于协议,比如URLRequestHttpJob,是被URLRequestHttpJob::Factory()函数创建的,URLRequestHttpJob::Factory是buitin的创建requestjob的factory.Builtin的factory支持http和https.

->URLRequest::StartJob(URLRequestJob*job),

->URLRequestHttpJob::Start()

设置request_info的值,搜集headers内容。

->URLRequestHttpJob::DoStartTransaction(),调用此函数前,如果需要,会异步加载cookie,并设置到header里。

->URLRequestHttpJob::StartTransactionInternal()

创建HttpCache::Transaction.并启动

2.3.2 http层的工作

->net::HttpCache::Transaction::start()(net/http协议层)

把URLRequestHttpJob::OnStartCompleted作为一个callback传入这个transaction.当底层数据到达后,会调用该callback.

->DoLoop().

状态机,底层还会创建HttpNetworkTransaction来从网络加载数据。如果cache里面已有数据就会使用cache里面的数据。这个模块已经是http协议层内容。该DoLoop大部分操作支持异步和同步,比如如果一个操作同步完成,就会继续loop到下一步,如果没有完成,会返回到上层调用者,当异步操作完成后,callback又会调用到DoLoop从而推动状态机前进。


涉及到的工作大体上包含:

创建本地cacheentry. 用来保存response数据到文件系统。

发送request,

接受response,解析responseheaders, meta data,并保存到cacheentry.

接受responsebody.


一些socket通讯,文件存取的操作在io线程,或者worker线程异步完成。

期间的一些关键节点,比如收到response,都会通知到上层:

2.3.2.1 收到responseheader

URLRequestHttpJob::OnStartCompleted

保存cookie,并通知上层:

->URLRequestJob::NotifyHeadersComplete

->URLRequest::NotifyResponseStarted()

->ResourceLoader::OnResponseStarted()

这里会执行security检查,比如根据是否允许加载不同host的url.否则cancel本次浏览。这是可以配置的。

->ResourceLoader::StartReading()

读取更多responsebody数据。

->ResourceLoader::ReadMore

->URLRequest::Read

->URLRequestHttpJob::ReadRawData

让底层的transaction开始读取数据,异步完成后,调用callback:URLRequestHttpJob::OnReadCompleted

->HttpCache::Transaction::Read


2.3.2.2 收到responsebody

URLRequestHttpJob::OnReadCompleted

->URLRequest::NotifyReadCompleted

->ResourceLoader::OnReadCompleted()

先把数据发送给render,然后检查是否所有数据都接受完毕.

->ResourceLoader::CompleteRead

->BufferedResourceHandler::OnReadCompleted

->AsyncResourceHandler::OnReadCompleted

把数据共享给render,由于原本chrome是多进程的,所以使用的是sharedmem方式来共享资源.使用三个消息

  • ResourceMsg_SetDataBuffer消息

  • ResourceMsg_DataReceived消息

  • ResourceMsg_RequestComplete消息

如果第一次收到数据,把sharedmem的handle告知render,使其知道哪里取数据.使用ResourceMsg_SetDataBuffer.

告诉render新来的数据的偏移和大小.使用ResourceMsg_DataReceived.

如果ResourceLoader::OnReadCompleted发现所有数据接受完毕:

->ResourceLoader::ResponseCompleted()

->AsyncResourceHandler::OnResponseCompleted

向render发消息:ResourceMsg_RequestComplete告知接受完毕.

2.4.Render对接收到的数据的处理

2.4.1 ResourceMsg_SetDataBuffer的处理

ResourceDispatcher::OnSetDataBuffer()

根据sharedmem的句柄,映射指定大小的sharedmem.

使用mmap系统调用。

2.4.2 ResourceMsg_DataReceived的处理

ResourceDispatcher::OnReceivedData()

通知上层,并回复browser一个ack消息。

->WebURLLoaderImpl::Context::OnReceivedData

->ResourceLoader::didReceiveData()

->RawResource::appendData

保存数据到memcache里,然后通知resourceClient来数据了:

->DocumentLoader::dataReceived

->DocumentLoader::commitData

->DocumentWriter::addData

->HTMLDocumentParser::appendBytes

startBackgroundParser(),新起一个线程执行数据的解码,

后台执行:BackgroundHTMLParser::appendRawBytesFromParserThread,解码数据后返还给主线程:HTMLDocumentParser::didReceiveEncodingDataFromBackgroundParser。

此外,还会靠BackgroundHTMLParser::pumpTokenizer把数据解析成token,发送给主线程:HTMLDocumentParser::didReceiveParsedChunkFromBackgroundParser().

->HTMLDocumentParser::pumpPendingSpeculations

->HTMLDocumentParser::processParsedChunkFromBackgroundParser(

处理收到的token,构造domtree,

->constructTreeFromCompactHTMLToken(

2.4.3 ResourceMsg_RequestComplete的处理

ResourceDispatcher::OnRequestComplete

->WebURLLoaderImpl::Context::OnCompletedRequest

->ResourceLoader::didFinishLoading

->Resource::finish

->DocumentLoader::finishedLoading

->FrameLoader::checkLoadComplete




9.Chromium指纹浏览器开发教程之Blink渲染引擎 Chromium指纹浏览器开发教程之Blink渲染引擎 阅读详情

相关推荐

理解 Embedder,理解 Chromium 的系统层次结构

理解 Embedder,理解 Chromium 的系统层次结构标签: Chromium作者:易旭昕在 Chromium 官方的文档里面,我们经常会看到 blink’s embedder 或者 content’s embedder 这样的称谓,理解 embedder 的概念,对我们理解 Chromium 的系统层次结构是十分重要的。

THINK . DESIGN . CODE 4770

Chromium网页加载过程

Chromium加载网页的过程,需要Browser进程和Render进程协作完成。加载网页的过程由Browser进程发起,向服务器请求网页内容的过程也是由Browser进程完成。Render进程负责对下载回来的网页内容进行解析,解析之后得到一个DOM Tree。有了这个DOM Tree之后,Render进程就可以对网页进行渲染了。本文接下来就对上述过程涉及到的重要概念进行简要介绍以及制定学习计划。...

tianyu的专栏 - Linux site:blog.youkuaiyun.com/wishfly 2064

从Chromium的Blink引擎探讨浏览器渲染技术

本文深入探讨了Chromium浏览器如何从Webkit演进到Blink渲染引擎,并详细解析了HTML和CSS的解析过程。文章揭示了浏览器如何处理和优化代码,以提供更快速、兼容性更高的网页渲染。

weixin_32925455的博客 484

chromiumUI中从处理url键盘输入到内建url页面内容准备的函数调用过程

在chromium中输入url时, 想看看在哪处理的键盘输入。还想看看, 输入内建url时,从键盘处理到url页面数据准备的全过程。在chromium工程中可以看到内建url索引页面的url内容所有可用的chromium buildin url list在chromium的url输入框,输入以下url, 会显示出chromium所有的内建urlFor Debug。

博客标题不能为空 1883

ChromiumFX.dll,ChromiumWebBrowser.dll,libcfx64.dll

ChromiumFX.dll,ChromiumWebBrowser.dll,libcfx64.dll,一共三个,个人备份用

Blink-LED_blink_document_blinkload官网_

MPPT SOLAR CHARGER CUM INTELLIGENT LOAD SHARING SYSTEM

chromium 55 URL 加载流程

浏览器从界面上看都很简单,输入一个地址后就可以跳转,今天这里先整理chromiumAndroidWebView.apk中从输入URL,到资源加载的流程,暂不涉及渲染,渲染后续进行介绍。从Java层往c++层逐步分析。 AndroidWebView.apk启动后有个地址输入栏,如果输入地址按下确定键会调用到loadUrl进行url加载。 private void initi...

木希博客 1036

自动驾驶仿真工具链集成:ECU TEST与VTD、VERISTAND的深度配置指南

本文详细介绍了自动驾驶仿真测试中ECU TEST、VTD与VERISTAND三大核心工具的深度集成与连接配置方法。通过解析工具链的角色分工,提供从单机到分布式部署的实战指南,并重点阐述了Test Bench Configuration与Test Configuration的关键参数设置、SSH免密登录配置,以及在线与离线工作模式的切换技巧,旨在帮助测试工程师高效构建稳定、自动化的硬件在环测试环境。

wind6的博客 791

Chromium源码--网络请求流程分析

转载请注明出处:http://www.cnblogs.com/fangkm/p/3784660.html 本文探讨一下chromium中加载URL的流程,具体来说是从地址栏输入URL地址到通过URLRequest类请求http流的过程。 为避免繁琐, URL请求过程中的NavigationController类和WebContents类姑且略过,直接从RenderViewHostImpl::...

weixin_30773135的博客 476

Ubuntu20.04系统Cuckoo sandbox所需环境搭建及安装(超详细图文)

请勿叫我大神,我只是互联网的搬运工~ 前言 本教程以Ubuntu20桌面版作为示范,服务器版同样适用,但可能稍微麻烦一点,服务器版本的话安装Xmanage套装使用可能会相对轻松一些,由于后面会使用到vbox的使用,对vbox命令行操作不熟悉的小伙伴用xmanage可能会相对轻松一点。 提示:以下是本篇文章正文内容,下面案例可供参考 安装ubuntu20桌面版 步骤1:转到https://ubuntu.com/download/desktop下载下载.iso。 步骤2:使用您选择的虚拟机监控程序(VMWa

ElsonHY的博客 1万+

Arxml文件可视化:当汽车软件架构遇见交互式设计工具

本文探讨了Arxml文件在汽车电子系统开发中的可视化技术,结合AUTOSAR架构标准,介绍了如何利用现代Web技术构建交互式设计工具。通过三维组件关系图、动态数据流展示和版本对比等功能,显著提升开发效率和架构评审质量,适用于MBD和ASPICE开发流程。

weixin_29050271的博客 429

chromium是如何实现http解析的

上一节我们介绍了Chrome对于DNS协议的解析,今天我们继续介绍一个更为大家所熟知的协议,HTTP协议。 HTTP协议是一种很常见的协议,在chromium网络库中,对HTTP的解析主要是分为两部分,一部分是去缓存数据的获取,另外一部分则是重新加载网络资源。简单点说就是当我们在浏览器中输入 http://www.bytedance.net 的时候,优先去浏览器中的缓存数据查找是否存在相应的资源,

帝都码农 1万+

新手必看:Infineon Memtools烧录配置全流程(附常见错误解决方案)

本文为嵌入式开发新手提供了Infineon AURIX开发环境搭建与Memtools烧录的全流程实战指南。详细解析了ADS、DAS和Memtools三大核心工具的角色与协同关系,并重点讲解了Memtools的图形界面配置步骤、烧录操作流程,以及针对“无法连接设备”、“编程失败”等常见错误的系统性排查与解决方案,帮助开发者快速上手并规避典型陷阱。

weixin_29189377的博客 636

chromium:LoadUrl之后会发生那些事情之GraphicsLayer创建

一 综述 在上一篇(五)中,分析CompositedLayer的创建过程,在blink中每一个CompositedLayer都会存在一个后端存储,它就是GraphicsLayer,GraphicsLayer存储了网页上LayoutObject的paint方法中的绘制命令,当网页(失效区域)中所有LayoutObject的绘制命令都收集完成后,cc就会执行各个layer的合成操作,然后会交给GPU

Fantasy_116的专栏 1419

YOLOv8剪枝 lamp剪枝测试精度仅掉0.7个点,速度提高11.8fps!

该摘要介绍了LAMP剪枝方法的创新点和理论分析,重点突出了其最小化L2失真和分层自适应剪枝的特性。LAMP通过引入ξ变量在最坏情况下优化剪枝失真,并简化了计算过程。文章还提供了代码移植的具体步骤,包括创建compress.py文件和相关配置说明。

FJN110的博客 1114

C#读取和写入excel表数据--手把手教详解

C#读写excel数据详解

如如水的博客 4056

Chromium源码阅读:从页面加载到元素展示(1)

​今天,我们一起来看看一个html元素,是如何绘制到界面上。我们选择了最简单的场景,便于快速掌握总体的渲染流程。

hebhljdx的博客 2025

使用Mask2Former和X-Decoder训练自定义数据集及结果复现报告

本报告记录了使用MMDetection框架中的Mask2Former和X-Decoder模型在自定义数据集上的训练过程。报告包含环境配置、数据集准备、模型训练与优化(解决了Mask2Former的PQ值异常问题)、性能评估等关键环节。详细展示了从数据集转换(将客户提供的COCO格式数据适配MMDetection框架)、配置文件修改、到最终模型训练和评估的全流程。特别针对Mask2Former训练中的PQ值异常问题提供了解决方案,并对比了两种模型在自定义数据集上的表现。报告还包含完整的代码实现和技术细节。

huanghm88的专栏 1104

chromium和Blink引擎,内存的管理策略

Blink是Chromium和Chrome等浏览器使用的渲染引擎。Chromium是一个开源项目,是 Chrome 的基础,而 Chromium 自身并不包含 Google 的专有服务。Chrome是基于Chromium开发的,并在其基础上增加了专有功能。具体来说,Edge 使用Blink 引擎来渲染网页,负责处理 HTML、CSS、布局和图像渲染等内容,而V8 引擎负责执行网页中的 JavaScript。网络请求处理:处理网页请求、数据传输等。用户界面(UI)和扩展支持。

lf_1234的博客 1875

【AI智能体】Codex 浏览器操作自动化任务实战操作详解

【AI智能体】Codex 浏览器操作自动化任务实战操作详解

congge 4214

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

Chromium的多进程资源加载

【欢迎转载,转载时,请注明出处http://blog.youkuaiyun.com/yl02520/article/details/21285745】 原文出自Chromium的官方文档Multi-processResource Loading,本文一部分来自对原文的翻译,另外也对原文某些部分做了必要的修改和补充,也添加了一些自己的理解。 在阅读本文之前,建议先阅读另外一篇博文“Chromium浏览器的多

HTML5, Chromium和WebKit技术 3332

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

认识Chromium

Chromium是Google主导的开源浏览器项目,作为Chrome等浏览器的基础,采用Blink渲染引擎和V8 JS引擎,具有多进程架构、沙盒机制等技术特点。其高性能、安全性、扩展性及跨平台支持使其成为现代浏览器的标杆。项目支持高度定制,代码结构清晰,开发流程规范,被Microsoft Edge等众多浏览器采用。未来将持续优化性能安全,加强隐私保护,支持新兴Web技术发展。

onlymscn的博客 1777

汉书HE8,好用的汇编代码编写工具

汉书HE8,好用的汇编代码编写工具早期编写汇编代码所用功能强大

最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版

Part-E1-SDIO-Specification-Ver4.00-Final-120220.pdf:最新的sdio 4.0 spec 协议标准 带书签 高清完整PDF版,包括SDIO 接口的外设,SDIO 接口官方协议等。

chromium kernel资源加载、解析、三树合成浅析(chromium39)

chromium 网页的加载 与三树合成

你吧吧的专栏 1707

渲染引擎Blink整体架构讲解

本文系统介绍了Blink引擎的架构与工作原理。Blink作为Chromium核心渲染引擎,采用多进程架构运行在渲染进程中。其核心模块包括DOM、CSSOM、样式解析、布局、绘制和合成等。页面渲染流程涵盖HTML解析、CSS解析、构建渲染树、布局计算、分层合成和最终绘制显示等关键阶段。Blink通过分层合成、GPU加速和增量更新等机制优化性能。文章还对比了Blink与WebKit的区别,详解了布局算法和绘制流程,分析了性能瓶颈与优化实践,并展望了WebGPU集成和多线程优化等前沿发展方向。

onlymscn的博客 1804

Chrome内核解析 -- 背景篇:Chrome, Chromium, WebKit, WebKit2, Blink

极其容易混淆的几个概念,它们是WebKit和WebKit2,Chromium和Chrome, Blink。

YxiaoqiR的博客 4203
上一篇: chromium网络栈学习
下一篇: 程序员实用算法阅读总结
csshell2002
博客等级 码龄11年 30粉丝 41原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值