Chrome运行原理

• 浏览器地址输入URL后会发生什么 （仅客户端方面）

浏览器主进程

1.输入处理
2.开始导航
3.读取响应 (从服务器那边读取响应)
4.寻找渲染进程

输入处理

用户在Url框输入内容和，UI线程会判断输入的是一个URL地址还是一个query查询条件

• 如果是URL，则直接请求站点资源
• 如果是query，则会将输入发送给搜索引擎

开始导航

1. 当用户按下回车后，UI线程会通知网络线程发起一个网络请求来读取站点资源
   
2. 在请求的过程中，tab是处于loading状态的，也就是他的图标会一直在转圈圈

读取响应

网络线程接收到HTTP响应后，先检查响应头的媒体类型(MIME Type)

• 如果响应主体是一个HTML文件，浏览器将内容交给渲染进程处理
• 如果拿到的是其他类型文件，比如Zip.exe等，则交给下载管理器处理

寻找渲染进程

1. 网络线程做完所有检查后，会告知主进程数据已准备完毕，主进程确认后为这个站点寻找一个渲染进程
   
2. 主进程通过IPC消息告知渲染进程去处理本次导航
   
3. 渲染进程开始接收数据并告知主进程自己已开始处理，导航结束，进入文档加载阶段

• 注意：IPC就是进程之间的通信

渲染进程

1.资源加载

• 加载子资源：header里面css、js脚本
• 执行脚本

2.构建

• 构建DOM树和构建CSSOM树，两者构成了渲染树（Render树）

3.布局

4.绘制

• 构建图层
• 绘制图层

5.合成

• 光栅化

资源加载

1. 当收到主进程的消息后，渲染进程就会开始加载HTML文档
2. 同时，还会加载其他的子资源，比如CSS样式文件，JavaSript脚本

构建渲染树

1. 构建DOM树，将HTML文本转化成浏览器能够理解的结构
2. 构建CSSOM树，浏览器同样不认识CSS，需要将CSS代码转化为可理解的CSSOM
3. 构建渲染树，渲染树是DOM树和CSSOM树的结合

页面布局

1. 根据渲染树计算每个节点的位置和大小
2. 在浏览器页面区域绘制元素边框
3. 遍历渲染树，将元素以盒模型的形式写入文档流

页面绘制

1. 构建图层: 为特定的节点生成专用图层
2. 绘制图层:一个图层分成很多绘制指2.令，然后将这些指令按顺序组成一个绘制列表，交给合成线程
3. 合成线程接收指令生成图块
4. 栅格线程将图块进行栅格化
5. 展示在屏幕上

图块：图形实体的总称
合成：不是一次画一笔，一次画几笔
栅格化：把图块转成绘图，然后就是具体的像素点，利用GPU加速栅格化过程，然后调用显卡展示在屏幕上

我的理解（包括服务器端）

渲染过程中前端页面是如何渲染的 请求到这个页面，到页面被渲染出来的过程是怎么样的

URL的输入

首先是URL地址解析

判断输入的是一个合法的URL还是一个待搜索的关键词，并且根据你输入的内容进行自动完成字符编码等操作

发起真正的URL请求

如果浏览器本地缓存了这个资源，则会直接将数据转发给浏览器进程，如果没有缓存，则会查询DNS解析域名

DNS解析

因为浏览器不能通过域名找到服务器的ip地址，所以要进行DNS解析

首先先找浏览器有没有DNS缓存(之前有访问记录)，如果有则返回ip 

如果没有，则寻找本地的host文件，看看有没有域名记录，如果有则返回ip

如果本地host文件没有则直接向本地DNS服务器请求，如果还是没有，继续向上DNS服务器请求，直至返回

浏览器拿到ip后，在向服务器发送http请求之前，先要和服务器建立TCP连接

建立TCP连接

三次握手
第一次握手:客户端发送`SYN`数据包给服务端

第二次握手:服务端收到客户端的数据包，返回`SYN/ACK`数据包给客户端

第三次握手:客户端收到服务端的返回后，发送'ACK数据包给服务端

发送HTTP请求

连接建立成功之后，就可以发送HTTP请求到服务器请求数据了

客户端向服务器发起http请求的时候，会有一些请求信息，请求信息包含三个部分:

1.请求行(请求方法、URL、版本版本); 2.请求头; 3.空行 4.请求正文

请求头和请求正文之间是一个空行，这个行非常重要，它表示请求头已经结束，接下来的是请求正文。

然后后端从在固定的端接收到TCP报文开始，它会对TCP连接进行处理，对HTTP协议进行解析，并按照报文格式进一步封装成HTTP Request对象。

一般大型的网站会将你的请求到反向代理服务器中

因为当网站访问量非常大，网站越来越慢，一台服务器已经不够用了。
	
于是将同一个应用部署在多台服务器上，将大量用户的请求分配给多台机器处理。

此时，客户端不是直接通过HTTP协议访问某网站应用服务器

而是先请求到Nginx, Nginx再请求应用服务器，然后将结果返回给客户端

这里Nginx的作用是反向代理服务器

同时也带来了一个好处，其中一台服务器万一挂了，只要还有其他服务器正常运行，就不会影响用户使用。

通过Nginx的反向代理，我们到达了web服务器，服务端处理请求，访问数据库，然后将处理结果返回

也就是返回一个HTTP响应。

服务器响应请求

HTTP响应与HTTP请求相似，HTTP响应也由3个部分构成，分别是:

状态行(协议版本，状态码，状态码描述）、响应头、空行、响应正文

浏览器接收到来自服务器的响应资源后，如果响应资源进行了压缩，需要进行解压。

然后，对响应资源做缓存。

接下来会对资源进行解析。

浏览器解析渲染页面

版本1

浏览器会获取HTML和CSS的资源，然后把HTML解析成DOM树
再把CSS解析成CSSOM
把DOM和CSSOM合并为渲染树I
布局
把渲染树的每个节点渲染到屏幕上(绘制)

版本2

1、HTML 通过HTML解析器解析输出DOM树
2、CSS样式通过CSS解析器解析输出CSS规则
3、结合DOM树和CSS规则，计算出DOM树中每个节点的具体样式，生成渲染树
4、浏览器根据渲染树开始布局和绘制，会触发回流和重绘
5、构建图层树，显示页面

断开TCP链接

四次挥手