# 基础知识

# 浏览器结构

🤔 浏览器从输入一个网址到展现页面内容这个过程里, 发生了什么?

• 在用户输入一个网址之后, 浏览器开启一个线程处理这个请求.
• 用 DNS 解析地址, 获取 IP 地址. 之后与目标服务器建立连接.
• 进行 HTTP 协议对话, 浏览器向服务器发送请求报文
• Web 服务器处理请求
• 服务器向浏览器返回响应报文
• 浏览器开始下载 HTML 文档
• 浏览器解析 HTML 文档结构, 建立 DOM 树, 并下载 HTML 文件内标记请求的 MIME 类型文件
• 页面解析渲染 DOM, CSS 根据规则解析, 并结合 DOM 树进行页面内容布局和绘制. JavaScript 根据 DOM API 操作 DOM, 执行相关的事件绑定函数.

一般认为, 浏览器由七部分构成:

• 『 用户界面 』: 可见的软件界面. 地址栏, 书签, 前进后退, 等用户可见, 可操作的界面.
• 『 网络模块 』: 用以开启网络线程, 发送请求或下载资源的模块
• 『 浏览器引擎 』: 用以在用户界面和渲染引擎之间传送指令, 或者在客户端本地缓存中读取数据
• 『 渲染引擎 』: 解析 DOM 文档 和 CSS 规则, 让样式显示在页面中. 平时所说的 "浏览器内核" 就是指渲染引擎
• 『 UI 后端 』: 绘制基本的浏览器窗口内控件 ❓
• 『 JavaScript 解释器 』: 用以解释和执行 JavaScript 代码, 例如 V8 引擎
• 『 持久化数据储存 』: cookie, localStorage 等客户端储存技术

# 渲染引擎简介

渲染引擎在浏览器中主要用于解析 HTML 文档 和 CSS 文档. 将 CSS 样式应用到 HTML 元素上. 并将 HTML 渲染到浏览器窗口以显示具体内容.

具体步骤:

1. 解析 HTML 构建 DOM 树
2. 构建渲染树
3. 渲染树布局阶段
4. 绘制渲染树

渲染引擎会先将 HTML 文档解析成由多个 "DOM 元素对象节点" 构成的具有上下级关系的 "DOM 树" 结构.

然后根据 DOM 树的节点顺序提取应用于对应节点的 CSS 规则, 计算 DOM 树的样式数据, 生成一个带 样式描述的 "DOM 渲染树"

之后根据 DOM 渲染树的节点在页面中的尺寸和位置, 将各个节点放置在页面的对应位置上. 这个阶段主要是元素的 "布局属性" (margin, padding, position) 生效.

最后再将 DOM 渲染树各个节点的颜色, 字体大小, 等等样式应用于上. 这个阶段主要是元素的 "显示样式" 生效.

# 数据持久化储存技术

因为是应用在浏览器上的, 也可以简称为 『 浏览器缓存 』

"浏览器缓存" 是用于本地保存数据并进行快速读取以避免重复资源请求的传输机制的统称.

常用的缓存机制以下 9 种:

• 『 HTTP 文件缓存 』: 基于 HTTP 协议的文件缓存机制. 根据 HTTP 响应头信息来判断是否从服务器获取文件, 还是读取本地缓存
• 『 LocalStorage 』: HTML5 的本地缓存方案, 用于保存体积较大的数据
• 『 SessionStorage 』: 和 LocalStorage 功能类似, 但是在浏览器关闭时 SessionStorage 会自动清空
• 『 indexDB 』: 和 WEB SQL 类似
• 『 WEB SQL 』: 用以储存较大量数据的缓存机制
• 『 Cookie 』: Cookie 信息会随 HTTP 请求发到服务器
• 『 CacheStorage 』: 在未来可代替 Application Cache
• 『 Application Cache 』: 用于缓存静态资源文件
• 『 Flash 缓存 』: 没啥用

现如今, 还是 HTTP 缓存, localStorage, Cookie 更常用, 其他的了解就好.