编辑
4. 发送HTTP(S)请求在TCP连接建立后，浏览器就会向相应的HTTP(S)服务器发送请求。
HTTP请求信息由3部分组成：
（1）请求首行(Request Line)
请求的第一行是“方法URI协议/版本”例如：GET /index.html HTTP/1.1
“GET”代表请求方法(Method)；
“/index.html”表示URI；
“HTTP/1.1”代表协议和协议的版本。
- 请求方法共有：CONNECT，DELETE，GET，HEAD，OPTIONS，POST，PUT，TRACE
（2）请求头(Request Header)
请求头包含许多有关的客户端环境和请求正文的有用信息。例如，请求头可 以声明浏览器所用的语言，请求正文的长度等。例如：
Host: www.baidu.com
Connection: keep-alive
sec-ch-ua: "Google Chrome";v="105", "Not)A;Brand";v="8", "Chromium";v="105"
Accept: application/json, text/javascript, */*; q=0.01
sec-ch-ua-mobile: ?0
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36
sec-ch-ua-platform: "macOS"
Sec-Fetch-Site: same-origin
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Referer: https://www.baidu.com/
Accept-Encoding: gzip, deflate, br
Accept-Language: en
Cookie: BIDUPSID=49D61A297C62F47AD5C98B8CEDF00A05; PSTM=1615091511; __yjs_duid=1_20f12cca852c3dff005bbde1750e113f1622365350748;FG=1; BD_UPN=123253; MCITY=-233:;
（3）请求正文(Request Body)
请求头和请求正文之间是一个空行，这个行非常重要，它表示请求头已经结束，接下来的是请求正文。请求正文中可以包含客户提交的查询字符串信息：
username=test&password=test123
5. 服务器返回数据当Web 服务器收到HTTP请求后，如果请求的页面在服务器中不存在，那么返回404错误；如果请求的页面已经被移至新的位置，那么301/302 redirect会被触发，那么浏览器需要重新以新的URI发出请求；如果服务器存在问题，无法返回数据，那么500（internal server error）会被返回；如果请求的页面存在，且符合访问规则，那么服务器就会返回请求的页面。
实际的情况，比我们提到的更多也更加复杂，我们就不一一赘述。如果想查看更多的HTTP状态码，可参考：https://en.wikipedia.org/wiki/List_of_HTTP_status_codes
6. 浏览接收Response数据并关闭连接浏览器接收到请求的数据后，TCL连接就会被关闭。关闭的过程就是四次挥手的过程：
第一次挥手：客户端发送一个FIN=M，用来关闭客户端到服务器端的数据传送，客户端进入FIN_WAIT_1状态。意思是说"我客户端没有数据要发给你了"，但是如果你服务器端还有数据没有发送完成，则不必急着关闭连接，可以继续发送数据。
第二次挥手：服务器端收到FIN后，先发送ack=M 1，告诉客户端，你的请求我收到了，但是我还没准备好，请继续你等我的消息。这个时候客户端就进入FIN_WAIT_2 状态，继续等待服务器端的FIN报文。
第三次挥手：当服务器端确定数据已发送完成，则向客户端发送FIN=N报文，告诉客户端，好了，我这边数据发完了，准备好关闭连接了。服务器端进入LAST_ACK状态。
第四次挥手：客户端收到FIN=N报文后，就知道可以关闭连接了，但是他还是不相信网络，怕服务器端不知道要关闭，所以发送ack=N 1后进入TIME_WAIT状态，如果Server端没有收到ACK则可以重传。服务器端收到ACK后，就知道可以断开连接了。客户端等待了2MSL后依然没有收到回复，则证明服务器端已正常关闭，那好，我客户端也可以关闭连接了。最终完成了四次握手。
可参考下图去理解整个过程：
编辑
7. 浏览器解析Response数据并渲染浏览器接受到response数据后，就会开始解析，如下图所示（不同的浏览器解析和渲染过程可能会略有不同，此处以Safari为例）：
编辑
需要指出的是，一个网页可能需要多个HTTP请求，比如，主体的HTML文件是一个请求，而其相关的CSS，图片和JS文件等也需要一一请求。浏览器并不会等待所有的数据接收完成才开始解析，而只保证所有的数据最终都会被解析。
整个过程可描述为：
- 解析HTML标记符号，开始生成DOM树
- 解析CSS标记符号，开始生成CSSOM树
- CSSOM树生成后，JS引擎会解析JS脚本，完成DOM树的创建
- 合并DOM树和CSSOM树，生成渲染树
- 基于渲染树和当前浏览器面板，计算页面元素的大小和相对位置
- 将渲染树里的每个节点，结合Layout的计算结果，渲染引擎将渲染树转换成屏幕上实际的像素，即绘制内容。
【概念】：
- DOM是Document Object Model的缩写，即文档对象模型。是W3C推荐的一种处理可扩展标志语言的一种标准编程接口。浏览器将机构化的文档HTML/XML读入，将文档中的每个标签建模成一个节点（Node），每个节点有各自的属性（名称，类型，内容等等），节点之间有层级关系（父亲，孩子，兄弟等），从而形成了树形结构。DOM提供的编程接口，支持访问，修改，添加和删除DOM树的节点和内容。
- CSSOM树： 类此与DOM树，浏览器会便利CSS文件中所有的规则，创建一棵树，这棵树包含多个节点，基本CSS选择器，这些节点之间也有着层级关系，比如父亲，孩子，兄弟等等
- Render树： 将DOM树和CSSOM合并后，就形成了Render树。
- Layout： 当渲染树生成后，就会开始layout。Layout负责计算渲染树的每个节点在屏幕上的位置和维度。比如，不同的设备上的浏览器的宽度可能不同，那么，基本屏幕宽度的显示，Layout会得出不同的实际显示宽度。
,
