浏览器从输入 Url 到展示出页面都经历了哪些过程

简介: 在浏览器输入网址时,浏览器会根据历史记录、书签智能匹配补全域名或者 url 。

作者:字节流动

来源:https://blog.csdn.net/Kennethdroid/article/details/102082964


输入域名

在浏览器输入网址时,浏览器会根据历史记录、书签智能匹配补全域名或者 url 。

例如 chrome 浏览器,甚至会根据匹配结果直接把网页加载出来。

解析域名

请求发起时,浏览器首先解析域名,一般会首先查看本地的 hosts 文件,查找相关域名与 ip 地址的对应规则,若查找到的话,就直接使用 hosts 文件里面的 ip 地址。

若在本地 hosts 文件中,未找到目标域名与 ip 地址的对应关系,浏览器便会向本地 DNS 服务器发起一个 DNS 请求,本地 DNS 服务器收到请求之后,便会查询其缓存记录,若查询到此记录便直接返回结果。


若本地 DNS 服务器缓存中未查询到相关记录,便向 DNS 根服务器进行查询,根 DNS 服务器没有记录具体的域名与 ip 地址的映射关系,而是返回域服务器的地址。

本地 DNS 继续向域服务器发起请求,域服务器收到请求之后,返回域名解析服务器的地址。最后本地 DNS 服务器向域名解析服务器发送请求,域名解析服务器收到请求之后,返回域名与 ip 映射关系信息,然后本地 DNS 服务器将映射信息保存到其缓存中,同时也将 ip 地址返回给用户电脑。

image.png

浏览器发起 http 请求

浏览器获取到域名对应的 ip 地址之后,便会以一个随机端口(1024< port < 65535)向服务端 web 程序 80 端口发起 TCP 连接请求。


浏览器与服务端经过 3 次 TCP 握手之后,建立 TCP 连接,然后浏览器发起一个 http 请求。一般的浏览器只能发起 GET 或者 POST 请求。

请求信格式包含四个部分:

  1. 请求行(请求方法 URI 协议/版本)
  2. 请求头(缓存、客户端身份信息等)
  3. 空行
  4. 消息体

http 请求格式示例:

GET /index.html HTTP/1.1
Cache-Control:max-age=0
Cookie:gsScrollPos=; _ga=GA1.2.329038035.1465891024; _gat=1
If-Modified-Since:Sun, 01 May 2016 23:59:59 GMT
User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.84 Safari/537.36
//消息体

PS:

常用的请求方法有 GET/POST/DELETE/PUT/HEAD 。

image.png

TCP 三次握手的目的是:为了防止已经失效的连接请求报文发送到服务端,服务端因而产生不必要的响应开销

在谢希仁著《计算机网络》第四版中讲“三次握手”的目的是“为了防止已失效的连接请求报文段突然又传送到了服务端,因而产生错误”。在另一部经典的《计算机网络》一书中讲“三次握手”的目的是为了解决“网络中存在延迟的重复分组”的问题。

TCP 四次挥手的目的是:为确保收发双方数据传输的完整性。

那四次分手又是为何呢?TCP协议是一种面向连接的、可靠的、基于字节流的运输层通信协议。TCP是全双工模式,这就意味着,当主机1发出FIN报文段时,只是表示主机1已经没有数据要发送了,主机1告诉主机2,它的数据已经全部发送完毕了;但是,这个时候主机1还是可以接受来自主机2的数据;当主机2返回ACK报文段时,表示它已经知道主机1没有数据发送了,但是主机2还是可以发送数据到主机1的;当主机2也发送了FIN报文段时,这个时候就表示主机2也没有数据要发送了,就会告诉主机1,我也没有数据要发送了,之后彼此就会愉快的中断这次TCP连接。如果要正确的理解四次分手的原理,就需要了解四次分手过程中的状态变化。

服务器返回 http 响应

服务端返回 http 响应的格式包含四个部分:

  1. 响应行(状态行)(协议/版本号 状态码 状态说明)
  2. 响应头(响应头是服务器传递给客户端用于说明服务器的一些信息,以及将来继续访问该资源时的策略。)
  3. 空行
  4. 消息体(响应体是服务端返回给客户端的 HTML 文本内容,或者其他格式的数据,比如:视频流、图片或者音频数据。)

http 响应格式示例:

HTTP/1.1 200 OK
Date: Sat, 31 Dec 2016 23:59:59 GMT
Content-Type: text/html;charset=ISO-8859-1
Content-Length: 113
<html>
<head>
<title>Haohao</title>
</head>
<body>
Hello World!
</body>
</html>

PS:

服务器在返回响应之前可能会经过重定向、反向代理服务器请求等过程。

浏览器处理响应

以服务端响应消息体为 HTML 文本为例,浏览器解析 HTML 文本时,会”自上而下“加载,并在加载过程中进行解析渲染展现给用户。在解析过程中,如果遇到请求外部资源时,如图片、外链的 CSS 、 js 等,请求过程是异步的,并不会影响整个 HTML 文档的加载。


「视频云技术」你最值得关注的音视频技术公众号,每周推送来自阿里云一线的实践技术文章,在这里与音视频领域一流工程师交流切磋。

阿里云社区.png

相关文章
|
11月前
|
缓存 网络协议 JavaScript
浏览器输入 URL 后的那些事儿
本文介绍了浏览器输入URL后到页面展示的完整过程,涵盖DNS解析、TCP三次握手、HTTP请求与响应、以及浏览器渲染等关键步骤。首先,浏览器通过DNS解析将域名转换为IP地址;接着,通过TCP三次握手建立连接;随后发送HTTP请求获取网页内容;最后,浏览器解析HTML、CSS并构建渲染树,完成页面渲染。整个过程涉及网络协议和浏览器内部机制的协同工作。
330 13
|
缓存 网络协议 JavaScript
浏览器输入url之后最后网页渲染出来经过了什么
【10月更文挑战第31天】从浏览器输入 URL 到网页渲染出来是一个涉及多个环节和技术的复杂过程,每个环节都对最终的网页显示效果和用户体验有着重要的影响。
158 3
|
存储 缓存 网络协议
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点,GET、POST的区别,Cookie与Session
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点、状态码、报文格式,GET、POST的区别,DNS的解析过程、数字证书、Cookie与Session,对称加密和非对称加密
|
域名解析 缓存 网络协议
浏览器中输入URL返回页面过程(超级详细)、DNS域名解析服务,TCP三次握手、四次挥手
浏览器中输入URL返回页面过程(超级详细)、DNS域名解析服务,TCP三次握手、四次挥手
|
12月前
|
缓存 网络协议 JavaScript
第八问:在浏览器中输入URL后发生了什么?
当在浏览器中输入URL并按下回车键时,会经历一系列复杂的过程:1. 用户输入URL;2. DNS解析域名;3. 建立TCP连接;4. 发送HTTP/HTTPS请求;5. 服务器处理请求;6. 浏览器渲染页面;7. 页面展示。每个步骤涉及不同的技术和协议,确保数据的准确传输和页面的正确显示。
|
缓存 网络协议 前端开发
浏览器输入一个URL后,发生了什么?
浏览器输入一个URL后,发生了什么?
316 1
|
域名解析 缓存 网络协议
浏览器输入 URL 回车后会经历哪些步骤?
本文首发于微信公众号“前端徐徐”,详细解析了从在浏览器中输入URL到页面完全呈现的全过程,涵盖检查缓存、URL解析、DNS解析、TCP连接、HTTP请求、服务器响应、浏览器处理响应、页面解析与渲染、关闭TCP连接等关键步骤。通过这些步骤,帮助读者深入了解互联网的工作原理,提升网站性能和用户体验。
316 0
|
前端开发 JavaScript
前端JS截取url上的参数
文章介绍了两种前端JS获取URL参数的方法:手动截取封装和使用URLSearchParams。
393 0
|
开发框架 前端开发 .NET
Asp.net Webapi 的 Post 方法不能把参数加到 URL 中?试试这样写
Asp.net Webapi 的 Post 方法不能把参数加到 URL 中?试试这样写
273 0
|
Java
JAVA 获取 URL 指定参数的值
JAVA 获取 URL 指定参数的值
205 0