tornmy的博客

站在老罗的肩膀上：https://blog.youkuaiyun.com/luoshengyang/article/details/50450100Chromium在加载一个网页之前，需要在Browser进程创建一个Frame Tree。Browser进程为网页创建了Frame Tree之后，再请求Render进程加载其内容。Frame Tree将网页抽象为Render Frame。Render Fram...

站在老罗的肩膀上：https://blog.youkuaiyun.com/luoshengyang/article/details/51216442调用ProxyImpl::ScheduledActionCommit请求Compositor线程将刚刚绘制好的CC Layer Tree同步为CC Pending Layer Tree，如下所示：void ProxyImpl::ScheduledActi...

站在老罗的肩膀上：https://blog.youkuaiyun.com/luoshengyang/article/details/51348829CC Layer Tree 的绘制指令存储在displayitem的paint_op_buffer_中，要将绘制指令打包送入GPU，如下：开始准备光栅化的条件bool SchedulerStateMachine::ShouldPrepareTil...

站在老罗的肩膀上：https://blog.youkuaiyun.com/Luoshengyang/article/details/46855395多线程模型则是为了解决网页的卡顿问题。为了达到这个目的，Chromium的多线程模型是基于异步通信的。一个典型的异步通信过程如图1所示：图1  线程异步通信过程       Task-1被分解成三个子任务Task-1(1)、Task-1(2)和...

站在老罗的肩膀上：https://blog.youkuaiyun.com/luoshengyang/article/details/51148299网页绘图表面创建完成之后，调度器就会请求绘制CC Layer Tree，这样网页在加载完成之后就能快速显示出来。通过CC Layer Tree可以依次找到Graphics Layer Tree、Paint Layer Tree和Layout Object Tr...

chromium中广泛使用的bind模板， // Bind as RepeatingCallback.template <typename Functor, typename... Args>inline RepeatingCallback<MakeUnboundRunType<Functor, Args...>>BindRepeating(Func...

术语：消息管道：是一组端点. 每个endpoint有一个接受消息的队列, 在一个端点上写消息会高效地放入对端端点的消息队列上。所以消息管道是双工通信的。mojom文件：描述了接口，它们描述了类似proto files的强类型消息结构，通过binding generator可以产生对应于不同语言的文件。给定一个mojom interface和一条message pipe, 它的两个端点可...

//src/third_party/blink/renderer/core/paint/README.mdProperty Tree：DisplayItem：什么是property tree：Paint properties define characteristics of how a paint chunk should be drawn,such as the trans...

Chrome高性能的秘密：预连接、预加载与预渲染一箩筐的预加载技术Prefetching, preloading, prebrowsingPrefetching, preloading, prebrowsing (google)

站在老罗的肩膀上：https://blog.youkuaiyun.com/luoshengyang/article/details/50995124CC模块内部的状态机一旦检测到网页的Layer Tree创建和初始化完毕，就会通知调度器触发一个创建绘图表面的操作。CC模块在为网页创建绘图表面的过程中，也有伴随着网页分块管理器、资源池和光栅化工作者线程池等基础设施的创建。一旦这些基础设施准备完毕，网页才能开...

站在老罗的肩膀上：https://blog.youkuaiyun.com/luoshengyang/article/details/51054990调度器通过类SchedulerStateMachine描述内部的状态机。有以下4种状态class CC_EXPORT SchedulerStateMachine { public: ... // corresponding to previou...

站在老罗的肩膀上：https://blog.youkuaiyun.com/luoshengyang/article/details/50941980网页的Graphics Layer Tree是根据Paint Layer Tree创建的，而Graphics Layer Tree与CC模块创建的Layer Tree的节点是一一对应的关系，如图1所示：图1 Graphics Layer Tree与CC...

站在老罗的肩膀上：https://blog.youkuaiyun.com/luoshengyang/article/details/50527574Chromium在Browser进程中为网页创建了一个Frame Tree之后，会将网页的URL发送给Render进程进行加载。Render进程接收到网页URL加载请求之后，会做一些必要的初始化工作，然后请求Browser进程下载网页的内容。Browser进程...

站在老罗的肩膀上：https://blog.youkuaiyun.com/luoshengyang/article/details/50558942在Chromium中，Render进程是通过Browser进程下载网页内容的，后者又是通过共享内存将下载回来的网页内容交给前者的。Render进程获得网页内容之后，会交给WebKit进行处理。WebKit所做的第一个处理就是对网页内容进行解析，解析的结果是得到...

资料：https://blog.youkuaiyun.com/luoshengyang/article/details/51348829总结来说，分块的光栅化过程包含了以下三个主要的步骤： 1. 根据分块的可见性，将它们划分到不同的Bin中。 2. 根据内存限制策略，从优先级较高的Bin中选集出需要光栅化的分块。 3. 为每一个需要光栅化的分块分配光栅化内存...

站在老罗的肩膀上：https://blog.youkuaiyun.com/luoshengyang/article/details/50615628每一个HTML标签在DOM Tree中都有一个对应的HTMLElement节点。相应地，在DOM Tree中每一个需要渲染的HTMLElement节点在Layout  Object Tree中都有一个对应的Layout  Object节点，如图1所示(To U...

资料：https://blog.youkuaiyun.com/luoshengyang/article/details/51638966从前面Chromium网页渲染调度器（Scheduler）实现分析一文可以知道，当调度器调用SchedulerStateMachine类的成员函数NextAction询问状态机下一步要执行的操作时，SchedulerStateMachine类的成员函数NextAction...

站在老罗的肩膀上：https://blog.youkuaiyun.com/luoshengyang/article/details/50661553Graphics Layer形成一个Graphics Layer Tree。Graphics Layer可看作是一个图形缓冲区，被若干Render Layer共用。本文接下来就分析Graphics Layer Tree的创建过程。网页的Render Lay...

资料：https://blog.youkuaiyun.com/Luoshengyang/article/details/50916769Chromium的网页渲染机制可以用八个字来描述：纵向分层，横向分块。其中，分层是由WebKit完成的，就是把网页抽象成一系列的Tree。Tree由Layer组成，Layer就是我们所说的层。从前面Chromium网页加载过程简要介绍和学习计划这个系列的文章可以知道，We...

1. devtools -> performance, 这里会有比较粗的耗时分析， 例如https://developers.google.com/web/tools/chrome-devtools/rendering-tools/2. trace, 可以精确跟踪函数调用和事件在线程和进程间的传递即延时: 如文档https://www.chromium.org/developers/how...

站在老罗的肩膀上：https://blog.youkuaiyun.com/luoshengyang/article/details/50648792 目前Render Layer已经更新为Paint Layer， 其最终通过PaintLayer::InsertOnlyThisLayerAfterStyleChange创建，其函数调用关系如下，通过之前创建Layout Object Tree的LayoutT...

站在老罗的肩膀上：https://blog.youkuaiyun.com/luoshengyang/article/details/50414848Chromium加载网页的过程，需要Browser进程和Render进程协作完成。加载网页的过程由Browser进程发起，向服务器请求网页内容的过程也是由Browser进程完成。Render进程负责对下载回来的网页内容进行解析，解析之后得到一个DOM Tree...