大家好，我是三玹！

有一段时间没写文章了，因为这段时间里感觉遇到瓶颈，有点江郎才尽，挤不出墨水来了，所以去找找新思路。真实原因才不是因为我懒~

好吧，一时摆烂一时爽，一直摆烂一直爽！

回归正题，这一段时间也确实在学一些新东西，学习了一下后端，关于网络编程的知识，准备搞个服务器玩玩。

先来一道开胃菜，咱来聊一聊关于正常浏览器访问网站的一个流程。

正文

当我们在网页的地址栏中输入一串网址，敲下回车，就会打开一个新世界。

例如：在浏览器的地址栏中输入百度网址 - https://www.badu.com，敲下回车就会获得在国内家喻户晓的一个界面。

这个界面虽然看着简单，但是看一下它的源代码，瞧着右上角高高悬挂的拉条，就知道这界面可一点儿都不简单。（查看源代码，右键网页界面点击查看网页源代码或者 ctrl+u。）

那么问题来了，在我们的电脑中是百分百找不到【百度界面】这个 HTML 文件，更不要说其中的图片、JS、CSS等资源文件。

可以知道的一点，这些资源肯定是百度网站提供的。那么，我们的浏览器是怎么从网站那边拿到这些数据，然后在页面上展示的呢？

在流程开始之前，简单介绍一些概念。

网站：是一个由多个网页组成的信息系统，通常是由服务器端和客户端组成的。

服务器端：网站的核心部分，通常服务器是一台大型的计算机，存储着网站所有的网页、图片、视频等信息。同时还负责处理来自客户端的请求，返回所需的信息。

客户端：网站的用户端，通常是一台普通的计算机、或者手机等，我们可以通过客户端访问网站查看网站的内容。另外，客户端通常需要借助浏览器等软件连接网站服务器。

第一步 客户端发送网页 GET 请求

当我们在浏览器的地址中输入网址，并敲下回车的那一刻。

就是在跟咱们的跑腿小厮浏览器发出了一个指令，今儿咱要看这个页面，你去安排一下。

浏览器收到我们的命令之后，就会朝着对应网站的服务器端出发。

第二步 服务器端接收请求，发送响应包

到了服务器端的大楼，进入大楼需要经过门卫的检查，确保你的浏览器是正常来路，而不是什么恐怖分子。

身份检查没问题后，就会给浏览器分配一个客服小姐姐接待：亲，有什么需要帮忙的吗？

浏览器此时会将你的指令转达给客服小姐姐：小姐姐，我家主子要看你家的这个网页，您看OK不？

小姐姐就会去找相应的页面资源文件（HTML文件），如果就交给浏览器带回去。

反之如果没有找到，但也不能让浏览器白跑一趟，就把经典的 404 页面让浏览器带回去。

第三步 客户端发送资源 GET 请求

浏览器拿到了页面资源回家后，一向严谨的他会检查一下拿到的页面是否能够完整地展示出来，会不会缺胳膊少腿。

不检查还好，一检查可就出大问题了，怎么这个CSS文件少了，那个图片还是破裂的。

就这么展示，今晚的晚饭岂不是没了着落。

没办法，只能带着有资源路径的 GET 请求再次到服务器端去领取。

第四步 服务器端接收请求，发送资源响应

于是，浏览器又得去一趟服务器端大楼，还得经过门卫的检查，毕竟门卫不敢保证你这回去的过程中是不是就突然叛变了呢。

检查通过后，之前负责接待的客服小姐姐就迎了上来。

根据浏览器提供的资源路径，去找相应的文件交给浏览器。

但浏览器一次性只能领一个资源，为了能吃上美美的晚饭，就不得不多次往返的跑。

直到整个界面的资源都领取了一遍，才敢将网页完整地展示出来。

基本到这里，一个完整的静态页面就可以在浏览器上展示出来了。

第五步 客户端发送 POST 请求

但有时候，我们进入一个网站需要登录，需要填写账号密码提交验证。

这个时候浏览器就会带着有账号密码的 POST 请求再次前往服务器端。

第六步 服务器接收请求，转交 CGI处理

客服小姐姐接到了 POST 请求，但这个请求超出她负责处理的范围。

因此就会代转交给专业人士 CGI 来进行处理。

CGI（Common Gateway Interface，通用网关接口）。

第七步 CGI发送处理结果

CGI 收到了请求后，将里面的账号密码和数据库里面的进行比较。

如果都符合，就会得到一个’登陆成功‘的处理结果。

如果没找到相应的账号，就会得到’账号不存在‘的处理结果

账号存在，但密码不对，就得到’密码错误‘的处理结果。

最后把处理结果交给客服小姐姐。

第八步 服务器端发送响应

客服小姐姐将CGI的处理结果转交给浏览器，浏览器带着结果回去。

如果处理结果是成功的，就可以发现界面中原本登录注册那一块，会变成头像、昵称等内容。

处理结果失败了，就会在登录页面中显示账号不存在或者密码错误等提示。

总结

到这里，关于浏览器访问网站获取页面资源的大致过程就介绍完了。

整个描述过程似乎看着很复杂，但实际上我们感官上体验其实也就 1-2 秒的。在正常情况，访问一个网站响应时间超过 5 秒，大多数人会选择关闭。

其中涉及到的一些知识点，如 GET 请求、POST 请求、CGI 等等；以及一些没提到但应该有的内容，如 DNS 解析、建立 TCP 请求时的三次握手等等。这些咱们后面一步一步，慢慢展开！

最后，大家要是喜欢本篇文章，还希望能够点个赞支持一下，谢谢！

参考来源

1、

https://blog.csdn.net/pzjdoytt