blink渲染知识(一)

http://dev.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome



4大trees:

TheDOM tree, whichis our fundamental retained model

TheRenderObject tree,which has a 1:1mapping to the DOM tree’s visible nodes.RenderObjects know how topaint their corresponding DOM nodes.

TheRenderLayer tree, madeup of RenderLayers that map to a RenderObject on the RenderObjecttree. The mapping is many-to-one, as each RenderObject is eitherassociated with its own RenderLayer or the RenderLayer of its firstancestor that has one. The RenderLayer tree preserves z-orderingamongst layers.

TheGraphicsLayer tree,mapping GraphicsLayers one-to-many RenderLayers.



Graphicslayer tree中每个graphiclayer 对应1或多个renderlayer.Graphiclayer有backingstore.



Compositor:

用来管理graphicslayertrees, 以及负责frame的liftcycle.代码在src/cc下。

compositor把layer内容composit到一起,叫做drawing.

各个layer产生自己的内容,叫做painting.如果是paint到bitmap上,就用softwarerasterization. 如果是paint到texture上就用hardwarerasterization, 意思是paint操作也有软硬之分。

先painting,再drawing.

当browser需要一个frame时,compositor执行draw操作(也就是composite操作),就可以了。

Every time the browser needs to make a new frame, the compositordraws. Note this (confusing) terminology distinction: drawing is thecompositor combining layers into the final screen image; whilepainting is the population of layers’ backings (bitmaps withsoftware rasterization; textures in hardware rasterization).






硬件加速的compositor模式下,compositor运行于一个独立的线程,他的输入是graphicslayer(composing layer)以及skpicture(从renderlayerpaint到skcanvas中的中间结果,可以认为是一些displaylist, 一些命令)。他要发送opengl命令给GPU线程。让gpu完成图像的合成等操作。Graphicslayers通过一些实现了Web*Layers接口的平台相关的Web*Layers来表现他的内容.这些也是compositor的输入。也叫做compostorlayer, cc layer. Graphic layer有backingsurface用于存储bitmap. Graphic layer的backingsurface和SkPIcture的关系?



所以render线程,处理renderlayer tree,

compositor 线程也叫做impl线程。

compositor线程有一份renderlayer tree copy,以及graphicslayer tree, 以及skpictures,从而他工作起来减少了对mainthread的依赖.并向gpu线程发送命令.

Render线程里的有LayerTreeHost,而compositor线程有一份copy叫做LayerTreeHostImpl,

The two layer trees are kept synchronized by a series of messagesknown as the commit, mediated by the compositor’s scheduler (incc/trees/thread_proxy.cc).The commit transfers the main thread’s state of the world to thecompositor thread (including an updated layer tree, any new SkPicturerecordings, etc), blocking the main thread so this synchronizationcan occur. It’s the final step during which the main thread isinvolved in production of a particular frame.


Mainthread向compositorthread同步layerTree和SkPicture数据。这叫做commit.由scheduler完成。



gpu线程完和硬件打交道。



没有硬件compositor的模式下,各个render把绘制完成的各自的内容bitmap发送给brower,browser把它们composting到一起。有了hardwarecompositor之后,就可以有一个gpuprocess专门负责和gpu打交道完成这些硬件的compostor工作。



Compositor应该位于renderprocess, 所以compositor线程和gpu线程应该不是一个。最开始,compositor在mainthread, 后来挪出来成为一个独立thread.再后来,又增加了工作量(impl-sidepainting)

Renderer process里面的所有gpu操作都通过commandbuffer发送给gpu进程。Gpu进程解析执行。

在android里有这三个线程么:compositor线程?render主线程?还有gpu线程?抑或压根没有gpu线程。是的,三个线程。



Compositor操作就是要产生最终的图形。

Compositor使用GLEs的api调用图形操作,但这写操作可能并不是直接操作图形,可能被转换成commands发给gpuprocess. 或者gpu线程。



render主线程的处理到了renderlayertree生成就截至了。

一些renderlayer还需要和graphicslayer关联,也就是compositinglayer关联,并且需要raster到graphicslayer的后端存储里,这叫rasterization。这个操作可以是软件,硬件完成。如果有gpu应该硬件,效率高。他们会在一些独立的workerthread里去完成。所以不是renderthread, compositor thread,也不是gputhread.



render要先paint其renderlayer到SkPicture里,然后raster线程会从skPicture里拿到displaylist,调用gpu去完成真正的raster.



Renderthread paint的结果skpicture交给compositorthread的过程叫做commit.



graphicslayer的内容被raster后,剩下就是compositorthread的任务了,compositorthread把这些各个compositorlayer的已经有的图像内容合成到一起,这些操作是靠gl命令命令完成,所以他把gl命令发送给gpu线程去执行。gpu完成真正的合成。并且直接画到屏幕上的。



下面看看:

http://dev.chromium.org/developers/design-documents/compositor-thread-architecture





LayerTreeHost和LayerTreeHostImpl分别是mainthread和renderthread维护的layertree.



因为compositior可以和renderthread在一个线程,也可以是独立线程,不管哪种,为了对上层提供较为统一的抽象接口,引入了threadProxy和singleThreadProxy,前者使用于compositor在独立线程的模式,后者使用于compositor和render在一个线程的模式。



网上的ppt:

chromiumrending pipeline:

http://www.slideshare.net/HyungwookLee/android-chromium-rendering-pipeline



chrome渲染的过程:

http://blog.youkuaiyun.com/jaylinzhou/article/details/18313505



chromium软件渲染:

http://blog.youkuaiyun.com/milado_nju/article/details/7455348





ChromiumGraphics: Android L平台上WebView的变化及其对浏览器厂商的影响分析

http://blog.youkuaiyun.com/hongbomin/article/details/40799167?utm_source=tuicool





Chromiumon Android: 分析ChromiumWebView的软件渲染方式:

http://blog.youkuaiyun.com/hongbomin/article/details/17931223



基于chromium内核的webview实现:

http://blog.youkuaiyun.com/hongbomin/article/details/17931377



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

相关推荐

How Rendering Work (in WebKit and Blink)

文章包括的主要内容如下 — 渲染基础 - DOM & RenderObject & RenderLayer WebView,绘制与混合,多线程渲染 硬件加速 分块渲染 图层混合加速 网页游戏渲染 - Canvas & WebGL

THINK . DESIGN . CODE 1万+

Blink是如何工作的

概述 Blink开发并不简单。对于Blink开发新手,不简单是因为,为了实现一个非常快的渲染引擎,已经引入了许多Blink特定的概念和编程约定。 即使对于经验丰富的 Blink 开发人员来说,这也并不容易,因为 Blink 非常庞大,而且对性能、内存和安全性极为敏感。 本文旨在从“3千米”高空视角来描述“Blink如何工作”,希望能够帮助Blink开发者快速熟悉Blink的架构: 本文档不是关于Blink细节构成和编码规则(可能变动与过时)的手册、指南。相反,该文档简明地描述了 Blink 的基本原

2962

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

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

weixin_32925455的博客 484

Chromium硬件加速渲染的UI合成过程分析

在Chromium中,Render端和WebGL端绘制出来的UI最终是通过Browser端显示在屏幕上的。换句话说,就是Browser端负责合成Render端和WebGL端的UI。这涉及到不同OpenGL上下文之间的资源传递和同步问题。其中,资源传递问题通过Mailbox机制解决,同步问题通过Sync Point机制解决。本文接下来就分析Browser端合成Render端和WebGL端UI的过程。

老罗的Android之旅 2万+

求助:有没有基于pscad的锂电池仿真模型

求助:有没有基于pscad的锂电池仿真模型 欢迎使用Markdown编辑器 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。 新的改变没有 我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你用它写...

qq_38922523的博客 1222

密码学小白必看:三大顶级会议论文下载与阅读指南(附完整资源链接)

本文为密码学初学者提供了系统获取和阅读三大顶级会议(Crypto、Eurocrypt、Asiacrypt)论文的实战指南。详细介绍了通过IACR官方渠道、ePrint预印本等权威资源免费下载论文的方法,并分享了高效筛选、精读核心章节及构建个人知识体系的具体策略,帮助读者快速切入密码学研究前沿。

weixin_28363123的博客 415

Blink和V8的关系

Blink 和 V8 是 Chromium 浏览器(以及基于 Chromium 的浏览器,如 Chrome、Edge 等)中两个核心但职责不同的组件,它们共同协作以实现网页的渲染和执行。(Rendering Engine),负责解析 HTML、CSS 并管理网页的布局(Layout)、绘制(Painting)和合成(Compositing)。(接口描述语言)定义 DOM API,并自动生成 V8 可调用的绑定代码,实现 JavaScript 与 C++(Blink 的实现语言)的交互。

liangshanbo1215的博客 685

探针卡技术演进:从金线微针到MEMS探针的Wafer Sort革命

本文探讨了探针卡技术从传统金线微针到MEMS探针的演进,及其对晶圆测试(Wafer Sort)的革命性影响。随着芯片焊垫间距进入45微米以下,MEMS技术凭借其超高精度、超长寿命和卓越的信号完整性,成为应对高密度、高速及3D IC测试挑战的关键,显著提升了测试效率与稳定性。

lstm7chronicler的博客 365

网页的相关概念

本文介绍网页与HTML基础概念以及浏览器相关知识。网页是因特网上用于展示内容的页面,是网站的组成单元,网站由多个网页集合而成,网页多为htm、html格式,依靠浏览器解析渲染。 HTML即超文本标记语言,属于标记语言而非C、Java这类编程语言,依靠标记标签描述网页。超文本包含两层含义,一是支持图片、音视频等多媒体内容,二是支持跨文件、跨主机的链接跳转。 网页由各类元素构成,通过HTML标签描述,交由浏览器解析展示。五大主流浏览器各有对应内核,Chrome使用Blink内核市场占比最高;国内多数浏览器采

2303_81923771的博客 210

电池管理系统(BMS)系列(四)—数据采集之温度

属于BMS系列文章,介绍了电池包温度采集相关方式

zxx52113140的博客 5461

【亲测有效】OpenClaw Gateway 出现 “(no output)“ 卡死问题完整解决指南:从手动重启到 systemd Watchdog 自动恢复

最近在使用 OpenClaw(自托管 AI 助手框架,前身 Clawdbot/Moltbot)时,遇到了一个非常常见的顽疾:TUI(终端界面)或 Telegram 等通道经常显示 "(no output)",消息发出去后机器人完全没反应,看起来像是卡死了。

hampeter的博客 8611

渲染引擎Blink整体架构讲解

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

onlymscn的博客 1804

RV1106G3的AOV下的yolov5调试记录

本文介绍了基于LuckFoxPicoMax开发板的RV1106芯片调试经验,重点包括AOV(Always-On Vision)和Yolov5目标检测的实现。在硬件方面,板载1TOPS NPU、256MB内存,并更换为SPI NOR存储。软件调试涉及MK配置文件修改、设备树调整(按键唤醒和sensor配置)以及程序自启动设置。Yolov5模型优化为320*320尺寸,推理时间约45ms。系统采用VI采图与AI识别通过共享内存通信的方案,实测功耗在20-35mA范围。文章还指出了当前存在的功耗优化、ISP调试等

fzktongyong的博客 1715

Blink: Chromium的新渲染引擎

编自http://www.chromium.org/blink 关于blink  Google Chrome/Chromium 从创始至今一直使用 WebKit(WebCore) 作为 HTML/CSS 渲染引擎。WebKit 早先由 Apple 由 KHTML 项目 fork 出来,用于 Safari 浏览器的 Web 引擎。由于宽松的协议、轻量级的设计和便捷的应用程序内嵌

doon的专栏 4460

重回童年的经典系列☀️| 【坦克大战3D版】游戏制作+解析

带你重回童年的经典系列——坦克大战3D版制作,感兴趣的可以看看呀~

努力前行,总会成为自己心中的那道光 5万+

如何设计提示词来减少 AI 的幻觉问题?

如何设计提示词来减少 AI 的幻觉问题?

我哎GIS博客 2472

Chromium浏览器之渲染引擎Blink

Blink是谷歌公司的浏览器Chromium使用的渲染引擎。 Blink处于一个包容性的开源社区里,它欢迎任何人分享其使命。 Blink是在一种抽象的平台上实现的, 因此本身不能运行。 Chromium Content module提供这个抽象平台运行所需的Blink的实现。 Content模块的开发有专门的文档描述。有关调试Blink一些提示和建议,请参阅入门Blink调试页面。

不积跬步无以至千里,不积小流无以成江海 5729

华为的C语言编程规范.pdf

华为技术有限公司内部技术规范。本规范制定了编写C语言程序的基本原则、规则和建议。从代码的清晰、简洁、可测试、安全、程序效率、可移植各个方面对C语言编程作出了具体指导。

WebKit/Blink 渲染网页的主要步骤

1.  发送网络资源请求。      WebKit在渲染网页之前,首先需要从网络上下载资源文件,这里把资源文件分为两类,一类称为主资源文件,比如Frame,另外一类成为子资源文件,比如图片,JavaScript脚本,CSS脚本,字体,音频视频文件等等。以前WebKit在加载这两种资源文件时采用不同的路径,主资源文件通过DocumentLoader类来加载,子资源文件通过DocLoader类来加载

HTML5, Chromium和WebKit技术 3783

贝叶斯统计 [韦来生编]

贝叶斯(Bayes)统计是近几十年来迅速发展起来的数理统计的一个重要分支。贝叶斯方法与经典统计方法的主要不同之处是进行统计推断时除了利用样本信息外,还要利用参数的先验信息,因此可以提高统计推断或统计决策的效果。它在经济、金融、生物、医学、自然科学和社会科学等许多领域具有广泛的应用。贝叶斯方法的研究已渗透到了统计学的几乎所有领域。作者在给中国科学技术大学概率论与数理统计专业本科生开设的“数理统计”课程中有一章专门讲授“贝叶斯方法和统计决策理论”,近十年来也给中国科学技术大学概率统计专业研究生开设过几次“贝叶斯分析”课。本书是在对过去讲稿的内容作了适当的增减和调整的基础上完成的。  本书共分六章。第1章是绪论,介绍了贝叶斯统计的若干基本概念,同时对必要的数理统计的基础知识有重点地作了回顾。第二章介绍了确定先验分布的若干可供选择的方法。第三章介绍了几类常见统计模型参数的后验分布的主要结果和计算方法。第四章和第五章分别介绍了“贝叶斯统计推断”和“贝叶斯统计决策”的内容。第六章介绍了贝叶斯统计计算的若干方法,包括蒙特卡洛方法和马尔可夫链蒙特卡洛(MCMC)方法以及相关统计软件的简介。本书的每一章附右大量的例题和习题,书末附有常用的几个表格和部分习题解答供读者查用。  大约可在54学时内讲授本书的第1章至第六章的主要内容,教师可根据学时需要选讲本书第1章至第六章的部分内容。书中标“*”号的章节可略去不讲,留给读者作为阅读材料。第六章例题中的R代码和部分例题的数据文件等可从作者个人主页下载。  作者在编写本书的过程中参考了J.O.Berger教授的《统计决策论及贝叶斯分析》和茆诗松教授编写的《贝叶斯统计》等书中的一些内容,以及《贝叶斯分析》一书中由张伟平博士编写的有关贝叶斯统计计算的一些内容。在此表示衷心感谢。  本书编写准备过程中,中国科学技术大学统计与金融系的几个研究生帮助完成了本书部分中文的录入和排版,作者对他们的辛勤工作表示真诚的感谢。高等教育出版社为本书的出版给予了大力支持。在此一并致谢。

锂电池充电器电路设计 里面有电路

锂电池充电器电路设计 里面有电路 3.7V升压到5V电路设计。

Chromium 系列之(5) blink相关知识

Chromium 系列之(5) blink相关知识 因为这段时间找工作,问的内核的相关问题比较多,所以记录下这些blink的相关的基础知识,一是帮助自己更好的理解blink,另一方面也当作笔记记录下来。 Blink的层级结构 一方面是HTML和CSS以及布局和JavaScript引擎部分,注意Blink中的JavaScript引擎为V8引擎。 另一方面是和系统相关的接口层,例如调用openGL等和音视频解码。Blink中的2D使用的是Skia,音频和视频是重点。 所以就会变成下面的样子。 Blink调用

wqqgtao的专栏 1732

RU DOS版、EFI版32bit/64bit BIOS常用工具

DOS版、EFI版的RU工具,可用来查看IO、MEM、PCI、SMBIOS等资源。亲测在EFI SHELL下可用。

Blink源码解析

《Blink渲染引擎架构与核心流程解析》摘要:Blink作为Chromium核心渲染引擎,主要负责HTML/CSS/JS解析(生成DOM/CSSOM)、布局计算、绘制渲染和事件处理。其架构包含DOM、Layout、Paint等模块,通过多阶段处理将网页转化为可视化内容:从DOM树构建、样式计算到RenderTree生成,再到分层绘制与GPU合成。关键特性包括增量式布局优化、硬件加速合成,以及与Chromium多进程架构的深度集成(运行在Renderer进程)。

onlymscn的博客 2220

blink渲染知识14 - 阶段总结

总结一下执行流程。 4.5.0上,ui线程,impl线程就是执行childcompositor的ui线程。 1.ui 线程onDraw=>awContents.onDraw会调用chilidcompositor来使用其activelayer tree合成一个compositorframe,也就是调用BrowserViewRender::onDrawHW.并向webcore

519

Blink渲染调试记录Ⅰ

概述 这是本人对Blink渲染的调试记录,调试的Chromium版本为95.0.4638.54 调试入口为"third_party\blink\renderer\core\dom\element.cc",入口函数是2720行的Element::AttachLayoutTree函数。 主要函数 这个函数的主要函数如下所示: void Element::AttachLayoutTree(AttachContext& context) { // 获取CSS样式 const ComputedStyle

qq_45827926的博客 420

blink渲染知识12 - 硬件渲染之触发beginframe

ThreadProxy::BeginMainFrame会触发renderlayer tree中各layer的paint.那么谁触发的BeginMainFrame? ThreadProxy::ScheduledActionSendBeginMainFrame -> Proxy::MainThreadTaskRunner()->PostTask( FROM_HERE, base::

1304

Blink Shell终极指南:iOS上基于Web的现代终端渲染技术解析

Blink Shell是一款专为iOS打造的强大移动终端应用,基于Mosh协议提供稳定的远程连接体验。本文将深入解析Blink Shell如何利用Web技术实现高效的终端渲染,为开发者和系统管理员提供在移动设备上的流畅命令行操作体验。 ## 现代终端渲染技术架构 Blink Shell采用创新的Web技术栈构建终端界面,结合原生iOS组件实现高性能渲染。核心渲染引擎基于hterm(HTML T

gitblog_00770的博客 1355

【读书笔记】【WebKit 技术内 幕(一)】浏览器架构与浏览器内核;chromium、webkit和blink的渲染过程;chromium、webkit的架构与代码结构;webkit2架构

浏览器架构与浏览器内核;chromium、webkit和blink的渲染过程;chromium、webkit的架构与代码结构;webkit2架构

多丰富下自己呀 4612

blink tutorial

(1) Blink cannot run alone, and (2) porting to other platforms happens at a different layer   Instead of adding platform-specific code to Blink, you should use Chromium’s content layer, whi...

MQ3639的博客 245
上一篇: renderobject相关类的继承关系
下一篇: webkit内部的WebView, page, WebFrame, Frame, document, frameView, RenderView, RenderFrame, Widget的关系和构建
csshell2002
博客等级 码龄11年 30粉丝 41原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值