浏览器内核入门

chromium大学

chromium doc

 

• How cc Works 中文翻译 浏览器的图层 layer 如何合成
• 像素的一生:
• chrome 渲染 体系架构 Overview of the RenderingNG architecture
• 上面的chrome原站
•  

现代浏览器内部揭秘

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

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

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

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

---

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

---

 

怎样阅读 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进程）进行最后的渲染。