一、DNS解析（网址->IP地址）
dns是一个域名系统，是万维网上作为bai域名和IP地址相互映射的一个分布式数据库，能够使用户更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串
从浏览器中查找DNS缓存
如果没有，继续到操作系统中查询DNS缓存
如果没有，开始分级查询
- 本地DNS服务器
- 根域名服务器
- COM顶级域名服务器
- goole.com域名服务器
查到IP地址后，继续下一步
二、TCP连接（三次握手)
http超文本传输协议是TCP/IP协议的子集，TCP有6种标示：SYN(建立联机) ACK(确认) PSH(传送) FIN(结束) RST(重置) URG(紧急)
- 第一次握手：客户端 -> 服务端
客户端向服务端发送请求报文，请求建立连接，等待服务端确认。发送字段：
SYN=1（synchronization 同步。请求建立连接）
Seq=x（sequence 客户端序列号）
- 第二次握手： 服务端 -> 客户端
服务端表明收到请求报文并同意建立连接，发送确认报文，询问客户端是否准备好。返回字段：
SYN=1（同意建立连接）
ACK=x+1（acknowledgement 答复。客户端序列号+1）
Seq=y（服务端序列号）
- 第三次握手：客户端 -> 服务端
客户端表明收到确认报文，再返回服务端一个确认报文，表示准备开始发送信息。发送字段：
SYN=0（开始发送信息）
ACK=y+1（服务端序列号+1）
Seq=x+1（序列号设置为服务端ACK）
第一次表明客户端有发送信息的能力
第二次表明服务端有接收信息和发送信息的能力
第三次表明客户端有接收信息的能力
三、 客户端发送HTTP请求
四、服务端处理请求，并返回HTTP报文
五、浏览器解析并渲染页面过程
浏览器解析页面过程：
- 浏览器接收到HTML模板文件，自上而下解析HTML
- 浏览器遇到CSS样式文件表，暂停解析HTML，请求CSS文件
- 服务端返回CSS文件，浏览器开始解析CSS
- 浏览器解析完CSS，继续解析HTML，遇到DOM节点，解析DOM
- 浏览器遇到img图片，异步请求图片，继续解析后面的代码
- 浏览器返回图片，由于图片占有面积影响布局，浏览器重绘
- 浏览器遇到js脚本文件，停止所有文件加载和解析，请求并执行脚本文件（js阻塞，所以js标签尽量放在body最后）
- 浏览器执行完脚本文件，如果后面还有代码，继续解析
- 加载并解析完所有HTML、CSS、JS文件，页面出现
浏览器渲染页面过程：
1.解析HTML，构建DOM树；解析CSS，生成CSS规则
2.构建render树（渲染树，HTML + CSS，不包括display:none）
3.布局render树（layout过程，计算宽高、定位、坐标、换行、positions、overflow、z-index等属性）
4.绘制render树（painting过程，背景 —> 浮动 -> content -> padding -> border）
引起浏览器重新布局layout：
js 修改 DOM 属性或 css 属性，分为两种情况：
1. 重绘，不改变定位、宽高等，只改变元素展示方式
2. 重排/回流，影响文档内容、结构或元素定位
优化：
1. 脱离文档流的重排只影响自己子孙元素
2. 读取element属性会造成重排，尽量避免。如offsetTop/scrollTop/clientTop系列
六、TCP连接结束（四次挥手）
- 第一次挥手：客户端 -> 服务端
客户端发送断开连接的请求
FIN （finish 结束）
ACK=1000 （acknowledgement 答复）
Seq=x （sequence 客户端序列号） - 第二次挥手：服务端 -> 客户端
服务端接收并同意断开连接的请求
ACK=x+1 （acknowledgement 答复，客户端序列号+1）
Seq=1000 （服务端序列号设置为客户端ACK） - 第三次挥手：服务端 -> 客户端
服务端发送断开连接的请求
FIN（finish 结束）
ACK=x+1 （客户端序列号+1）
Seq=1000（服务端序列号） - 第四次挥手：客户端 -> 服务端
客户端断开连接，完成通讯
ACK=1000+1 （服务端序列号+1）
Seq=x+1（客户端序列号设置为服务端ACK）
第一次表明发完了
第二次表明知道发完了
第三次表明收完了
第四次表明知道收完了
