浏览器内核入门

chromium大学

chromium doc

 

现代浏览器内部揭秘

[译] 现代浏览器内部揭秘(第一部分) - 掘金 (juejin.cn)

[译] 现代浏览器内部揭秘(第二部分) - 掘金 (juejin.cn)

[译] 现代浏览器内部揭秘(第三部分) - 掘金 (juejin.cn)

[译] 现代浏览器内部揭秘(第四部分) - 掘金 (juejin.cn)


【译】浏览器如何工作:在现代web浏览器场景的之下 - 掘金 (juejin.cn)


https://segmentfault.com/a/1190000016335571 像素的一生


怎样阅读 Chromium 源码? - 知乎 (zhihu.com)

参考:

一个浏览器引擎toy:https://limpet.net/mbrubeck/2014/08/08/toy-layout-engine-1.html

toy技术实现分析:https://tigercosmos.xyz/post/2018/02/browser/browser_series_33/

 

2,调试浏览器tips

Dev Tips - Developer Tips by Umar Hansa (umaar.com) 

 

3. (18条消息) Chromium网页加载过程简要介绍和学习计划_罗升阳的博客-CSDN博客  dom,render tree,graphic tree


《Chromium内核原理之blink内核工作解密》
《Chromium内核原理之多进程架构》
《Chromium内核原理之进程间通信(IPC)》
《Chromium内核原理之网络栈》
《Chromium内核原理之网络栈HTTP Cache》
《Chromium内核原理之Preconnect》
《Chromium内核原理之Prerender》
《Chromium内核原理之cronet独立化》

https://zhuanlan.zhihu.com/p/34957535 裁剪出net模块

Chromium(2/5):消息循环和socket库

(16条消息) rtsp协议_Chromium(3/5):rtsp客户端_weixin_39921131的博客-CSDN博客

https://zhuanlan.zhihu.com/p/62381831 http rtsp服务

https://zhuanlan.zhihu.com/p/143422507 http client

 

(22条消息) 浏览器的渲染机制(一)_hancao97的博客-CSDN博客_inline-flow

(22条消息) 浏览器的渲染机制(二)_hancao97的博客-CSDN博客

(22条消息) 【精简版】浏览器渲染机制(完整流程概述)_hancao97的博客-CSDN博客

Activate
在Commit之后,Draw之前有一个Activate操作。Raster和Draw都发生在合成器线程里的Layer List上,但是我们知道Raster操作是异步的,有可能需要执行Draw操作的时候,Raster操作还没完成,这个时候就需要解决这个问题。

于是它将LayerTree分为了:

PendingTree:负责接收commit,然后将Layer进行Raster操作

ActiveTree:会从这里取出光栅化好的Layer进行draw操作。


在 Impl 端有三个 cc::LayerImpl 树,分别是 Pending,Active,Recycle 树。Commit 阶段提交的目标其实就是 Pending 树,Raster 的结果也被存储在了 Pending 树中。Raster阶段会把图块转换成位图,存储在内存中,当然这个内存地址的引用也会被记录,记录在 cc::PictureLayerImpl中(以后会用!)。 

在 Activate 阶段,Pending 树中的所有 cc::LayerImpl 会被复制到 Active 树中,为了避免频繁的创建 cc::LayerImpl 对象,此时 Pending 树并不会被销毁,而是退化为 Recycle 树。

和主线程 cc::Layer 树不同,cc::LayerImpl 树并不是自己维护树形结构的,而是由 cc::LayerTreeImpl 对象来维护 cc::LayerImpl 树的。三个 Impl 树分别对应三个 cc::LayerTreeImpl 对象。

Draw
Draw 阶段并不执行真正的绘制,而是遍历 Active 树中的 cc::LayerImpl 对象,并调用它的 cc::LayerImpl::AppendQuads 方法创建合适的 viz::DrawQuad 放入 CompositorFrame 的 RenderPass 中。cc::LayerImpl 中的资源会被创建为 viz::TransferabelResource 存入 CompositorFrame 的资源列表中。至此一个 viz::CompositorFrame 对象创建完毕,最后通过 cc::LayerTreeFrameSink 接口将该 CompositorFrame 发送到给 viz 进程(GPU进程)进行渲染。

到了Draw这个步骤,当每个图块都被光栅化之后,合成器线程会为每个图块生成draw quads(在屏幕的指定位置绘制图块的指令,也包含了属性树里面的变换,特效等操作),这些draw quads会被封装在CompositorFrame对象里面,CompositorFrame对象也是Render Process(渲染进程)的产物,它会被提交到Gpu Process中。

Draw指的就是 把光栅化的图块,转换成draw quads的过程。 最后CompositorFrame会发送到viz进程(GPU进程)进行最后的渲染。

 

posted @ 2022-07-05 09:59  Bigben  阅读(352)  评论(0编辑  收藏  举报