从输入URL到浏览器展示页面发生了什么?

65 阅读3分钟

1. 输入URL并解析出<协议>://<主机>:<端口>/<路径>等

1.1 使用TCP常见端口号:
    * FTP(文件传输):21
    * TELNET(远程登录):23
    * SMTP(简单邮件传送):25
    * POP3(接收邮件):110
1.2 使用UDP
    * DNS:53
    * TFTP(简单文件传输):69
    * HTTP:80
    * SNMP(简单网络管理):161

2. 查找缓存:浏览器缓存——系统缓存——路由缓存。这里主要介绍浏览器缓存

2.1 强缓存
    先根据请求头的Expires和Cache-Control判断是否命中强缓存
    * Expires:受限于本地时间
    * Cache-Control:max-age=2000.
        * 是相对时间
        * HTTP1.1提出的
        * 优先级大于Expires
2.2 协商缓存
    如果没有命中强缓存,通过Last-Modified和ETag来判断是否命中协商缓存
    * Last-Modified (响应头)和 If-Modified-Since(请求头):If-Modified-Since是最后修改时间,与Last-Modified来对比,询问服务器资源是否更新
        * 但是在本地打开缓存文件会修改Last-Mofified的值,因此出现了ETag
    * ETag(响应头)和 If-None-Match(请求头):ETag是服务器给文件生成的唯一标识,每次更新都会生成一个新的ETag,下次请求时,作为If-None-Match的值
        * HTTP1.1提出的
        * 优先级大于If-Modified-Since
2.3 发送HTTP请求:缓存都没有命中,则向服务器发送HTTP请求

3. DNS系统(应用层,使用UDP报文格式,查询方式有优先“迭代查询”和递归查询))解析出URL对应的IP(网络层)

4. 三次握手建立TCP连接(运输层,可靠传输)

image.png

4.1 三次握手
       (1)客户端发送【连接请求】:同步SYN位设为1,初始序号seq=x(随机数)
       (2)服务器【确认请求】:SYN位和ACK位都设为1,确认号ack=x+1,同时为自己选择一个seq=y
       (3)客户端【发送确认】:ACK位设为1,确认号ack=y+1,而自己的序号seq=x+1
4.2 为什么是三次握手
    这是由于TCP的可靠传输决定的,要确认双方的发送和接收能力,不然容易出现丢包现象。
4.3 第三次握手的存在原因:主要是为了防止已失效的连接请求报文突然又发送给了服务器导致错误产生。

6. 服务器响应并返回请求结果

7. 四次挥手释放TCP连接

image.png

7.1 四次挥手
    (1)客户端终止位FIN置为1,自己的序号seq=u是前面已传送过数据的最后一个字节的序号+1
    (2)服务器确认位ACK置为1,确认号ack=u+1,自己的序号seq=v。
    此时属于“半关闭状态”
    (3)服务器连接释放:终止位FIN置为1,自己的序号seq=w(为v),确认位ACK置为1和确认号ack=u+1
    (4)客户端发送确认:确认号ACK置为1,确认号ack=w+1.此时还要等待一个超时重传的时间才能将整个连接释放,因为确认请求可能会丢失,B会重传终止报文。

9. 浏览器渲染页面

image.png

7.1 生成DOM树
7.2 生成CSS规则树
7.3 将两个树合并成渲染树
7.4 布局Layout:计算出每个节点在屏幕中的位置和大小
7.5 绘制:按照计算出来的规则,利用GPU将内容画出来。
7.6 显示页面。

参考链接: