浏览器基础

浏览器组成

用户界面

包括浏览器中可见的地址输入框、浏览器前进返回按钮、打开书签、打开历史记录等用户可操作的功能选项

浏览器引擎

可以在用户界面和渲染引擎之间传送指令或在客户端本地缓存中读写数据等，是浏览器各个部分通信的核心。

渲染引擎（内核）

解析 DOM 文档和 CSS 规则并将内容排版到浏览器中显示有样式的界面

网络

开启网络线程发送请求或下载资源文件

UI 后端

绘制基本的浏览器窗口内的控件，比如组合选择框、按钮、输入框等

JavaScript 引擎

解析和执行 JavaScript 脚本，比如 V8 引擎

持久化数据存储

数据持久化存储，涉及 cookie 、 localStorage 等客户端存储技术

渲染引擎

1. 解析 HTML 构建 DOM树：将 HTML 元素标签解析成由多个 DOM 元素对象节点组成的具有节点父子关系的 DOM 树结构
2. 构建渲染树：按顺序提取 DOM 元素对象的样式数据，构建带样式描述的 DOM 渲染树对象
3. 渲染布局阶段：根据节点的大小和位置把元素绘制在页面上，主要是布局属性（例如： postion、float、margin、padding 等）生效
4. 绘制渲染树：将节点的背景、颜色、文本等样式信息应用到节点上，主要是元素的内部显示样式（例如： color、background、text-shadow 等）生效

gecko 内核渲染流程

先解析 HTM，生成内容 Sink （Content Sink 可以认为是构建 DOM 结构树的工厂方法），再开始解析 CSS

webkit 内核渲染流程

HTML 和 CSS 的解析是并行的

持久化技术

• HTTP 文件缓存
• localStorage
• sessionStorage
• cookie
• webSQL
• Application cache
• cacheStorage
• flash 缓存