一个浏览器是如何工作的？

笔记内容，摘自于重学前端。 ----- 挖坑，等待填补

阶段一

实际上，对浏览器的实现者来说， 他们做的事情，就是把一个URL变成一个屏幕上显示的网页。

这个过程是这样的：

1. 浏览器首先使用HTTP协议或者HTTPS协议，向服务端请求页面;
2. 把请求回来的HTML代码经过解析，构建成DOM树;
3. 计算DOM树上的CSS属性;
4. 最后根据CSS属性对元素逐个进行渲染，得到内存中的位图;
5. 一个可选的步骤是对位图进行合成，这会极大地增加后续绘制的速度;
6. 合成之后，再绘制到界面上。

从HTTP请求回来，就产生了流式的数据，后续的DOM树构建、CSS计算、渲染、合成、绘制，都是尽可能地流式处理前一步的产出;即不需要等到上一步骤完全结束，就开始处理上一步的输出，这样我们在浏览网页时，才会看到逐步出现的页面。

HTTP协议

浏览器首先要做的事就是根据URL把数据取回来，取回数据使用的是HTTP协议（实际上这个过程之前还有DNS查询）

HTTP协议是基于TCP协议出现的，对TCP协议来说，TCP协议是一条双向的通讯通道，HTTP在TCP的基础上，规定了Request-Response的模式。这个模式决定了通讯必定是浏览器端首先发起的。

大部分情况下，浏览器的实现者只需要用一个TCP库，甚至一个线程的HTTP库就可以搞定浏览器的网络通讯部分。HTTP库是纯粹的文本协议，它是规定了使用TCP协议来传输文本格式的一个应用层协议。

HTTP协议格式

略

HTTP Methos

略

HTTP Status code和Status text

略

HTTP Head

略

HTTP Request Body

略

HTTPS

在HTTP协议的基础上，HTTPS和HTTP2规定了更复杂的内容，但是它基本保持了HTTP的设计思想，即：使用上的Request-Response模式。

HTTPS有两个作用，一是确定请求的目标服务端身份，二是保证传输的数据不会被网络中间节点窃取或者篡改。

HTTPS是使用加密通道来传输HTTP的内容。但是HTTPS首先与服务端建立一条TLS加密通道。TLS构建于TCP协议之上，它实际上是对传输的内容做一次加密，所以从传输内容上看，HTTPS跟HTTP没有任何区别。

HTTP2

HTTP2是HTTP1.1的升级版本。它最大的改进有两点，一是支持服务端推送，二是支持TCP连接复用。

服务端推送能够在客户端发送第一个请求到服务端时，提前把一部分内容推送给客户端，放入缓存当中，这可以避免客户端请求顺序带来的并行度不高，从而导致的性能问题。

TCP连接复用，则使用同一个TCP连接来传输多个HTTP请求，避免了TCP连接建立时的三次握手开销，和初建TCP连接时传输窗口小的问题。

---

阶段二

解析代码

浏览器的工作大致可以分为6个阶段，第二阶段就是解析请求回来的HTML代码，继而构建DOM树。把HTTP协议返回的response body当作字符流输入，词法分析器根据状态机来还原出所有的词，接着通过栈的形式来构建DOM树（只有节点和属性，不包含任何的样式信息）。

阶段三

整体过程

在解析代码的过程中，依次拿到构造好的元素，去检查它匹配到了哪些规则(CSS选择器)，再根据规则的优先级，做覆盖和调整。

选择器的各种符号	含义
空格	后代，选中它的子节点和所有子节点的后代子节点。
>	子代，选中它的子节点。
+	直接后继选择器，选中它的下一个相邻节点。
~	后继，选中它之后的所有相邻节点。
||	列，选中表格中的一列

阶段四

排版问题 --> 正常流文字排版，绝对定位元素，浮动元素排版，flex排版等

阶段五

渲染 / 合成 / 绘制