浏览器相关(2)- 从输入url到页面展示发生了什么

本文详细介绍了从输入URL到页面完全加载的整个过程,包括浏览器如何解析URL、查找IP地址、发送HTTP请求、处理服务器重定向、获取及显示HTML内容以及加载嵌入资源等关键步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

简单来讲,从输入url到页面展示总共经历以下九个过程:
step1:输入地址
step2:浏览器查找域名的IP地址
step3:浏览器向web服务器发送一个HTTP请求
step4:服务器的永久重定向相应
step5:浏览器跟踪重定向地址
step6:服务器处理请求
step7:服务器发送一个HTTP相应
step8:浏览器显示HTML页面
step9:浏览器发送请求以获取嵌入在HTML的资源(图片、音频、视频、CSS、JS)

一、输入地址

当我们开始在浏览器中输入网址的时候,浏览器会从历史纪录、书签等位置开始智能的匹配可能的url,找到已经输入的字符串可能对应的url,然后给出智能的提示,使用户可以补全url地址。

二、浏览器查找域名的IP地址

step1:查找浏览器缓存 - 浏览器会缓存DNS记录一段时间,操作系统并未告诉浏览器每个DNS记录的生存时间,因此,浏览器会将其缓存一段时间(2~30min);
step2:查找系统缓存 - 如果浏览器缓存中不包含所需的记录,则会查看操作系统的缓存,对本地硬盘的hosts文件中进行查看,寻找域名的IP地址;
step3:查找本地DNS缓存 - 如果在操作系统缓存中未找到域名的IP地址,则请求将会到达本地DNS服务器。本地DNS服务器会首先查找自己的缓存,如果找到记录,则直接返回结果;
step4:查找ISP的DNS缓存 - 如果本地DNS缓存中未查找到结果,则查找ISP缓存,若存在,则返回结果,同时,在本地DNS服务器中缓存结果;
step5:查找跟DNS服务器 - 如果在ISP的DNS服务器中未找到结果,本地DNS服务器会继续向根DNS服务器发出请求,此时,将进行递归搜索。

三、浏览器向web服务器发送一个HTTP请求

拿到域名对应的IP地址后,浏览器会以一个随机端口(1024<端口<65535)向服务器的WEB程序的80端口发起TCP的连接请求。这个连接请求到达服务器端后,进入到网卡,然后是进入到内核的TCP/IP协议栈(用于识别连接请求,解封包,一层层的剥开),还有可能要经过Netfilter防火墙的过滤,最终到达WEB程序,最终建立了TCP/IP的连接。

HTTP请求消息

HTTP请求到服务器的请求消息包括以下格式:
请求行(request line)
请求头部(header)
空行
请求数据

HTTP请求消息结构:
HTTP请求消息结构

TCP协议的连接和断开

TCP报文格式

TCP报文格式图:
TCP报文格式
其中:
(1)序号:seq序号,占32位,用来标识从TCP源端向目的端发送的字节流,发起方发送数据时对此进行标记。
(2)确认序号:ack序号,占32位,只有ACK标志位为1时,确认序号字段才有效,ack=seq+1。
(3)标志位:共6个,即URG、ACK、PSH、RST、SYN、FIN等,具体含义如下:

  • URG:紧急指针(urgent pointer)有效
  • ACK:确认序号有效
  • PSH:接收方应该尽快将这个报文交给应用层。
  • RST:重置连接。
  • SYN:发起一个新连接。
  • FIN:释放一个连接。

连接 - 三次握手

所谓三次握手(Three-Way Handshake)即建立TCP连接,是指建立一个TCP连接时,需要客户端和服务端总共发送3个包以确认连接的建立。

三次握手示意图

(1)第一次握手:Client将标志位SYN置为1,随机产生一个值seq=J,并将该数据包发送给Server,Client进入SYN_SENT状态,等待Server确认。

(2)第二次握手:Server收到数据包后由标志位SYN=1知道Client请求建立连接,Server将标志位SYN和ACK都置为1,ack (number )=J+1,随机产生一个值seq=K,并将该数据包发送给Client以确认连接请求,Server进入SYN_RCVD状态。

(3)第三次握手:Client收到确认后,检查ack是否为J+1,ACK是否为1,如果正确则将标志位ACK置为1,ack=K+1,并将该数据包发送给Server,Server检查ack是否为K+1,ACK是否为1,如果正确则连接建立成功,Client和Server进入ESTABLISHED状态,完成三次握手,随后Client与Server之间可以开始传输数据了。

断开 - 四次挥手

所谓四次挥手(Four-Way Wavehand)即终止TCP连接,就是指断开一个TCP连接时,需要客户端和服务端总共发送4个包以确认连接的断开。

四次挥手示意图

由于TCP连接时全双工的,因此,每个方向都必须要单独进行关闭,这一原则是当一方完成数据发送任务后,发送一个FIN来终止这一方向的连接,收到一个FIN只是意味着这一方向上没有数据流动了,即不会再收到数据了,但是在这个TCP连接上仍然能够发送数据,直到这一方向也发送了FIN。首先进行关闭的一方将执行主动关闭,而另一方则执行被动关闭,上图描述的即是如此。

(1)第一次挥手:Client发送一个FIN,用来关闭Client到Server的数据传送,Client进入FIN_WAIT_1状态。

(2)第二次挥手:Server收到FIN后,发送一个ACK给Client,确认序号为收到序号+1(与SYN相同,一个FIN占用一个序号),Server进入CLOSE_WAIT状态。

(3)第三次挥手:Server发送一个FIN,用来关闭Server到Client的数据传送,Server进入LAST_ACK状态。

(4)第四次挥手:Client收到FIN后,Client进入TIME_WAIT状态,接着发送一个ACK给Server,确认序号为收到序号+1,Server进入CLOSED状态,完成四次挥手。

经典问题1 - 为什么要进行三次握手?

目的:为了防止已经失效的连接请求报文段突然由传送到了服务端,因而产生错误。
假如不采用“三次握手”,那么只要server端发出确认,新的连接就被建立了。由于现在client并没有发出建立连接的请求,因此不会理睬server的确认,也不会向server发送数据,但是server却以为新的传输连接已经建立了,并一直等待client发来数据。这样,server的很多资源就白白浪费掉了。采用“三次握手”的办法可以防止上述现象发生。

经典问题2 - 为什么建立连接需要三次握手而关闭连接需要四次挥手?

这是因为服务端在LISTEN状态下,收到建立连接请求的SYN报文后,把ACK和SYN放在一个报文里发送给客户端。而关闭连接时,当收到对方的FIN报文时,仅仅表示对方不再发送数据了但是还能接收数据,己方也未必全部数据都发送给对方了,所以己方可以立即close,也可以发送一些数据给对方后,再发送FIN报文给对方来表示同意现在关闭连接,因此,己方ACK和FIN一般都会分开发送。

四、服务器的永久重定向响应

服务器给浏览器响应一个301永久重定向响应。
服务器一定要重定向而不是直接发送用户想看的网页内容的原因
①搜索引擎排名
如果一个页面有两个地址,就像http://www.yy.com/http://yy.com/,搜索引擎会认为它们是两个网站,结果造成每个搜索链接都减少而降低排名。而搜索引擎知道301永久重定向是什么意思,这样就把访问带www和不带www的地址都归于同一个网站排名下。
②缓存
用不同的地址会造成缓存友好性变差,当一个页面有多个名字时,它可能会在缓存里出现多次。

五、浏览器跟踪重定向响应

浏览器会向重定向之后的地址重新发送一个HTTP响应。

六、服务器处理请求

后端从固定的端口接收TCP报文开始,它会对TCP连接进行处理,对HTTP协议进行解析,并按照报文格式进一步封装成HTTP Request对象,供上层使用。

七、服务器返回一个HTTP响应

HTTP响应也由四部分组成:
状态行
消息报头
空行
响应正文

八、浏览器显示HTML

不同的浏览器可能解析过程不太一样,这里以webkit的渲染过程为例:
解析html以构建dom树 -> 构建render树 -> 布局render树 -> 渲染render树

这里写图片描述

九、浏览器发送请求获取嵌入在HTML中的资源(如图片、音频、视频、CSS、JS)

 其实这个步骤可以并列在步骤8中,在浏览器显示HTML时,它会注意到需要获取其他地址内容的标签。这时,浏览器会发送一个获取请求来重新获得这些文件。

  这些地址都要经历一个和HTML读取类似的过程。所以浏览器会在DNS中查找这些域名,发送请求,重定向等等…

不像动态页面,静态文件会允许浏览器对其进行缓存。有的文件可能会不需要与服务器通讯,而从缓存中直接读取,或者可以放到CDN中。

W3Cschool http://www.w3cschool.cn/http/1p9jwfmq.html
TCP协议的三次握手和四次挥手 http://uule.iteye.com/blog/2213562
十分完整的总结 http://www.cnblogs.com/xianyulaodi/p/6547807.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值