「这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战」
- DNS解析（网址->ip）:DNS缓存：浏览器，操作系统，分级查询：本地DNS服务器，根域名服务器，COM定级域名服务器，google.com域名服务器
- TCP连接（三次握手）
- 发送HTTP请求，分析url，设置请求报文
- 服务端处理请求，并且返回HTTP报文
- 浏览器解析和渲染页面
- 连接结束（四次挥手）
三次握手
这里是markdown写的图形，貌似掘金不能识别
客户端 -> 服务端:报头：SYN=1(请求建立连接),seq=n(表示序列号，32位)
服务端 -> 客户端:SYN=1(服务端同意建立连接),ack=n+1(确认收到信息),seq=x(服务端序列号),ACK=1
客户端 -> 服务端:ACK=1,SYN=0(开始发送信息)，ack=x+1(确认收到信息),seq=n+1
- 第一次握手说明客户端具有发送信息的能力
- 第二次握手说明服务端具有接收信息的能力和发送信息的能力
- 第三次握手说明客户端具有接收信息的能力
四次挥手
客户端->服务端:FIN=1(请求断开连接)，seq=m
服务端->客户端:ACK=1（消息确认包），ack=m+1
服务端->客户端:FIN=1（请求断开连接），seq=b
客户端->服务端:ACK=1,ack=b+1
浏览器渲染页面
- 解析html文件构建DOM树、解析css生成CSSOM树。构建DOM树期间，如果遇到JS，阻塞DOM树及CSSOM树的构建，优先加载JS文件，加载完毕再继续构建DOM树和CSSOM树
- 结合DOM树和CSSOM树构建成渲染树（Render Tree）
- Layout(回流)：根据生成的渲染树进行回流（Layout），得到节点的几何信息（位置、大小）
- Painting（重绘）：genuine渲染树以及回流得到的几何信息得到节点的绝对像素
- Display：将像素发送给GPU，展示在页面上 页面的绘制，重绘（repaint）和重排（reflow，也有称回流），页面渲染完成后若js操作了DOM节点，根据JS对DOM操作动作的大小，浏览器对页面进行重绘或者重排 通过构造渲染树，将可见DOM节点及它对应的样式结合起来，可是还需要计算他们在设备视口（viewport）内的确切位置和大小，这个极端的阶段就是回流 最终通过构造渲染树和回流阶段，知道了哪些节点是可见的，以及可见节点的样式和具体的几何信息(位置、大小)，那么我们就可以将渲染树的每个节点都转换为屏幕上的实际像素，这个阶段就叫做重绘
