2.1.2 内核 [1]

浏览器内核流程图

Loader

负责处理所有的 HTTP 请求以及网络资源的缓存,相当于从 URL 输入到 Page Resource 输出的变换过程。

WechatIMG2

Parser

主要负责解析 HTML 页面

过程: HTML 文本 -> 词法分析 -> 语法分析 -> HTML 语法树 -> DOM 树 -> 带 CSS Style,会响应自定义事件的 Styled DOM 树

  • 语法树图
  • DOM 树图
  • Styled DOM 树图

Layout

  1. 创建 Render Tree

Render Tree 是 DOM 树的排版表示

  1. 计算布局

遍历 Render Tree ,每个 HTML 元素对应一个 CSS 盒状模型计算每个元素的大小位置等几何信息。有时需要迭代,如祖先元素的大小依赖于后代元素或者相互依赖。

Paint

2.3.1 整体组成架构

WechatIMG8

WebCore

WechatIMG9

  • Page (位于 Source/WebCore/page/Page.h) 提供对外的总入口以及页面相关的 Chrome [2] , Setting, History 等

  • Document 解析 html/xml/svg,生成 DOM 树的子系统

    DOM 对象类型继承图

    • 文档由 Document 类对象表示,HTML 文档继承于 HTMLDocument
    • 文档节点由 Node 类对象表示,HTML 页面元素是 HTMLElement 类,是各种 HTML Tag 对应类的父类。
    • JavaScript 的根对象 Window 对应的实现类 DOMWindow
  • CSS

  • Render

    WechatIMG12

    • RenderLayer 类处理 CSS 动画、页面内 Video、定位方式和 Z-Index 的排版渲染
    • 一个 RenderLayer 代表渲染中的分成,RenderLayer 也构成一棵树
    • 每个 RenderObject 都属于某个 RenderLayer ,通常有共同坐标系的 Render 节点属于同一个 RenderLayer
  • Graphics

  • Loader

    WechatIMG10

  • Script

  • Extension Modules

  • Plugin

  • Interaction

2.3.2 核心工作流程

WechatIMG13


  1. 《深入理解 Android - WebKit 卷》 第2章 ↩︎

  2. 此处 Chrome 并不是指 Google Chrome 。参照 名词来源Browser and GUI Chrome ↩︎