【网络】Web页面的请求过程

1DHCP(动态主机配置协议)配置主机信息

假设主机最开始没有 IP 地址以及其它信息,那么就需要先使用 DHCP 来获取。

主机生成一个 DHCP 请求报文,并将这个报文放入具有目的端口 67 和源端口 68 UDP 报文段中。

该报文段则被放入在一个具有广播 IP 目的地址(255.255.255.255) 和源 IP 地址(0.0.0.0)的 IP 数据报中。

该数据报则被放置在 MAC 帧中,该帧具有目的地址 FF:FF:FF:FF:FF:FF,将广播到与交换机连接的所有设备。

连接在交换机的 DHCP 服务器收到广播帧之后,不断地向上分解得到 IP 数据报、UDP 报文段、DHCP 请求报文,之后生成 DHCP ACK 报文,该报文包含以下信息:IP 地址、DNS 服务器的 IP 地址、默认网关路由器的 IP 地址和子网掩码。该报文被放入 UDP 报文段中,UDP 报文段有被放入 IP 数据报中,最后放入 MAC 帧中。

该帧的目的地址是请求主机的 MAC 地址,因为交换机具有自学习能力,之前主机发送了广播帧之后就记录了 MAC 地址到其转发接口的交换表项,因此现在交换机就可以直接知道应该向哪个接口发送该帧。

主机收到该帧后,不断分解得到 DHCP 报文。之后就配置它的 IP 地址、子网掩码和 DNS 服务器的 IP 地址,并在其 IP 转发表中安装默认网关。

2ARP 解析 MAC 地址

主机通过浏览器生成一个 TCP 套接字,套接字向 HTTP 服务器发送 HTTP 请求。为了生成该套接字,主机需要知道网站的域名对应的 IP 地址。

主机生成一个 DNS 查询报文,该报文具有 53 号端口,因为 DNS 服务器的端口号是 53

DNS 查询报文被放入目的地址为 DNS 服务器 IP 地址的 IP 数据报中。

IP 数据报被放入一个以太网帧中,该帧将发送到网关路由器。

DHCP 过程只知道网关路由器的 IP 地址,为了获取网关路由器的 MAC 地址,需要使用 ARP 协议。

主机生成一个包含目的地址为网关路由器 IP 地址的 ARP 查询报文,将该 ARP 查询报文放入一个具有广播目的地址(FF:FF:FF:FF:FF:FF)的以太网帧中,并向交换机发送该以太网帧,交换机将该帧转发给所有的连接设备,包括网关路由器。

网关路由器接收到该帧后,不断向上分解得到 ARP 报文,发现其中的 IP 地址与其接口的 IP 地址匹配,因此就发送一个 ARP 回答报文,包含了它的 MAC 地址,发回给主机。

3、DNS解析域名

a)首先会搜索浏览器自身的DNS缓存(缓存时间比较短,大概只有1分钟,且只能容纳1000条缓存)

b)如果浏览器自身的缓存里面没有找到,那么浏览器会搜索系统自身的DNS缓存

c)如果还没有找到,那么尝试从 hosts文件里面去找

d)在前面三个过程都没获取到的情况下,就递归地去域名服务器去查找,具体过程如下


这里解释一下什么是递归查询,什么是迭代查询:

一、主机向本地域名服务器的查询一般都是采用递归查询

所谓递归查询就是:如果主机所询问的本地域名服务器不知道被查询的域名的IP地址,那么本地域名服务器就以DNS客户的身份,

向其它根域名服务器继续发出查询请求报文(即替主机继续查询),而不是让主机自己进行下一步查询。

因此,递归查询返回的查询结果或者是所要查询的IP地址,或者是报错,表示无法查询到所需的IP地址。

二、本地域名服务器向根域名服务器的查询的迭代查询。

迭代查询的特点:当根域名服务器收到本地域名服务器发出的迭代查询请求报文时,要么给出所要查询的IP地址,要么告诉本地服务器:“你下一步应当向哪一个域名服务器进行查询”。

然后让本地服务器进行后续的查询。根域名服务器通常是把自己知道的顶级域名服务器的IP地址告诉本地域名服务器,让本地域名服务器再向顶级域名服务器查询。

顶级域名服务器在收到本地域名服务器的查询请求后,要么给出所要查询的IP地址,要么告诉本地服务器下一步应当向哪一个权限域名服务器进行查询。

最后,知道了所要解析的IP地址或报错,然后把这个结果返回给发起查询的主机

总结一下就是:

递归:客户端只发一次请求,要求对方给出最终结果。

迭代:客户端发出一次请求,对方如果没有授权回答,它就会返回一个能解答这个查询的其它名称服务器列表,

客户端会再向返回的列表中发出请求,直到找到最终负责所查域名的名称服务器,从它得到最终结果。

4、建立TCP连接

拿到域名对应的IP地址之后,User-Agent(一般指浏览器)会以一个随机端口(1024<端口<65535)向服务器的WEB程序(常用的有httpd,nginx)等的80端口。这个连接请求(原始的http请求经过TCP/IP4层模型的层层封包)到达服务器端后(这中间有各种路由设备,局域网内除外),进入到网卡,然后是进入到内核的TCP/IP协议栈(用于识别连接请求,解封包,一层一层的剥开),还有可能要经过Netfilter防火墙(属于内核的模块)的过滤,最终达到WEB程序,最终建立了TCP/IP的连接。

详情参考TCP协议博客 https://blog.nowcoder.net/n/e609bfa75ff54124bd24814d59747576

5、发起HTTP请求

HTTP请求报文由三部分组成:请求行,请求头和请求正文

请求行:用于描述客户端的请求方式,请求的资源名称以及使用的HTTP协议的版本号(例:GET/books/java.html HTTP/1.1)

请求头:用于描述客户端请求哪台主机,以及客户端的一些环境信息等

注:这里提一个请求头 Connection,Connection设置为 keep-alive用于说明 客户端这边设置的是,本次HTTP请求之后并不需要关闭TCP连接,这样可以使下次HTTP请求使用相同的TCP通道,节省TCP建立连接的时间

请求正文:当使用POST, PUT等方法时,通常需要客户端向服务器传递数据。这些数据就储存在请求正文中(GET方式是保存在url地址后面,不会放到这里)

6、服务器响应HTTP请求,得到html代码

HTTP响应也由三部分组成:状态码,响应头和实体内容

状态码:状态码用于表示服务器对请求的处理结果

列举几种常见的:
    200 OK(没有问题) 

    301 Moved Permanently:永久性重定向。也就是说原来请求的uri被分配了新的uri,以后就使用这个新的uri。如果之前的uri被保存为了书签,那么把uri替换为新的uri

    302 Found:临时性的重定向。与301不同之处在于不更新书签等。其在收到302后马上用新的uri进行第二次请求,并将方法改为get,但规范本身是禁止这么做的,只是大多数浏览器都没有遵守规范。

    303 See Other:表示请求的资源有多个uri,明确规定应使用get方法定向获取请求的资源。在现在的使用中302与其有一致的含义。

    307 Temporary Redirect:与302有一致的含义,禁止post方法转成get方法

    304 Not Modified:与附带条件的请求配合使用(例如if-None-Match,if-Range等,下文请求首部字段将会讲到),表示请求的资源找到了,但是没有满足请求的附带条件。

    400 Bad Request:表示请求报文中存在语法错误,当发生错误是,需要修改请求的内容再次发送请求,另外,客户端浏览器会像对待200 0k一样对待该状态码

    401 Unauthorized:表示发送的请求需要通过HTTP认证的认证信息,响应报文必须包含一个使用与被请求资源的www-authenticate首部用以质询用户信息,当浏览器初次接收401时,会弹出认证用的窗口

    403 Forbidden:请求被拒绝

    404 Not Found:资源不存在

    500 Internal Server Error(服务器执行请求时发生了错误)

若干响应头:响应头用于描述服务器的基本信息,以及客户端如何处理数据

实体内容:服务器返回给客户端的数据

注:html资源文件应该不是通过 HTTP响应直接返回去的,应该是通过nginx通过io操作去拿到的吧

7、浏览器解析HTML,并请求HTML中的资源

        浏览器拿到html文件后,就开始解析其中的html代码,遇到js/css/image等静态资源时,就向服务器端去请求下载(会使用多线程下载,每个浏览器的线程数不一样),这是时候就用上 keep-alive特性了,建立一次HTTP连接,可以请求多个资源,下载资源的顺序就是按照代码里面的顺序,但是由于每个资源大小不一样,而浏览器又是多线程请求请求资源,所以这里显示的顺序并不一定是代码里面的顺序。

8、浏览器渲染页面

        最后,浏览器利用自己内部的工作机制,把请求的静态资源和html代码进行渲染,渲染之后呈现给用户

   浏览器是一个边解析边渲染的过程。首先浏览器解析HTML文件构建DOM,然后解析CSS文件构建渲染树,等到渲染树构建完成后,浏览器开始布局渲染树并将其绘制到屏幕上。这个过程比较复杂,涉及到两个概念: reflow(回流)和repain(重绘)。DOM节点中的各个元素都是以盒模型的形式存在,这些都需要浏览器去计算其位置和大小等,这个过程称为relow;当盒模型的位置,大小以及其他属性,如颜色,字体,等确定下来之后,浏览器便开始绘制内容,这个过程称为repain。页面在首次加载时必然会经历reflow和repain。reflow和repain过程是非常消耗性能的,尤其是在移动设备上,它会破坏用户体验,有时会造成页面卡顿。所以我们应该尽可能少的减少reflow和repain。

        JS的解析是由浏览器中的JS解析引擎完成的。JS是单线程运行,JS有可能修改DOM结构,意味着JS执行完成前,后续所有资源的下载是没有必要的,所以JS是单线程,会阻塞后续资源下载。




全部评论

相关推荐

03-19 18:27
已编辑
门头沟学院 C++
26学院本太难了,很多公司机筛就给我刷了。机会都难拿到如果是简历存在问题也欢迎拷打————————————————————分割线——————————————————————2026.3.4更新:发完贴之后,时不时投递又收到了不少的笔试/面试邀请。主要是之前投递简历出去之后基本上都是沉默状态,年后好转了不少timeline:2026.01.21&nbsp;文远知行笔试,半年多没刷算法题&nbsp;-&gt;挂&nbsp;(后续HR说春招可以重新安排笔试)2026.2.4&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;小鹏汇天&nbsp;技术一面,第二周收到结果&nbsp;-&gt;挂2026.2.12&nbsp;&nbsp;&nbsp;大众Cariad代招&nbsp;技术二面&nbsp;-&gt;Offer2026.2.28&nbsp;&nbsp;&nbsp;多益网络技术面试,由于风评太差,一直在犹豫要不要接面试&nbsp;-&gt;推迟-----------分割线-----------2026.3&nbsp;月前的某一天,临时去电网报名了二批计算机岗位的笔试2026.3.6&nbsp;从上家公司实习离职,氛围最好的一家公司,leader&nbsp;说可以帮忙转正,但是流程太长,而且我们部门据说只有一个&nbsp;hc,更想要研究生,我很有可能是会被签外包公司在这里干活,就离职了。2026.3.9&nbsp;入职新公司,大众Cariad&nbsp;以外部公司的身份进组,项目组签了三年,后续三年应该都可以在这里呆,不知道有没有希望原地跳槽。2026.3.10&nbsp;电网考试居然说我通过资格审查了,短信约我去参加资格审查,请假一天,买了&nbsp;12&nbsp;号晚上的机票回成都2026.3.15&nbsp;参加国家电网三新计算机类的笔试2026.3.17&nbsp;电网出成绩了,感觉很低。觉得已经🈚️了2026.3.18&nbsp;收到电网面试通知,通知&nbsp;3.22-3.25&nbsp;这个时间去面试,我的岗位只招&nbsp;1&nbsp;个人。据说面试只有&nbsp;2-3&nbsp;人,不知道能不能成功
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
正在热议
更多
# 春招至今,你的战绩如何? #
10911次浏览 93人参与
# 你的实习产出是真实的还是包装的? #
1938次浏览 42人参与
# 巨人网络春招 #
11358次浏览 223人参与
# 军工所铁饭碗 vs 互联网高薪资,你会选谁 #
7612次浏览 43人参与
# 简历第一个项目做什么 #
31725次浏览 339人参与
# 重来一次,我还会选择这个专业吗 #
433507次浏览 3926人参与
# MiniMax求职进展汇总 #
24093次浏览 309人参与
# 当下环境,你会继续卷互联网,还是看其他行业机会 #
187181次浏览 1122人参与
# 牛客AI文生图 #
21443次浏览 238人参与
# 不考虑薪资和职业,你最想做什么工作呢? #
152422次浏览 888人参与
# 研究所笔面经互助 #
118956次浏览 577人参与
# 简历中的项目经历要怎么写? #
310307次浏览 4217人参与
# AI时代,哪些岗位最容易被淘汰 #
63764次浏览 826人参与
# 面试紧张时你会有什么表现? #
30508次浏览 188人参与
# 你今年的平均薪资是多少? #
213114次浏览 1039人参与
# 你怎么看待AI面试 #
180097次浏览 1258人参与
# 高学历就一定能找到好工作吗? #
64329次浏览 620人参与
# 你最满意的offer薪资是哪家公司? #
76519次浏览 374人参与
# 我的求职精神状态 #
448112次浏览 3129人参与
# 正在春招的你,也参与了去年秋招吗? #
363458次浏览 2638人参与
# 腾讯音乐求职进展汇总 #
160662次浏览 1112人参与
# 校招笔试 #
471073次浏览 2964人参与
牛客网
牛客网在线编程
牛客网题解
牛客企业服务