URL历险记:从输入到渲染的网页大冒险

前言

我们知道当在浏览器上输入baidu.com并按下回车时,一下子我们就能看到百度的主页面,那这中间发生了一些什么事呢?对于用户在地址栏输入URL到页面的展示过程中其实包含了许多的前端知识点,比如说浏览器的架构,网络层以及操作系统,接下来我们就一起来看一下吧。

浏览器是一个多进程架构

主进程

浏览器内核的核心组成部分之一,它负责协调和管理整个浏览器的工作流程以及与操作系统的交互。主要的功能包括用户界面管理,进程管理,资源管理,安全性管理,用户输入管理等。

渲染进程

负责处理和渲染网页的内容,下载网页的HTMLCSSJavaScript等资源,然后解析和渲染这些资源,将网页呈现给用户。它将HTML文档转化为用户可以看到和与之交互的图形界面。

GPU进程

负责处理与图形和图形渲染相关的任务,以提高浏览器的性能和图形处理能力。

网络进程

负责处理与网络通信相关的任务,确保浏览器能够与远程服务器进行通信、下载网页内容和资源、管理连接等,主要功能和职责有网络的请求与响应,资源管理,安全性和隐私DNS解析等等。

从用户输入URL到页面渲染的整个过程需要浏览器的这些进程互相配合完成。

如下图所示:

详细过程

URL输入

  • URL全称叫做统一资源定位符,用于定位互联网上的资源,俗称网址。

  • 我们在地址栏输入网址后并按下回车键,浏览器会根据输入的地址做出以下判断:

    1.检查输入的URL是否是一个合法的连接。

    2.如果合法,则判断输入的URL是否完整,如果不完整,浏览器可能会对地址进行猜测, 补全自己的前缀或后缀。

    3.如果不合法,将输入的内容作为搜索条件,使用用户默认设置的搜索引擎进行搜索。

    4.现在大部分的浏览器都会从历史记录,书签等地方开始查找我们输入的地址,并给出智能 提示。

DNS解析

  • DNS翻译过来就是域名系统,是互联网上作为域名和IP地址相互映射的一个分布式数据库。
  • 因为浏览器不能直接通过域名找到对应服务器的IP地址,所以需要进行DNS的解析,查找到对应的IP地址进行访问。
  • 整个过程如图所示:
  • 详细描述一下:

    1.用户在浏览器中输入域名,操作系统会先检查浏览器的缓存和本地的host文件中,检查 是否有这个网址记录,有的话就从记录里面找到对应的IP地址,完成域名解析。

    2.没有的话再接着使用TCP/IP参数设置的DNS服务器进行查询,如果要查询的域名包含 在本地配置区域资源中,则返回解析结果,完成域名解析。

    3.没有的话再接着检查本地DNS服务器是否缓存有该网址的记录,有的话返回解析结果, 完成域名解析。

    4.如果还没有的话本地DNS服务器会发送查询报文到根DNS服务器,根DNS服务器收到 报文之后会返回顶级域DNS服务器地址,然后本地DNS服务器会发送查询报文到顶级域 名服务器,顶级域名服务器收到请求后会返回权威DNS服务器地址,然后本地DNS服务 器地址再发送查询报文到权威DNS服务器,权威DNS服务器接收到请求后,返回最终的 IP地址,完成域名解析。

建立TCP的连接

  • 当浏览器获取到服务器的IP地址后,浏览器会发起TCP连接请求,这个连接请求到达服务端之后会通过TCP的三次握手,建立TCP的连接,如下图所示:
  • 第一次握手:客户端发送'SYN'报文,并进入'SYN_SENT'状态,等待服务器的确认。
  • 第二次握手:服务器收到'SYN'报文,需要给客户端发送'ACK'确认报文,同时服务器也要向客户端发送一个'SYN'报文,所以也就是向客户端发送'SYN'+'ACK'报文,此时服务器进入'SYN_REVD'状态。
  • 第三次握手:客户端收到'SYN'+'ACK'报文,向服务器发送确认包,客户端进入'ESTABLISHED',待服务器收到客户端发来的'ACK'包也会进入'ESTABLISHED'状态,完成三次握手。

为什么要三次握手,两次握手,四次握手不行吗?

  • 如果是两次握手,当客户端发送一个连接请求A时,由于网络原因没有到达服务器,紧接着客户端又会发送一个连接请求B,服务器接收到了请求B,响应连接,建立连接,完成传输数据后断开连接。一段时间后请求A到达了服务器,服务器会以为客户端又想与它进行连接,它会返回响应报文并且一直处于待连接状态,造成资源的浪费。

  • 如果是四次握手,也就是将原本的第二次握手拆分成两次,一次发送确认报文,一次发送请求建立连接报文,但是这样同样会造成资源浪费,服务器可以将两次发送合并成一次。

发送HTTP/HTTPS请求

  • 建立连接后就可以通过HTTP进行数据传输了。
  • 如果使用了HTTPS,会在TCPHTTP之间多添加一层协议作为加密和认证的服务,HTTPS使用SSLTLS协议,保证了信息的安全。
  • SSL协议的作用是认证客户端和服务端,确保数据发送到正确的客户端和服务器,加密数据防止数据中途被窃取,维护数据的完整性,确保数据在传输过程中不被改变。
  • TLS协议的作用是在两个通信应用程序之间提供保密性和数据完整性,TLS协议由两层组成:TLS记录协议和TLS握手协议。

服务器响应请求

  • 当浏览器到web服务器的连接建立后,浏览器会发送一个初始的HTTP GET请求,请求目标通常是一个HTML文件,服务器收到请求后,将返回一个HTTP响应报文,内容包括响应头和HTML正文。

浏览器解析渲染页面

  • 浏览器收到服务端的响应之后,开始解析并渲染页面,不同的浏览器引擎渲染过程有点不太一样,以谷歌浏览器为例:

    1.浏览器会处理HTML标记并构建DOM树。

    2.处理CSS标记并构建CSSOM树。

    3.将DOM树和CSSDOM树合并成一个渲染树。

    4.根据渲染树来布局,以计算每个节点的集合信息。

    5.将各个节点渲染到屏幕上,这样就完成了页面渲染。

HTTP请求结束,断开TCP连接

  • 渲染完成之后就可以断开TCP的连接。
  • 现在的浏览器的页面为了优化请求的耗时,默认都会开启持久的连接,也就是说标签页关闭的时候TCP的连接才会关闭,这个关闭的过程就是四次挥手,具体过程看下图:
  • 详细描述一下:

    1.最开始的一次挥手,客户端发起'FIN'包,客户端进入'FIN_WAIT_1'状态,TCP规定,即使'FIN'包不携带数据,也要消耗一个序号。

    2.第二次挥手,服务器端接收到了'FIN'包,发出确认包'ACK',并带上自己的序号,服务端进入'CLOSE_WAIT'状态,这个时候客户端已经没有数据要发送了,不过服务器端有数据发送的话,客户端依然需要接收。客户端接收到服务端发送的'ACK'后,进入到'FIN_WAIT_2'状态。

    3.第三次挥手,服务器端数据发送完毕之后,向客户端发送'FIN'包,半连接状态下服务器可能又发送了一些数据。服务器此时进入了'LAST_ACK'状态。

    4.第四次挥手,客户端收到服务器的'FIN'包之后,发送确认包'ACK',此时客户端进入'TIME_WAIT'状态,此时TCP连接还没有释放,必须经过两个'MSL'后,才会进入'CLOSED'状态,可以看出服务端结束TCP连接的时间要比客户端要早一些。

为什么建立连接时需要握手三次,关闭连接时需要四次呢?

  • TCP握手的时候,接收端发送'SYN+ACK'的包是将一个'ACK'和一个'SYN'合并到一个包中,所以减少了一次包的发送,三次完成握手。
  • 对于四次挥手,TCP是全信工通信,在主动关闭方发送'FIN'包之后,接收端可能还要发送数据,不能立即关闭服务器端到客户端的数据通道,所以不能将服务器端的'FIN'包和对客户端的'ACK'包合并发送,只能先确定'ACK',然后服务器等到无需发送数据时再发送'FIN'包,所以四次挥手时必须是四次数据包的交互。

四次挥手结束后,为什么客户端没有立刻关闭呢?

  • 为了确保第四次挥手的确认消息到达服务端。
  • 如果服务端在规定时间内未收到最后的确认消息,会重新进行第三次挥手请求断开连接,客户端重新发送确认消息。
  • MSL是报文的最长生存时间,2个MSL是在网络中来回两个报文所需要的最长时间,如果超过这个时间,客户端没有重新收到断开连接的请求,说明四次挥手顺利完成,可以断开连接了。

结语

到这里就是输入URL到页面展示的全过程,本文如有纰漏请指出,有歧义欢迎大家评论区讨论,希望本文能帮到屏幕前的你。

参考资料

浏览器原理:从浏览器进程角度系统全面回答从输入URL到页面显示发生了什么_哔哩哔哩_bilibili

面试官问我,请说一下浏览器从输入URL 到页面展示这个过程中都经历了什么_哔哩哔哩_bilibili

三次握手,四次挥手,原来TCP这么有礼貌!-tcp三次握手四次挥手 (51cto.com)

相关推荐
雪碧聊技术3 分钟前
01-Ajax入门与axios使用、URL知识
前端·javascript·ajax·url·axios库
adminIvan8 分钟前
Element plus使用menu时候如何在折叠时候隐藏掉组件自带的小箭头
前端·javascript·vue.js
会发光的猪。27 分钟前
【 ElementUI 组件Steps 步骤条使用新手详细教程】
前端·javascript·vue.js·elementui·前端框架
我家媳妇儿萌哒哒28 分钟前
el-table合并单元格之后,再进行隔行换色的且覆盖表格行鼠标移入的背景色的实现
前端·javascript·elementui
baiduguoyun43 分钟前
react的import 导入语句中的特殊符号
前端·react.js
前端青山44 分钟前
webpack指南
开发语言·前端·javascript·webpack·前端框架
NiNg_1_2341 小时前
ECharts实现数据可视化入门详解
前端·信息可视化·echarts
励志前端小黑哥2 小时前
有了Miniconda,再也不用担心nodejs、python、go的版本问题了
前端·python
喵叔哟2 小时前
重构代码之取消临时字段
java·前端·重构
还是大剑师兰特2 小时前
D3的竞品有哪些,D3的优势,D3和echarts的对比
前端·javascript·echarts