页面从输入URL到渲染都发生了什么

URL是什么？

scheme://host.domain:prot/path/filename?

• scheme:协议，常见有http、https、ftp、file
• domain:域名，通过域名操作服务器IP
• prot:端口号
• path:路径
• ?:后接查询参数等

总体分为以下几个过程：

1. DNS解析(URL对应的IP)
2. TCP链接(三次握手)
3. 发送HTTP请求
4. 服务器处理请求并返回HTTP报文
5. 浏览器渲染页面(构建DOM树)
6. 链接结束(关闭TCP链接，四次握手)

1.DNS域名解析

DNS(域名)解析，浏览器不能直接通过域名找到对应的服务器，而是要通过IP地址。从域名找到IP的过程就是DNS解析。

• 浏览器首发搜索自身的DNS缓存

1.浏览器会将DNS解析的IP与域名缓存起来，减少网络请求的损耗
2.每个浏览器的缓存时间不一样，Chrome为60s、IE为30min、fireFox为60s

• 若浏览器没有，则搜索操作系统中的DNS缓存
• 若没有，则搜索操作系统中的hosts文件
• 路由缓存：路由器也有DNS缓存
• ISP的DNS服务器：ISP是互联网服务提供商(Internet Service Provider)的简称，ISP有专门的DNS服务器对应DNS查询请求
• 根服务器：ISP的DNS服务器找不到的话，它就会向跟服务器发出请求，进行递归查询（DNS服务器先问根域名服务器.com域名服务器的IP地址，然后再问.baidu域名服务器，一次类推）

2.TCP连接（三次握手）

• 第一次握手：客户端发送一个带SYN(同步)标志的数据包给服务端
• 第二次握手：服务端发送带SYN/ACK(确认)标志的数据包给客户端，传达确认信息
• 第三次握手：客户端发送带ACK标志的数据包给客户端，握手结束，连接成功

3.开始发送HTTP请求报文

• 第一部分：请求行(请求资源地址)

请求方法、http协议/版本

• 第二部分：请求头(Request headers)

Accept:text/plain;text/html

请求头把汗请求的附加信息，由关键字/值对组成，每行一对，关键字和值用英文冒号分割

• 第三部分：请求体(Entity body)

4.服务器处理请求并返回HTTP报文

相应行、相应头、相应体

5.浏览器解析渲染页面

• 根据HTML解析DOM数
• 根据CSS解析生成CSS规则树
• 结合DOM树和CSS规则树，生成渲染树
• 根据渲染树计算每一个节点的信息（布局）
• 根据计算好的信息绘制页面

6.断开连接（四次挥手）