浏览器基本原理--> webkit架构

228 阅读3分钟

本文以一个初学者的角度,来重新梳理浏览器的原理。帮助其理解浏览器的运行原理,网页的渲染机制。

HTML网页的结构

  • 框结构
  • 层次结构
  • webkit的渲染过程
    • 从网页输入URL到构建完DOM树
    • 从构建完DOM树到webkit的绘图上下文
    • 从绘图上下文到到生成最终的图像

webkit 的具体渲染过程

  1. 当用户输入URL的时候,webkit调用资源加载器加载该URL对应的网页
  2. 网络模块发送请求并得到相应
  3. webkit接收到各种同步或异步的网页或数据
  4. 网页被交给HTML解释器转变成一些列的词语(token)
  5. 解释器根据词生成节点,构建DOM树
  6. 如果节点是javascript代码的话,调用javascript引擎并解释执行
  7. javascript可能会更改DOM结构
  8. 节点如果依赖其他资源,如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浏览器,它们的进程模型包括以下几个特征。

  1. Browser进程和页面的渲染是分开的。
  2. 每个网页是独立的进程
  3. 插件进程也是独立的
  4. GPU硬件加速进程也是独立的

chromium允许用户配置 Renderer进程的渲染方式

  1. process-per-site-instance, 每一个网页创建一个独立的renderer进程。
  2. process-per-site 同一个域的网页创建一个renderer进程
  3. process-per-tab
  4. single process

browser进程和render进程

image.png

多线程模型

在每个进程的内部,又有许多的线程

image.png

content接口

content接口提供了一种对多进程渲染的抽象接口,并且还要支持HTML5、GPU硬件加速功能、沙箱机制。

chromium的代码结构

image.png

image.png

webkit2及其架构

image.png

在对webkit进行升级,webkit2设计了全新的接口和结构 UI进程对应 browser进程 Web进程对应 renderer进程