从输入一个网址到浏览器显示页面经历的全过程笔记

Posted 2023-05-05

参考技术A

浏览器会在用户输入url时查找历史信息对其补全或直接显示缓存在本地的网页。

用户发起请求后，浏览器会解析这个url，将其转换为ip地址。

第一步： 查看hosts文件，如果hosts文件里面配置了url和ip的关系，则直接使用里面的ip地址。hosts文件存储在操作系统的如下目录中，打开后可手动配置。下图的示例中，左边是ip地址，右边是url。

第二步： 浏览器向本地DNS服务器（用网络运营商提供，如中国移动等）发送一个DNS请求。DNS (Domain Name System)是域名系统，用来将域名解析成ip地址。

第三步： 本地DNS在收到请求后查询缓存，如果没有命中，还会向根DNS服务器发送请求。

第四步： 根DNS服务器不直接存储解析数据，而是返回一个域服务器地址，本地DNS服务器转而向域服务器发送查询请求。

第五步： 本地DNS服务器继续向域服务器（例如.com域服务器）发出请求，返回的是一个解析服务器的地址。

第六步： 本地DNS服务器向域名的解析服务器发出请求，获得域名与ip的映射关系。在返回数据时，本地DNS会进行缓存。

浏览器会首先与服务器依照三次握手和四次挥手建立TCP连接（根据OSI七层协议，低层次的协议需要率先建立连接，只有建立了TCP连接才能使用HTTP协议）。

一个典型的http request header一般需要包括请求的方法，例如GET或者POST等，不常用的还有PUT和DELETE、HEAD、OPTION以及TRACE方法，一般的浏览器只能发起GET或者POST请求。

HTTP的请求信息主要包含三部分内容：

一个完整的HTTP请求如下所示：

以Chrome浏览器为例，按F12打开控制台，选择标签页中的Network，然后选择一个请求。下图展示的就是一个Http Request Header和他发送给服务器的参数。

服务器给浏览器响应一个301永久重定向响应，这样浏览器就会访问“ http://www.google.com/ ” 而非“ http://google.com/ ”。

重定向原因：

此时如果不进行重定向的话，用户会得到一个404报错信息。之后，浏览器根据服务器返回的重定向地址继续请求网站信息。

和HTTP请求一样，HTTP响应信息也主要包含三个部分：

网页是根据服务器返回的html文件显示的，显示过程中需要进行渲染。以webkit为例，渲染的过程包括：解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树。

渲染完成后，浏览器会发送请求获取嵌入在HTML中的资源（如图片、音频、视频、CSS、JS等），这个过程和上面发送请求的过程是一样的。

是否关闭TCP连接可以通过参数配置（connection:keep-alive）。新版本的协议也会通过默认持久连接来节省带宽。TCP连接关闭后，一次浏览器显示页面的交互就结束了。

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

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

　　持续更新，逐步完善。主要从TCP协议族、DNS、三次握手、服务器缓存和代理、负载均衡、四次挥手、html显示和渲染、流行的服务器类型和前端类型...争取精要简明。

一、客户端请求

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

　　（1）浏览器将url中抽取出主机名（域名），并将主机名传送给DNS应用的客户端；

　　（2）DNS客户端向最近的DNS服务器发送一个包含主机名的请求，有可能逐级向上请求；

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

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

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

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

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

注意：每一次进行客户端到服务器端或服务器端到客户端的通讯都要经历这么几个步骤：从源的应用层-》传输层-》网络层-》链路层-》物理层—…………—到目的端的物理层-》链路层-》网络层-》传输层-》应用层，这也是前端中常说的为什么要减少客户端向服务端HTTP请求的原因，因为太耗时了！这个过程在最后讲解【注释1】。

 

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连接的详细过程），如下：

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

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

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

        ④web缓存器收到响应后，在本地存储一份副本，并向客户端的浏览器用HTTP响应报文发送该副本。

 

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

        ①解析html构建DOM树

        ②构建render树

        ③布局render树

        ④绘制render树

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

 

 

【注释1】过程：

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

（1）在源主机上，应用层将一串应用数据流传送给传输层。

（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）目的主机收到来自源主机的字节流。