1、大致流程
1）用户输入url并回车
2）浏览器进程检查url，组装协议，构成完整的url
3）浏览器进程通过进程间通信（IPC）把url请求发送给网络进程
4）网络进程接收到url请求后检查本地缓存是否缓存了该请求资源，如果有则将该资源返回给浏览器进程（缓存策略）
5）如果没有，网络进程向web服务器发起http请求（网络请求），请求流程如下：
5.1 进行DNS解析，获取服务器ip地址，端口
5.2 利用ip地址和服务器建立tcp连接（三次握手）
5.3 构建请求头信息
5.4 发送请求头信息
5.5 服务器响应后，网络进程接收响应头和响应信息，并解析响应内容
6）网络进程解析响应流程：
6.1 检查状态码，如果是301/302，则需要重定向，从Location自动中读取地址，重新进行第4步（301/302跳转也会读取本地缓存吗？这里有个疑问），如果是200，则继续处理请求。
6.2 200响应处理：检查响应类型Content-Type，如果是字节流类型，则将该请求提交给下载管理器，该导航流程结束，不再进行后续的渲染，如果是html则通知浏览器进程准备渲染进程准备进行渲染。
7）准备渲染进程
7.1 浏览器进程检查当前url是否和之前打开的渲染进程根域名是否相同，如果相同，则复用原来的进程，如果不同，则开启新的渲染进程
8）传输数据、更新状态
8.1 渲染进程准备好后，浏览器向渲染进程发起“提交文档”的消息，渲染进程接收到消息和网络进程建立传输数据的“管道” 8.2 渲染进程接收完数据后，向浏览器发送“确认提交” 8.3 浏览器进程接收到确认消息后更新浏览器界面状态：安全、地址栏url、前进后退的历史状态、更新web页面。
2、具体的渲染流程：
1）渲染进程将 HTML 内容转换为能够读懂的 DOM 树结构。
2）渲染引擎将 CSS 样式表转化为浏览器可以理解的 cssom。
之所以有这步操作，第一是因为要为js提供操作样式的能力：styleSheets，第二是要为元素提供基础样式，比如userAgent的默认样式，继承自父节点的样式以及将浏览器不识别的样式翻译成浏览器识别的，比如将em、rem单位转成px。
css的下载和构建cssom不会阻塞dom的解析，但是会阻塞dom的渲染，因为要等到cssom构建完，再执行js（主要原因是js可能会操作styleSheets）。
3）创建布局树，并计算元素的布局信息。
4）对布局树进行分层，并生成分层树。
5）为每个图层生成绘制列表，并将其提交到合成线程。
6）合成线程将图层分成图块，并在光栅化线程池中将图块转换成位图。
7）合成线程发送绘制图块命令 DrawQuad 给浏览器进程。
8）浏览器进程根据 DrawQuad 消息生成页面，并显示到显示器上。
3、减少重排重绘的方法：
- 使用 class 操作样式，而不是频繁操作 style
- 避免使用 table 布局
- 批量dom 操作，例如 createDocumentFragment，或者使用框架，例如 React
- Debounce window resize 事件
- 对 dom 属性的读写要分离
- will-change: transform 做优化
4、HTTP三次握手：
-
第一次握手：客户端发送 SYN 报文，并进入 SYN_SENT 状态，等待服务器的确认；
-
第二次握手：服务器收到 SYN 报文，需要给客户端发送 ACK 确认报文，同时服务器也要向客户端发送一个 SYN 报文，所以也就是向客户端发送 SYN + ACK 报文，此时服务器进入 SYN_RCVD 状态；
-
第三次握手：客户端收到 SYN + ACK 报文，向服务器发送确认包，客户端进入 ESTABLISHED 状态。待服务器收到客户端发送的 ACK 包也会进入 ESTABLISHED 状态，完成三次握手。
（ACK：表示应答域有效；SYN在连接建立时用来同步序号，当SYN=1而ACK=0时，表明这是一个连接请求报文。）
- tcp三次握手，四次挥手
三次握手是用来确认客户端和服务端都能正常发送、接收数据；是发生在客户端和服务端建立连接时。服务端只发一次请求。 四次挥手是用来确认客户端和服务端发送和接收的数据完整，没有丢失。是发生在客户端和服务端端开连接时。服务端发送两次请求。
https://juejin.cn/post/6844903958624878606#heading-1
- 注：
1、https是非对称加密过程。
2、建立连接握手是三次，分手断开是四次。
Q&A
– Q：页面的重绘和回流分别是在哪个阶段做的？
– A：回流（重排）需要更新完整的渲染流水线，开销巨大；重绘省去了布局和分层阶段，所以执行效率会比重排操作要高一些。
参考文档：