blink渲染知识14 - 阶段总结

总结一下执行流程。


4.5.0上,ui线程,impl线程就是执行childcompositor的ui线程。


1.ui 线程onDraw=>awContents.onDraw会调用chilidcompositor来使用其activelayer tree合成一个compositorframe,也就是调用BrowserViewRender::onDrawHW.并向webcore线程申请beginframe.然后向系统申请一次drawGl操作。申请parentcompositor执行合成操作。


2.系统render线程,调用drawGL操作,执行HardWareRender::commitFrame.把之前的childcompositor合成的compositorframe commit到parentcompositor自己维护的layertree里面。


3.系统render线程,执行drawGl操作。调用parentcompositor 执行合成操作。也就是hardwareRender::drawGL函数。并不需要调用childcompositor的合成,也就是说不许要调用BrowserViewRender::onDrawHW。


5.webcore线程的beginFrame执行paint操作后,也就是beginframe操作后,需要把绘制完成的layertree commit给implthread的pendinglayer tree. Commit操作在impl/ui线程执行,webcore线程需要等待commit完成。


ui线程有一个messagepump, message loop, 会执行post过来的任务。并且其中一个task是一个timer,定期检查是否有需要commit的操作。如果有就执行commit操作,同步renderlayers内容。将webcore线程的layertree copy到impl线程的pendinglayer tree里面。


6.当commit完成后,impl线程将webcore线程解锁。接着会创建一些raster任务,让一些工作线程执行raster任务。当raster执行完成后。impl线程得到通知,接着把被raster过的pendingtree 激活成activetree。激活后,触发一个redraw操作。因为有了新的activetree了。


7.又回到step1: ui线程的onDraw里执行draw操作,其实就是使用目前的activetree,执行合成,生成compositor frame.主要涉及到准备一些renderpass数据。


8.ui线程合成了compositorframe后执行swapbufer,就是把结果存起来,并向系统requestGL操作。


9.又回到step2: 系统render线程,执行drawGL操作,进行commit操作,把之前childcompositor合成的结果取出来,并挂载到parentcompositor的layertree上。


10.系统render线程执行drawGL操作,进行合成操作,把之前的合成结果中的renderpass取出来,把其中的quard绘制到当前的glcontext. 使用glcommand buffer. 如果要swap,也是使用gl的flush命令。


看着稍微有些乱:主要是因为涉及到三个线程,这三个线程的任务:

1.webcore线程:处理beginFrame任务,也就是生成renderlayer,并paint他们。


2.impl也就是ui线程,任务较多:

a. 执行commit操作,也就是从webcore线程把layertree copy到自己的pendinglayer tree.

b. 创建raster任务并分配给raster线程

c. 执行active操作,把被raster的pendinglayer tree激活成activelayer tree.

d. 响应系统的onDraw,使用activelayer tree合成出一份compositorframe. 以备parentcompositor 使用.并向webcore线程发送beginFrame的申请。也就是申请另一次paint.

e. 向系统render申请drawGL操作。


3.系统render线程任务:

drawGL是系统render线程进入chromium的唯一入口点,完成如下任务:

a. 将impl线程生成的compositorframe执行commit操作挂载到parentcompositor使用的layertree上成为一个子layer.

b. 遍历parentcompositor的layertree,调用drawLayer,其实就是处理compositorframe中的rendrepass数据。并生成gl命令在glcontext下绘制并合成。




目前有2点还没仔细看:

1.render 线程的生成的gl命令如何执行的,如何使用glcommand buffer的,glcommand 是不是也是执行在render线程?还是有专门的gpu线程?

2.raster操作具体是干了什么?我们知道impl线程合成compositorframe使用的activelayer tree是被raster线程raster过的,那么raster究竟干了什么?


一个大概的顺序:

1.webcore 线程paint

2.imipl线程commit到pendinglayer tree

3.impl线程启动raster任务,raster pending layer tree

4.impl线程activepending layer tree

5.impl线程使用activelayer tree合成compositorframe(含有renderpass)

6.render线程执行commit,把compositorframe挂载给parentcompositor layer tree

7.render线程合成,消耗compositorframe中的renderpass数据,生成gl命令。








How Blink Works 在 Blink 上开发绝非易事。对于新接触 Blink的开发者来说,要实现一个高效的渲染引擎,需要了解大量Blink特有的概念和编码约定。对于经验丰富的开发者来说亦非易事,因为 Blink 非常庞大,对性能、内存和安全性极为敏感。关于Blink开发的更多内容, 参考这里。 阅读详情

相关推荐

WebKit vs Blink:从 2013 年分叉到 2024 年的 5 大核心差异对比

本文深度解析了WebKit与Blink浏览器内核从2013年分叉到2024年的5大核心差异,包括架构理念、进程模型、渲染管线优化、标准支持及性能表现。通过对比分析,帮助开发者理解两大引擎的技术演进与实战影响,为技术选型提供专业参考。

bangtuo9862的博客 358

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

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

多丰富下自己呀 4612

Selenium实战:Python爬取拉勾网动态渲染职位数据

在Web开发领域,动态渲染技术已成为主流,它通过JavaScript在客户端异步加载和更新内容,这给传统基于静态HTML解析的爬虫带来了挑战。其核心原理在于,浏览器执行JS后才会生成完整的DOM树,数据并不直接存在于初始响应中。为了应对这一技术,Selenium作为浏览器自动化工具脱颖而出,它能模拟真实用户操作,等待页面完全渲染,从而获取动态内容。这项技术的价值在于突破了静态爬虫的局限,使得数据采集的范围扩展至电商、社交媒体、招聘平台等各类交互式网站。本文以拉勾网这一典型SPA应用为例,详细解析了如何利用S

weixin_33739627的博客 400

Blink是如何工作的

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

2962

Hermes视频自动化三大坑:指纹、渲染、校验断层实战避坑指南

浏览器自动化本质是模拟真实用户行为,其核心在于环境指纹一致性、DOM渲染时序可控性与页面状态可信校验。当面向B站、小红书等高对抗视频平台时,传统‘指令-执行’范式极易因指纹未继承、元素不可交互、骨架屏欺骗等问题失效。本文聚焦Hermes与Camofox协同场景,深入解析环境指纹断层、DOM渲染时序断层、行为逻辑校验断层三大典型问题,结合Playwright底层控制、browser_vision视觉锚点、OpenCV模板匹配等工程手段,提供可复现的‘人机协同状态机’落地路径,适用于AI视频信息采集、结构化归档

congsikuai0611的博客 460

知识型视频翻译:术语一致、视觉锚定与时空对齐实战

视频翻译不仅是语音转文字再翻译的线性过程,更是面向知识传递的多模态认知对齐任务。其核心在于理解‘专业术语’的领域约束性与‘指示代词’的视觉依赖性——前者要求翻译结果严格遵循标准文档(如GB/T、ISO),后者需将‘this waveform’等指代精准绑定到画面坐标。技术上需突破ASR时间漂移、端到端模型术语崩塌、视觉信息丢失三大瓶颈,通过分段增强架构实现语音预处理、领域自适应识别、知识图谱驱动翻译与毫秒级时空对齐。该方法已广泛应用于慕课本地化、工业培训出海及技术创作者全球分发等真实场景,兼顾准确性、可控性

weixin_34224941的博客 327

blink渲染知识(二) - webcore rendering basics

Dom tree和Rendertree是独立的tree. Render tree由renderobject构成,并且renderobject并不和DOMnode 一一对应。有些dommode可能没有renderobject. 比如有些节点的css属性标记为display:none不显示。 Domtree的节点可以通过renderer()函数得到对应的rendertree中的renderOb

451

Python画常见分布的概率密度图

因为做概随大作业,了解了一些python画概率分布图的方法。

qq_44807946的博客 5204

Dive Into Browser(二): 渲染

Into Browser(二): 渲染

purpose的博客 780

MT6816磁编码器在无人机电调中的实战应用:从选型到调试全记录

本文详细介绍了MT6816磁编码器在无人机电调系统中的实战应用,涵盖选型、硬件集成、软件配置到飞行测试的全流程。通过对比霍尔传感器和光电编码器,突出MT6816在角度分辨率、安装公差和抗振动能力等方面的优势,为无人机动力系统提供高精度控制解决方案。

pandas7gardener的博客 235

eDP/DP接口简介

目前,在视频传输协议以及接口领域,外部接口主要是DP与HDMI两分天下,当然之前出现过很多接口-VGA, DVI等等,最新平台基本以这两个为主;笔记本内部接口就基本上使用eDP((Embedded Display Port))作为标准接口来驱动液晶屏了。那么问题来了,eDP和DP,是完全兼容的么?eDP,DP,HDMI,这三种接口的显示器,可以插在同一个接口上使用么?这篇文章,就会从硬件和一部分协议的角度分析一下这三大协议。

weixin_50518899的博客 2万+

浏览器渲染原理以及过程,重排与重绘

浏览器渲染原理以及过程浏览器渲染过程构建DOM树构建CSSOM树构建渲染树渲染树布局渲染树绘制浏览器渲染浏览器主要组件结构渲染引擎渲染阻塞回流(reflow,重排)和重绘(repaint)回流(重排)重绘引起重排 浏览器渲染过程 以webkit渲染引擎为例: 1,根据html文件构建DOM树 2,根据CSS文件构建CSSOM树 3,根据DOM树和CSSOM树构建渲染树 4,对渲染树进行布局 5,渲染树绘制显示 构建DOM树 浏览器受到服务器响应的html文档后,遍历文档节点,生成DOM树,但是在构建DOM

qq_39225271的博客 845

用Python实现单层感知器:5分钟搞定逻辑与/或/异或分类(附避坑指南)

本文通过Python代码实战,详细讲解了单层感知器的核心原理与实现步骤,5分钟内即可完成逻辑与、或运算的分类任务。文章深入剖析了单层感知器的能力边界,解释了其无法解决异或(XOR)等线性不可分问题的根本原因,并提供了学习率设置、权重初始化等关键避坑指南,帮助初学者直观理解神经网络的基础。

ttt77的博客 1086

Pretext:AI驱动的排版库,从14MB到15KB的性能革命

在Web开发中,浏览器渲染管线中的布局(Layout)与样式计算(Style Recalculation)是影响页面性能的关键瓶颈,尤其在处理复杂CSS规则和动态内容时,容易触发昂贵的重排(Reflow)与重绘(Repaint),导致页面卡顿。传统解决方案往往试图在JavaScript层重建完整的排版引擎,带来了巨大的体积和性能开销。Pretext项目通过颠覆性思路,将计算从运行时转移到构建时,利用预计算生成紧凑的坐标数据,运行时直接调用底层Canvas API进行高效绘制,从而绕过了浏览器最耗时的环节。这

weixin_34341117的博客 290

FPGA驱动OV5640:从SCCB协议到图像数据采集的实战解析

本文详细解析了使用FPGA驱动OV5640摄像头模组的完整流程,从SCCB协议通信、寄存器配置到图像数据采集。重点阐述了SCCB(与I2C类似)协议的实现细节、关键的上电复位时序,以及如何通过状态机解析视频流时序并捕获图像数据,为嵌入式视觉开发提供了实战指南。

weixin_29191761的博客 188

STM32驱动数码管:从硬件连接到动态显示实现

本文详细介绍了使用STM32单片机驱动数码管的完整流程,从硬件连接到软件实现。内容涵盖共阳/共阴数码管原理、GPIO配置、段码表生成,并重点解析了多位数码管动态显示的核心技术,包括动态扫描原理、消影处理及实战代码,帮助开发者快速掌握这一嵌入式开发基础技能。

p5l2m9n4o6q的博客 576

腾讯X5内核技术解析与移动端网页优化实践

移动端网页渲染引擎是提升Web应用性能的关键技术组件。基于Blink+V8双引擎架构的腾讯X5内核,通过智能预加载和动态缓存策略,显著提升页面加载速度与JavaScript执行效率。该技术在电商等高交互场景中表现突出,CSS3动画帧率可达55fps以上。作为移动端WebView的增强方案,X5内核集成了安全防护、内存优化等实用功能,并支持截屏API等扩展能力。开发者在接入时需注意REM适配、Flex布局兼容等典型问题,通过TBS Inspector等工具可有效进行性能调优与问题排查。

cucanqi9387的博客 408

手把手教你模拟登录豆瓣并爬取个人书影音数据:从Cookie解析到反爬攻防实战

在开始写代码之前,先明确我们需要的工具。:建议用3.10以上版本,方便使用一些新特性(如match语句)httpx:比requests更现代,支持HTTP/2,异步性能强,连接池复用好:解析HTML,语法简单,容错性强selenium:仅用于处理登录时的滑块验证(模拟真人)pandas:最终数据清洗和导出Excel/CSVretrying:自动重试机制,应对临时封禁:随机UA,降低特征lxml:作为BeautifulSoup的解析器,速度快为什么不只用requests?

2201_76125261的博客 578

浏览器:浏览器底层原理全景深度解析(前端开发必备完整版)

全方位扩充、深度拆解、多表格结构化整理,覆盖浏览器发展史、市场格局、多进程架构、URL 全链路流程、渲染机制、回流重绘合成、V8 引擎、性能优化、浏览器识别、前端必备知识体系全模块,兼顾理论原理、对比表格、实战优化、面试考点,形成完整可落地的浏览器知识体系。

snow的博客 509

MTK_android11_WIFI(内网)和4G(外网)共存

MTK_android11_WIFI(内网)和4G(外网)共存

王涛的博客 2449

Devexpress16.2.6破解工具

Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具

AI重构排版引擎:从14MB到15KB,性能提升千倍的工程实践

在前端开发中,浏览器渲染引擎的排版(Layout)与绘制(Paint)是影响页面性能的关键环节,尤其在处理复杂文档和富文本编辑器时,传统通用排版引擎常因代码臃肿成为性能瓶颈。其原理基于对海量CSS规则和HTML结构的解释与实时计算,虽保证了完备性,却带来了高内存占用与计算开销。随着AI技术的普及,一种新的思路应运而生:利用程序合成等AI方法,将排版知识离线学习并编译成高度精简、场景专用的微型函数库,从而在特定应用场景下实现性能的质变。这种从“解释执行”到“编译生成”的转变,不仅大幅降低了内存占用和计算延迟,

weixin_30514745的博客 296

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

不会回答从输入url到页面显示发生了什么?这三张图教你

从用户输入 URL 到页面显示这中间浏览器做了什么,这应该算是一道非常经典的面试题了。不仅仅能考察面试者对于浏览器渲染原理的基本了解,还能从中延伸出很多的知识点和性能优化点。那今天我们就通...

大转转FE 388

数学建模模型总结

这是本人在两年内准备参加数学建模竞赛搜集到的模型资料,已经经过了本人的筛选和整理,希望能够对准备参加数学建模竞赛的学弟学妹们提供一些帮助!

浏览器、浏览器内核、浏览器地址栏输入URL后回车发生什么

服务器收到请求,会根据相关路由相关请求方式、请求参数以及对应信息、开始处理它的请求,并且会从数据库或者静态 资源服务调用客户端需要数据资源,这个阶段只是处理请求准备资源,并没有将结果返回。I在1995年诞生,是属于微软公司旗下的浏览器,IE浏览器当时是直接绑定在系统上面的,不可以卸载,IE在2022年6月份正式退役了,不再更新了,需要用Microsoft Edge浏览器。304:告诉客户端请求成功了,但是这个资源不是由服务器提供的,而是从客户端本地缓存获取的资源,目的是节省传输开销,性能优化。

2301_78901869的博客 180

MediaPipe Face Mesh:如何在移动设备上实现468点实时3D面部捕捉?

想要在移动设备上实现精准的实时面部识别和AR特效吗?MediaPipe Face Mesh正是为解决这一挑战而生的开源解决方案。它能够在普通摄像头输入下,实时检测并追踪468个3D面部关键点,为开发者提供强大的面部特征分析能力。无论你是要开发虚拟化妆应用、表情识别系统,还是增强现实滤镜,Face Mesh都能提供专业级的底层技术支持。 ## 为什么移动端面部识别如此困难?🤔 在移动设备上实现

gitblog_00566的博客 992

PHPStan 错误标识符 booleanOr.alwaysTrue 详解:`||` 表达式恒为 true 的检测、成因与修复

本篇技术指南围绕 PHPStan 错误标识符(error identifier)`booleanOr.alwaysTrue` 展开,讲解 PHPStan 在何种情况下判定布尔或表达式 `||` 的结果恒为 `true`、为何会报告该错误、以及如何在真实项目中定位并修复这类冗余条件与死代码。读完本文,你将掌握该标识符的触发模式、与 `logicalOr.alwaysTrue`、`booleanOr.

gitblog_00640的博客 684

MC68HC908TV24 OSD模块:硬件寄存器配置与软滚动、闪烁功能实现详解

在嵌入式视频显示系统中,片上显示(OSD)模块是一种关键的硬件图形叠加技术。其核心原理在于通过专用硬件与视频同步信号(HSYNC/VSYNC)严格锁步,将CPU从繁重的像素级渲染中解放出来,从而保证显示的实时性与低功耗。这项技术的核心价值在于实现了稳定、低延迟的屏幕信息叠加,广泛应用于电视、工业监控等设备的菜单、状态信息显示。从工程实践角度,深入理解并配置OSD的硬件寄存器是实现高级功能的基础。例如,通过操作双缓冲寄存器机制,可以避免显示撕裂;而巧妙运用矩阵起止寄存器和事件线中断,则能实现字符行的软滚动动画

weixin_34294649的博客 529
上一篇: blink渲染知识13- 硬件渲染之beginframe的处理以及一些后续步骤
下一篇: blink渲染知识15- gl命令的生成和处理(command buffer)
csshell2002
博客等级 码龄11年 30粉丝 41原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值