本文以一个初学者的角度,来重新梳理浏览器的原理。帮助其理解浏览器的运行原理,网页的渲染机制。
HTML网页的结构
- 框结构
- 层次结构
- webkit的渲染过程
- 从网页输入URL到构建完DOM树
- 从构建完DOM树到webkit的绘图上下文
- 从绘图上下文到到生成最终的图像
webkit 的具体渲染过程
- 当用户输入URL的时候,webkit调用资源加载器加载该URL对应的网页
- 网络模块发送请求并得到相应
- webkit接收到各种同步或异步的网页或数据
- 网页被交给HTML解释器转变成一些列的词语(token)
- 解释器根据词生成节点,构建DOM树
- 如果节点是javascript代码的话,调用javascript引擎并解释执行
- javascript可能会更改DOM结构
- 节点如果依赖其他资源,如CSS,图片,视频等,则调用加载器异步加载它们,不会影响DOM树的持续构建;如果是javascript 资源url(没有标记异步方式使用),则会阻断DOM树的构建
webkit架构和模块
从 www.webkit.org,下载源代码
- webkitCore 包含加载器和网页渲染基础部分,具体包含HTML解释器、CSS解释器、svg、dom、渲染树(renderObject,renderLayer)、inspector调试器。
- javascriptCore是webkit中默认的Javascript 引擎,在chrome中是v8引擎
- webkitport指的是webkit的非共享部分
- webcore和 webkit ports上面的部分是提供嵌入式接口,是供浏览器调用的部分。
chromium架构和模块
- 可以看到chromium 浏览器底层保护blink、GPU、V8、沙箱模型、CC、IPC、UI等
- content模块和content api提供给顶层的浏览器调用
- 调用者包括,chromium浏览器,contentshell, android webview
多进程模型
- Browser主进程
- Renderer进程,可以创建多个。
- NPAPI进程,插件进程
- GPU进程,当GPU硬件加速打开的时候才创建
- Pepper进程。
对于桌面系统的chromium浏览器,它们的进程模型包括以下几个特征。
- Browser进程和页面的渲染是分开的。
- 每个网页是独立的进程
- 插件进程也是独立的
- GPU硬件加速进程也是独立的
chromium允许用户配置 Renderer进程的渲染方式
- process-per-site-instance, 每一个网页创建一个独立的renderer进程。
- process-per-site 同一个域的网页创建一个renderer进程
- process-per-tab
- single process
browser进程和render进程
多线程模型
在每个进程的内部,又有许多的线程
content接口
content接口提供了一种对多进程渲染的抽象接口,并且还要支持HTML5、GPU硬件加速功能、沙箱机制。
chromium的代码结构
webkit2及其架构
在对webkit进行升级,webkit2设计了全新的接口和结构 UI进程对应 browser进程 Web进程对应 renderer进程