网页设计登录界面模板-拟人化简述浏览器访问网站的过程

大家好，我是三贤！

有一段时间没有写文章了，因为感觉这段时间遇到了瓶颈ip形象，有点疲惫，墨水也挤不出来，所以就在寻找新的思路。 真正的原因并不是因为我懒~

嗯，有时是坏的，有时是好的，坏的时候总是好的！

回到正题，这段时间我确实学到了一些新东西。 学了一点后端，网络编程的知识，准备架个服务器玩玩。

先开个开胃菜，先说一下用普通浏览器访问网站的一个过程。

文本

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

例如：在浏览器地址栏中输入百度网址——回车，就会得到一个国内知名的界面。

虽然这个界面看起来很简单，但是看看它的源码，再看看右上角高高挂着的拉杆，就可以知道这个界面一点也不简单。 （查看源代码请在网页界面右键点击查看网页源代码或ctrl+u。）

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

我们可以知道的一件事是，这些资源一定是百度网站提供的。 那么，我们的浏览器是如何从网站获取这些数据，然后将其显示在页面上的呢？

在该过程开始之前，先简要介绍一些概念。

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

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

客户端：网站的用户端，通常是普通电脑或者手机等。我们可以通过客户端访问网站，查看网站内容。 另外，客户端通常需要使用浏览器等软件来连接网站服务器。

第一步网页设计登录界面模板，客户端发送网页GET请求

当我们在浏览器地址中输入 URL 并按 Enter 键时。

我刚刚向我们的跑腿浏览器发送了一条指令，我们今天想看到这个页面，您可以安排一下。

浏览器收到我们的命令后，会前往相应网站的服务器端。

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

当你到达服务器端大楼时网页设计登录界面模板，你需要经过警卫的检查才能进入大楼，以确保你的浏览器是来自正常途径，而不是恐怖分子。

身份核对无误后，会指派一位客服小姐到浏览器接收：亲爱的，您需要什么帮助吗？

这时，浏览器会将您的指令传达给客服小姐姐：小姐，我主人想看看您家的这个网页，可以吗？

小姐姐会找到对应的页面资源文件（HTML文件），如果有，就交给浏览器取回来。

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

步骤3 客户端发送资源GET请求

浏览器拿到页面资源回家后，一向严谨的他会检查拿到的页面是否能完整显示，是否有缺胳膊少腿的情况。

不查还好，一查就出大问题了。 为什么CSS文件不见了，而且图片还是坏的。

就这么摆出来，今晚的晚饭不是就没了吗。

没办法，只能再次去服务器用带有资源路径的GET请求来获取。

步骤4：服务器接收请求并发送资源响应

所以，浏览器还得再去服务器端大楼，还要经过门卫的检查。 毕竟，守卫无法保证你回去的过程中是否突然叛变。

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

根据浏览器提供的资源路径，找到对应的文件卡通人物，交给浏览器。

但浏览器一次只能接收一个资源，所以为了有一顿美味的晚餐，它必须来回运行很多次。

直到整个界面的资源都被收集完毕之后，网页才能完整的显示出来。

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

步骤5 客户端发送POST请求

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

此时浏览器会再次向服务器发送带有账号密码的POST请求。

第六步：服务器收到请求，转发给CGI处理

客服小姐姐收到了一个POST请求，但是这个请求超出了她的职责范围。

因此，会交给专业的CGI进行处理。

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

第七步 CGI发送处理结果

CGI收到请求后，将里面的账户密码与数据库中的账户密码进行比较。

如果都匹配，则得到“登录成功”的处理结果。

如果没有找到对应的账户，则会得到“账户不存在”的处理结果

如果账户存在但密码不正确，则会得到“密码错误”的处理结果。

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

步骤8 服务器发送响应

客服小姐姐将CGI处理结果传给浏览器，浏览器返回结果。

如果处理结果成功，你可以发现界面中原来的登录注册区域会变成头像、昵称等内容。

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

总结

至此，浏览器访问网站获取页面资源的大致流程就介绍完了。

整个描述过程看似复杂，但实际上我们的感官体验其实只有1-2秒。 一般情况下，访问一个网站的响应时间超过5秒，大多数人会选择关闭它。

涉及到的一些知识点，比如GET请求、POST请求、CGI等； 还有一些没有提到但应该包括的内容，比如DNS解析、建立TCP请求时的三向握手等等。 让我们一步步慢慢地展开吧！

最后，如果您喜欢这篇文章，希望您能够点赞支持，谢谢！

参考来源

1、