Zerlinda's Blog

从地址栏输入URL到页面加载完发生了什么?

有没有想过当你在浏览器的地址栏输入www.baidu.com到页面加载完的过程中都发生了什么事情?这方面涉及的理论比较多,仅仅拿出一点来讲就可以展开很大的篇幅。今天参考了网上许多资料,最后总结出以下几点。总结的不够完全姑且可以做一个参考。

1.浏览器查询缓存,如果缓存存在则跳到第10步。

具体来说,在浏览器第一次请求某一个URL时,服务器端的返回状态会是200,内容是你请求的资源,同时有一个Last-Modified的属性标记此文件在服务期端最后被修改的时间。

当客户端第二次请求此URL时,根据 HTTP 协议的规定,浏览器会向服务器传送 If-Modified-Since 报头,询问该时间之后文件是否有被修改过,如果服务器端的资源没有变化,则自动返回 HTTP 304 (Not Changed.)状态码,浏览器可以直接从浏览器缓存取数据,这样就节省了传输数据量。

HTTP 协议规格说明定义ETag为“被请求变量的实体值”。如果ETag没改变,则返回状态304然后不返回,这也和Last-Modified一样。

下面两张图能让你更能理解这一过程:http请求过程http请求过程

2.浏览器询问操作系统服务器的IP地址。

当我们输入一个请求如www.baidu.com时,首先要建立一个socket连接,因为socket是通过ip和端口建立的,输入的URL是一个域名,还需要有一个DNS解析过程将域名解释为IP。

3.操作系统做DNS查询,返回IP地址给浏览器。

DNS( Domain Name System)是“域名系统”的英文缩写,是一种组织成域层次结构的计算机和网络服务命名系统,它用于TCP/IP网络,它所提供的服务是用来将主机名和域名转换为IP地址的工作。把www.baidu.com变成ip。

DNS的过程是这样的:本地的机器在配置网络时都会填写DNS,这样本机就会把这个url发给这个配置的DNS服务器,如果能够找到相应的url则返回其ip,否则该DNS将继续将该解析请求发送给上级DNS,整个DNS可以看做是一个树状结构,该请求将一直发送到根直到得到结果,如果url里不包含端口号,则会使用该协议的默认端口号。现在已经拥有了目标ip和端口号,这样我们就可以打开socket连接了。

4.浏览器打开对服务器的TCP连接。

获得ip和端口号以后,Web浏览器首先要通过网络与Web服务器建立连接,该连接是通过TCP来完成的,该协议与IP协议共同构建Internet,即著名的TCP/IP协议族,因此Internet又被称作是TCP/IP网络。HTTP是比TCP更高层次的应用层协议,根据规则,只有低层协议建立之后才能,才能进行更层协议的连接,因此,首先要建立TCP连接,一般TCP连接的端口号是80。

5.浏览器通过TCP连接向服务器发送HTTP请求。

连接成功建立后,开始向web服务器发送请求,这个请求一般是GET或POST请求。

举个例子,GET命令的格式为:  

	GET 路径/文件名 HTTP/1.0

文件名指出所访问的文件,HTTP/1.0指出Web浏览器使用的HTTP版本。现在可以发送GET命令:

	GET /mydir/index.html HTTP/1.0,

6.服务器做出响应并向浏览器发送数据

web服务器收到这个请求,进行处理。从它的文档空间中搜索子目录mydir的文件index.html。如果找到该文件,Web服务器把该文件内容传送给相应的Web浏览器。

为了告知浏览器,Web服务器首先传送一些HTTP头信息,然后传送具体内容(即HTTP体信息),HTTP头信息和HTTP体信息之间用一个空行分开。这里只讲流程不做赘述。

7.浏览器接收响应数据,TCP连接或被关闭。

一般情况下,一旦Web服务器向浏览器发送了请求数据,它就要关闭TCP连接,但如果浏览器或者服务器在其头信息加入了这行代码:

	Connection:keep-alive

TCP连接在发送后将仍然保持打开状态,于是,浏览器可以继续通过相同的连接发送请求。保持连接节省了为每个请求建立新连接所需的时间,还节约了网络带宽。

8.如果响应可缓存,将存入缓存。

在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存取数据,而无需再次请求,与第一步缓存对应。这里借鉴浏览器缓存机制。这篇文章详细介绍了有关Cache-control策略,Last-Modified,Etag的有关知识。

9. 浏览器解析html代码,并请求html代码中的资源(如js、css、图片等)

浏览器拿到index.html文件后,就开始解析其中的html代码,遇到js/css/image等静态资源时,就向服务器端去请求下载(会使用多线程下载,每个浏览器的线程数不一样),这个时候就用上keep-alive特性了,建立一次HTTP连接,可以请求多个资源。

注:浏览器在请求静态资源时(在未过期的情况下),向服务器端发起一个http请求(询问自从上一次修改时间到现在有没有对资源进行修改),如果服务器端返回304状态码(告诉浏览器服务器端没有修改),那么浏览器会直接读取本地的该资源的缓存文件。

10.浏览器对页面进行渲染,呈现给用户

①浏览器解析html源码,然后创建DOM树。

在DOM树中,每一个HTML标签都有一个对应的节点,并且每一个文本也都会有一个对应的文本节点。

②浏览器解析CSS代码,计算出最终的样式数据。

③构建出DOM树,并且计算出样式数据后,进一步构建渲染树(rendering tree)。

渲染树和DOM树有点像,但是是有区别的。DOM树完全和html标签一一对应,但是渲染树会忽略掉不需要渲染的元素,比如head、display:none的元素等。渲染树中的每一个节点都存储有对应的css属性。而且一大段文本中的每一个行在渲染树中都是独立的一个节点。

④一旦渲染树创建好了,浏览器就可以根据渲染树直接把页面绘制到屏幕上。

至此,从输入地址到页面最终显示结束。

ps:最后附复杂点的图,可以从更多方面理解这一过程。


http请求过程

发表评论

电子邮件地址不会被公开。 必填项已用*标注