从浏览器输入网址到页面显示的全过程

摘要:
从全局来讲,当键入一个url时,肯定是需要从服务器请求某个页面或某条数据然后显示到用户自己的电脑屏幕上。主要从TCP协议族、DNS、三次握手、服务器缓存和代理、负载均衡、四次挥手、html显示和渲染、流行的服务器类型和前端类型...争取全面而清晰。若检验和计算结果一致,则去掉报头,将TCP段发送至传输层。④web缓存器收到响应后,在本地存储一份副本,并向客户端的浏览器用HTTP响应报文发送该副本。

【前言】从全局来讲,当键入一个url时,肯定是需要从服务器请求某个页面或某条数据然后显示到用户自己的电脑屏幕上。这个过程中其实包括:DNS对url域名的解析(在url中解析出服务器所在的IP地址,有的url也包括端口),计算机网络中的五层协议层传输,代理服务器的响应、缓存或者负载均衡、最终html/css/js文件的解析与展现。从后端到前端,这只是概括,接下来将展开分析。

主要从TCP协议族、DNS、三次握手、服务器缓存和代理、负载均衡、四次挥手、html显示和渲染、流行的服务器类型和前端类型...争取全面而清晰。分两部分:一般通信过程和当下流行的服务器架构举例。持续更新,逐步完善。

一、一般过程

1.DNS对url域名的解析,获取主机所在的IP地址:

(1)浏览器将url中抽取出主机名(域名),并将主机名传送给DNS应用的客户端;

(2)DNS客户端向最近的DNS服务器发送一个包含主机名的请求,有可能逐级向上请求;(若本机的dns缓存有,则不必请求dns服务器)

(3)DNS客户端最终会收到一份回答报文,其中包含有对该主机名的IP地址。

2.浏览器接收到来自DNS的IP地址,然后向位于该IP地址的80端口的HTTP服务器发起一个TCP连接(三次握手):

①客户端发送一个带SYN标志的TCP报文到服务器,这是第一次握手。

②服务器端发送一个相应报文回应客户端,这个报文同时带ACK标志和SYN标志。表示对刚才客户端SYN报文的回应,同时又标志ACK给客户端,询问客户端是否准备好进行数据通讯。这是第二次握手

③客户端必须再次回应服务端一个ACK报文进行确认,同时发送一个HTTP请求给客户端,这是第三次握手。

可见,一次htttp请求,要进行三次握手的过程:

源的应用层->传输层->网络层->链路层->物理层———………———目的端的物理层->链路层->网络层->传输层->应用层

(1)在源主机上,应用层将一串应用数据流传送给传输层。(数据流就是get或者post的内容,参考

(2)传输层将应用层的数据流截成分组,并加上TCP报头形成TCP段,送交网络层。(传输层作用:差错控制,流量控制和拥塞控制)

(3)在网络层给TCP报头加上源,目的主机IP地址和IP报头,生成一个IP数据报,并将IP数据包送交给链路层。

(4)链路层在其MAC帧的数据部分装上IP数据报,再加上源,目的主机的MAC地址和帧头,并根据其目的MAC地址发送目的主机或IP路由器(查路由表)。

(5)在目的主机,链路层将MAC帧的帧头去掉,并将IP数据发送至网络层。

(6)网络层检查IP报头,如果报头和计算结果不一样,则丢弃IP数据包,则向源主机要求重发消息。若检验和计算结果一致,则去掉报头,将TCP段发送至传输层。

(7)传输层检查顺序号,判断是否是正确的TCP分组,然后检查TCP报头数据。若正确,则去掉TCP报头,向源主机发送数据分组。否则,向源主机要求重发消息。

(8)目的主机收到来自源主机的字节流。

注意:每一次进行客户端到服务器端或服务器端到客户端的通讯都要经历这么几个步骤:从源的应用层->传输层->网络层->链路层->物理层—…………—到目的端的物理层->链路层->网络层->传输层->应用层,这也是前端中常说的为什么要减少客户端向服务端HTTP请求的原因,因为太耗时了!所以,会有长短连接的策略。

3.建立完TCP连接便可以进行通信了,服务器返回http响应:

握手完毕后,服务器已经收到了客户端的http请求,服务器需要从本地磁盘找出客户端请求的数据,然后返回一条HTTP响应给客户端,并关闭TCP连接(但TCP只有当客户端收到数据后才会完全关闭,此时只是服务器端单方面无法与客户端传输数据)

4.客户端收到http响应,并关闭TCP连接:

由于TCP连接是双全工的,因此每个方向必须单独进行关闭。这原则上是当一方完成它的数据发送任务后就能发送一个FIN来终止这个方向上的连接。收到一个FIN意味着这一方向上没有数据流动,一个TCP连接在收到一个FIN后仍然能发送数据。首先关闭的一方执行主动关闭,而另一方执行被动关闭, 3,4条中的TCP连接关闭细节(四次挥手)如下:

①服务器发送一个FIN,用来关闭服务端器到客户端的数据传送(第一次挥手)

②客户端收到这个FIN,它返回一个ACK,确认收到(第二次挥手)

③客户端关闭服务器的连接,发送一个FIN给服务器(第三次挥手)

④服务器收到这个FIN,斌返回ACK报文,确认收到(第四次挥手)

5.以上2,3,4条都是针对请求的该网站没有缓存代理的情况,如果该网站存在代理服务器,那么将由代理服务器来协调客户端与服务器的通信(此处很多细节在前面讲过就不再赘述,比如三次握手建立TCP连接,四次挥手关闭TCP连接的详细过程)

(1)客户端有代理服务器如下:

①客户端建立一个到web缓存的TCP连接,并向web缓存器发送一条HTTP请求。

②web缓存器进行检查,看看本地是否存储了该对象的副本,如果有,web缓存服务器就向客户端发送一个HTTP响应报文。

③如果web缓存器中没有该资源,就打开一个到该对象初始服务器的TCP连接。web缓存器则在这个缓存器到服务器的TCP上发送一个HTTP请求,初始服务器返回HTTP相应。

④web缓存器收到响应后,在本地存储一份副本,并向客户端的浏览器用HTTP响应报文发送该副本。
(2)服务器端有代理服务器

服务器端的代理服务器分为两种,一种直接响应客户端请求称为正向代理服务器,还有一种在分布式集群中作为统一的对外接口的反向代理服务器。反向代理服务器一般在集群中,则又称负载均衡服务器。可参考我的另一篇博客:nginx服务器

6.客户端收到http响应发送过来的文件,并将文件解析成页面展示给用户:

①解析html构建DOM树

②构建render树

③布局render树

④绘制render树

当然,这个过程避免不了回流和重绘,这也是我们前端人员在开发中需要着重考虑的事情。

二、具体应用

举例架构,django+redis+nginx+tomcat

三、其他参考

https://weibo.com/ttarticle/p/show?id=2309404344379484577227

更底层https://github.com/skyline75489/what-happens-when-zh_CN/blob/master/README.rst

免责声明:文章转载自《从浏览器输入网址到页面显示的全过程》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇python assert使用说明《非暴力沟通》书记下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

ASP.NET基础知识整理

Asp.net六大对象 1.Request-->读取客户端在Web请求期间发送的值 常用方法: 1、Request.UrlReferrer请求的来源,可以根据这个判断从百度搜的哪个关键词、防下载盗链、防图片盗链,可以伪造(比如迅雷)。 (使用全局一般处理程序) 2、Request.UserHostAddress获得访问者的IP地址 3、Reque...

使用apache的ab命令进行压测

1. 背景:互联网发达的今天,大大小小的网站如雨后春笋,不断出现,但是想要做出一个网站很简单,但是想要做好一个网站,非常非常难,首先:网站做好之后的功能怎么样这都是次要的,主要的是你的网站能承受怎么样的访问量,一个在高压访问下,能承受很高峰值的访问并发才能称得上是一个好的网站,那么作为一个程序员,当你搭建好你的网站之后,你应该怎么测试你的网站并发访问量呢?...

PHP解决网站大流量与高并发

1:硬件方面   普通的一个p4的服务器每天最多能支持大约10万左右的IP,如果访问量超过10W那么需要专用的服务器才能解决,如果硬件不给力 软件怎么优化都是于事无补的。主要影响服务器的速度 有:网络-硬盘读写速度-内存大小-cpu处理速度。 2:软件方面     第一个要说的就是数据库   首先要有一个很好的架构,查询尽量不用* 避免相关子查询 给经常查...

消息队列之 ActiveMQ

简介 ActiveMQ 特点 ActiveMQ 是由 Apache 出品的一款开源消息中间件,旨在为应用程序提供高效、可扩展、稳定、安全的企业级消息通信。 它的设计目标是提供标准的、面向消息的、多语言的应用集成消息通信中间件。ActiveMQ 实现了 JMS 1.1 并提供了很多附加的特性,比如 JMX 管理、主从管理、消息组通信、消息优先级、延迟接收...

网站优化:浏览器缓存控制简介及配置策略

每次访问网页,通常浏览器会从服务器下载所需的资源,例如 HTML 文档、图片、CSS、JavaScript,甚至包括字体文件等。这里面的许多文件(例如图片)都是很少变动的,如果每次都要从服务器重新下载,会不必要地增加网页载入时间,同时也会对服务器造成一定压力。通过合理配置缓存策略,可令浏览器以某种方式把这些静态的文件缓存起来,下次请求同一资源时,直接使用本...

cookie详解

背景 在HTTP协议的定义中,采用了一种机制来记录客户端和服务器端交互的信息,这种机制被称为cookie,cookie规范定义了服务器和客户端交互信息的格式、生存期、使用范围、安全性。 在JavaScript中可以通过 document.cookie 来读取或设置这些信息。由于 cookie 多用在客户端和服务端之间进行通信,所以除了JavaScript以...