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

huangfuyuan huangfuyuan     2022-12-26     697

关键词:

    【前言】从全局来讲,当键入一个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)目的主机收到来自源主机的字节流。

从输入网址到显示网页的全过程分析

...次化的认知,同样这里也包括这些应用所用到的技术:像浏览器,HTTP,HTML,网络服务器,需求处理等等。本文将更深入的研究当你输入一个网址的时候,后台到底发生了一件件什么样的事~1.首先嘛,你得在浏览器里输入要网... 查看详情

从浏览器输入网址回车到看到页面过程到底经历了什么?(代码片段)

作者:老油条IT记公众号:老油条IT记#前言:从浏览器输入网址到回车看到页面的过程,面试逃不掉的一个问题,我们知道从浏览器输入网址到看到页面主要是涉及DNS解析,TCP三次握手,请求报文,响应报文,TCP4次挥手。#首先我... 查看详情

从输入网址到显示网页的过程中发生了什么?

...个简单而复杂的问题。大致流程总结如下:1.输入地址2.浏览器查找域名的IP地址(这一步包括DNS具体的查找过程,包括:浏览器缓存->系统缓存->路由器缓存...)3.浏览器向web服务器发送一个HTTP请求4.服务器的永久重定向响应... 查看详情

浏览器输入网址到浏览器渲染页面的过程

1) 在客户端浏览器中输入网址URL。2) 发送到DNS(域名服务器)获得域名对应的WEB服务器的IP地址。3) 客户端浏览器与WEB服务器建立TCP(传输控制协议)连接。4) 客户端浏览器向对应IP地址的WEB服务器发送相应的HTTP或HTTPS... 查看详情

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

...iew完整高频题库阅读地址:https://febook.hzfe.org/URLDNSTCP渲染浏览器从输入网址到渲染页面主要分为以下几个过程URL(统一资源定位符,UniformResourceLocator)用于定位互联网上资源,俗称网址。我们在地址栏输入HZFE官方网址hzfe.org后... 查看详情

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

参考技术A浏览器会在用户输入url时查找历史信息对其补全或直接显示缓存在本地的网页。用户发起请求后,浏览器会解析这个url,将其转换为ip地址。第一步:查看hosts文件,如果hosts文件里面配置了url和ip的关系,则直接使用里... 查看详情

网页从输入网址到渲染完成经历了哪些过程?

...对应的web服务器对应的ip地址;与web服务器建立TCP连接;浏览器向web服务器发送http请求;web服务器响应请求,并返回指定url的数据(或错误信息,或重定向的新的url地址);浏览器下载web服务器返回的数据及解析html源文件;生... 查看详情

一个页面从输入url到页面加载显示完成,这个过程中发生了什么?

1.浏览器通过DNS查找域名对应的IP地址(DNS查询:浏览器缓存-->系统缓存-->路由器缓存-->ISPDNS缓存-->根域名服务器)2.浏览器向Web服务器发送一个HTTP请求(TCP三次握手)3.服务器301重定向(从http://example.com重定向到http://ww... 查看详情

从输入url到页面加载显示完成的过程

...把这个问题拆解成两个过程:1.用户输入url--->客户端(浏览器)拿到服务端的数据2.浏览器拿到数据--->呈现页面(也就是浏览器工作过程 查看详情

输入一个url到浏览器页面展示都经历了哪些过程(代码片段)

...定是输入你要访问的网站网址了,俗称url;二:缓存解析浏览器获取了这个url,当然就去解析了,它先去缓存当中看看有没有,从浏览器缓存-系统缓存-路由器缓存当中查看,如果有从缓存当中显示页面,然后没有那就进行步骤... 查看详情

从输入网址到显示网页的全过程分析

从输入网址到显示网页的全过程分析HTTP请求报文和HTTP响应报文HTTP请求和响应过程http请求和http响应详细解析 查看详情

网页请求到页面显示的过程描述

1.在浏览器中输入网址2.发送至DNS服务器获得web服务器的ip地址3.建立TCP连接4.浏览器向web服务器发送http请求5.web服务器响应请求并返回url数据,或者错误信息,如果设置从定向,则返回新的url地址6.浏览器下载数据并解析html源文... 查看详情

从输入url到浏览器显示页面发生了什么

...。②如果在本地的hosts文件没有能够找到对应的ip地址,浏览器会发出一个DNS请求到本地DNS(域名分布系统)服务器。本地DNS服务器一般都是你的网络接入服务器商提供,比如中国电信,中国移动。③查询你输入的网址的DNS请求到达... 查看详情

从输入url到页面展示的详细过程

...发送HTPP请求5、服务器处理请求 6、服务器响应请求7、浏览器展示HTML8、浏览器发送请求获取其他在HTML中的资源。 查看详情

从浏览器输入url到显示页面的过程(前端面试题)

域名DNS解析,解析到真正的IP地址         |客户端与服务端建立TCP连接,3次握手           |客户端发送Http请求      &nbs 查看详情

面试题系列---一个页面从输入url到页面加载显示完成,这个过程都发生什么?

...输入URL到页面加载显示完成,这个过程都发生什么?1.在浏览器中输入url2.浏览器访问dns服务器,根据域名查找对应的ip3.通过ip找到服务器,建立tcp连接4.发送http请求5.后端服务器接收请求,处理后响应给浏览器6.浏览器接收后端... 查看详情

一个网页从开始到最终显示的完整过程

...请求到最终显示的完整过程一般可分为如下7个步骤:1.在浏览器中输入网址;2.发送到DNS服务器并获得域名对应的web服务器的IP地址3.与web服务器建立TCP连接;4.浏览器向web服务器的IP地址发送相应的http请求;5.web服务器相应请求... 查看详情

从输入网址(url)到页面展示的过程

...语义化的好记忆,而IP是类似:192.168.1.0,不易人记忆.IP寻址:浏览器根据输入的网址去寻找它对应的IP地址首先需了解DNS(网域名称系统):是互联网的一项服务,它作为将域名和IP地址相互映射的一个分布式数据库,能够使人更方便地访... 查看详情