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)

相关推荐
无双_Joney16 分钟前
[更新迭代 - 1] Nestjs 在24年底更新了啥?(功能篇)
前端·后端·nestjs
在云端易逍遥18 分钟前
前端必学的 CSS Grid 布局体系
前端·css
ccnocare20 分钟前
选择文件夹路径
前端
艾小码20 分钟前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
闰五月21 分钟前
JavaScript作用域与作用域链详解
前端·面试
泉城老铁24 分钟前
idea 优化卡顿
前端·后端·敏捷开发
前端康师傅24 分钟前
JavaScript 作用域常见问题及解决方案
前端·javascript
司宸26 分钟前
Prompt结构化输出:从入门到精通的系统指南
前端
我是日安26 分钟前
从零到一打造 Vue3 响应式系统 Day 9 - Effect:调度器实现与应用
前端·vue.js