# 浏览器原理

# 前置概念

# CPU 和 GPU

CPU（Central Process Unit），又名中央处理器，相当于电脑的大脑，处理各种计算任务。

GPU（Graphic Process Unit）,又名显卡，与CPU不同，GPU擅长处理简单任务，但同时跨多个内核。顾名思义，它最初是为处理图形而开发的。

# 进程和线程

进程(Process)是计算机执行任务的基本单位。线程是更小的调度单位，存于进程中。

一个进程至少包含一个线程(Thread)。进程通过 IPC（Inter Process Communication ）通信。

# 现代浏览器的架构

现代浏览器的架构是多进程架构，下面是 Chrome 的架构图：

进程及其控制
Browser( 浏览器进程)	控制应用程序的“ chrome”部分，包括地址栏，书签，后退和前进按钮。还处理Web浏览器中看不见的特权部分，例如网络请求和文件访问。浏览器进程负责与其他进程协调，起调度作用。
Renderer(渲染进程)	控制显示网站的标签内的所有内容。将 HTML、CSS、Javascript解析执行后生成图形显示在屏幕上。
Plugin(插件进程)	控制网站使用的所有插件，例如Flash。
GPU	与其他进程隔离处理GPU任务。由于GPU处理来自多个应用程序的请求并将它们绘制在同一表面上，因此将其分为不同的过程。

Chrome浏览器至少有上面四个进程。

# 浏览器的导航

经典面试题：在浏览器中输入URL到显示页面，中间发生了什么？

处理输入
DNS 解析获得服务器的 ip 和端口
进行网络请求获得网页
浏览器下载解析，并渲染

# 输入处理

在地址栏中输入内容（URL或者关键字）时，将由浏览器进程中的 UI 线程解析是否是 URL，若是 URL 则走通过 IPC 调起网络进程进行 DNS 解析，网络请求等步骤，若是关键字，则发给默认的搜索引擎处理，返回搜索结果。

# DNS 解析

DNS是做什么？

DNS 步骤

# 网络请求

# 网页渲染流程

# 构建DOM树

HTML解析涉及到 tokenization (opens new window) 和树的构造。HTML标记包括开始和结束标记，以及属性名和值。如果文档格式良好，则解析它会简单而快速。解析器将标记化的输入解析到文档中，构建文档树。

比如下面一段html 的代码：
```
<html>
<head>
    <meta charset="utf-8" >
	<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <p>
        Hello,<span>web performance</span>students
    </p>
    <div>
        <img src="xxx.jpg"/>
    </div>
</body>
</html>
```
1
2
3
4
5
6
7
8
9
10
11
12
13
14
上述代码生成的构造树大概是这样的：

# 构建CSSOM树

p{font-weight:bold;}
span{color:red;}
img{float:right;}
p span{display:none;}

1
2
3
4

# 生成render tree

将DOM和CSSOM组合成一个Render树，计算样式树或渲染树从DOM树的根开始构建，遍历每个可见节点。

像<head>和它的子节点以及任何具有display: none样式的结点，这些标签将不会显示，也就是它们不会出现在Render树上。具有visibility: hidden的节点会出现在Render树上，因为它们会占用空间。由于我们没有给出任何指令来覆盖用户代理默认值，因此上面代码示例中的script节点将不会包含在Render树中。

渲染树标识显示哪些节点（即使不可见）及其计算样式，但不标识每个节点的尺寸或位置。
# 布局

布局是确定呈现树中所有节点的宽度、高度和位置，以及确定页面上每个对象的大小和位置的过程，浏览器从渲染树的根开始遍历它。回流是对页面的任何部分或整个文档的任何后续大小和位置的确定。

**第一次确定节点的大小和位置称为布局。随后对节点大小和位置的重新计算称为回流（也叫重排）。**所以只要页面有动态交互，改变元素的位置，大小，就会产生回流。

影响布局的 CSS 属性有：
# 绘制

生成布局树后，开始绘制。在绘制或光栅化阶段，浏览器将在布局阶段计算的每个框转换为屏幕上的实际像素。绘画包括将元素的每个可视部分绘制到屏幕上，包括文本、颜色、边框、阴影和替换的元素（如按钮和图像）。

第一次确定节点的文本，颜色，边框，阴影等外观属性称为绘制。随后对节点的外观属性重新计算称为重绘。

回流（重排）一定会引起重绘，所以开销比较大。重绘不会引起回流（重排），开销相对较少。

影响绘制的属性有：
# 合成

图层