New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

图解浏览器渲染过程 - 基于Webkit/Blink内核Chrome浏览器 #17

Open
abcrun opened this Issue Mar 11, 2015 · 4 comments

Comments

Projects
None yet
3 participants
@abcrun
Owner

abcrun commented Mar 11, 2015

Chrome基于Webkit内核进行封装,采用了多进程/线程模型。当用户访问网页时,大致的流程是这样的:

打开浏览器,Browser进程启动,首先由UI线程来处理界面基本信息(如创建tab页等),当用户输入URL后,UI线程将任务交给IO线程来处理,然后将结果传递给Render进程,Render进程的IO线程经过简单分析后,将解释后的结果交给渲染线程,渲染线程接受请求加载网页并渲染网页。在加载和渲染过程中,可能会需要Browser进程获取相关的资源(如果CSS文件,图片,音频视频等)和GPU进程帮助渲染,这时Render进程会通过IO线程通知Browser进程或者GPU进程进行相关的任务。详细的过程随后将会以图片形式详细说明。

Chrome浏览器多进程/线程模型

Chrome浏览器多线程简单模型

Chrome浏览器包含多个进程,其中Browser进程是主进程,管理着各个Tab页,UI操作,资源请求等;Render进程主要用于渲染网页,Render进程可以包含多个;GPU进程用于处理渲染硬件加速;而NPAPI和Pepper进程与浏览器插件相关。

资源请求与加载过程

Browser进程资源请求与加载过程

当用户访问某一地址时,可以分为两种情况:

  1. 根据是否有本地缓存(本地缓存是否需要更新)来请求网络资源
  2. 当点击前进/后退按钮时,从浏览器缓存池里面判断是否有缓存资源,如果没有则需要网络请求

页面资源有好多种,每种资源都有对应的资源加载器,如图片资源加载器imageLoader,在解析过程中当需要加载资源时,render进程会通知Browser进程加载资源,然后将加载后的资源通知给render进程。关于渲染过程见下图。

渲染过程

由于渲染的内容比较多,图片也比较大,为了便于阅读,我将图片分成三部分展示,最后也会附上渲染过程的全图。

HTMLParser -> DOM

首先是HTMLParser创建DOM树的过程,Render进程会创建一个html解释线程用于分析经过浏览器转码后的字符串,经过词法分析,安全处理等,然后调用主进程构建DOM树。当解释后是Script脚本时将会阻塞渲染线程,调用Javascript线程执行脚本代码,当然此时chrome为防止阻塞影响到后面可能存在的资源加载,会与扫描后面的代码是否有需要加载资源的,如果有则交个Browser进程去加载资源,然后才执行Script代码;如果遇到CSS样式代码时,将会对CSS样式规则进行解析保存到DocumentRuleSets对象中备用,便于创建Node节点时构建RenderObject和RenderLayer使用。

Render进程HTMLParser

RenderObject

上面谈到的保存的样式规则对象(DocumentRuleSets),在创建DOM树Node节点元素后,Element会依次调用attach函数检测是否需要创建RenderObject对象,RenderObject对象从DocumentRuleSets里查找当前元素匹配的所有样式规则并排序,计算出当前节点的位置等最终的样式信息保存在RenderObject对象中。

Render进程RenderObject

RenderLayer与渲染绘制

网页本身包含框结构和层次结构,框结构主要是指iframe,而层次结构就是这里说的renderLayer了,网页分成不同的层次主要是出于渲染考虑的,图中有详细说明。

Render进程RenderLayer与渲染

渲染全图(图片较大)

Render

说明:如果想理解更多细节,可以参考《Webkit技术内幕》,这篇文章也是在这本书的基础上总结的。

@tiansn

This comment has been minimized.

tiansn commented Jan 11, 2017

图文并茂,之前看到的没有讲的这么详细的

@ArthurBinZhou

This comment has been minimized.

ArthurBinZhou commented Aug 29, 2018

一张好的思维导图还是能让分解知识的效率提高不少,大大啊,你这思维导图是用什么软件画的呢?

@abcrun

This comment has been minimized.

Owner

abcrun commented Oct 13, 2018

@ArthurBinZhou OmniGraffle

@ArthurBinZhou

This comment has been minimized.

ArthurBinZhou commented Oct 26, 2018

谢了

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment