在浏览器从输入URL到页面加载完成都经历了什么/一个完整的URL解析过程详细介绍

本文涉及的产品
云解析DNS,个人版 1个月
.cn 域名,1个 12个月
全局流量管理 GTM,标准版 1个月
简介: 在浏览器从输入URL到页面加载完成都经历了什么/一个完整的URL解析过程详细介绍

一、简述在浏览器从输入URL到页面加载完成都经历了什么

浏览器地址栏输入url地址,首先要在客户端上进行url解析

浏览器会首先查看自身的缓存,如果浏览器缓存中有对应的解析记录,直接返回结果

如果浏览器没有缓存,电脑会查看本地操作系统的缓存,如果有记录,直接返回结果(host文件

如果本地没有缓存该域名的IP地址,就需要通过递归或迭代的方式向根域名服务器、顶级域名服务器、权威域名服务器发起查询请求,直至返回一个IP地址给浏览器。

然后根据该IP地址建立TCP连接

客户端发送HTTP请求,服务器返回报文,关闭TCP连接。

浏览器内核拿到相应内容后,

解析html,css分别建立DOM Tree和CSSOM Tree

随后这两个合并成Render Tree。

然后布局Render Tree,绘制Render Tree,绘制页面像素信息。

浏览器会将各层的信息发送给GPU,GPU会将各层合成,显示在屏幕上。

渲染完成。

二、过程分析

2.1、域名解析

浏览器会对我们输入的url进行解析

主要将其分为下部分:协议、网络地址、资源路径

其中网络地址指示该连接网络上哪一台计算机,可以是域名或者IP地址,可以包括端口号

协议是从该计算机获取资源的方式,常见的是HTTP,HTTPS,FTP等

不同协议有不同的通讯内容格式;资源路径指示从服务器上需要获取资源的具体路径

2.2、DNS解析

DNS:DNS域名解析过程及原理_snow@li的博客-CSDN博客

2.3、获取端口号

http协议默认端口号是80。

IP地址就像是一个街道,让你直到具体在哪个街道(哪个主机),端口号就像是门牌号,告诉你是哪家(哪个进程)

2.4、建立TCP连接

网络:TCP协议三次握手与四次挥手_snow@li的博客-CSDN博客

2.5、发起HTTP请求

协议:HTTP基础内容掌握_snow@li的博客-CSDN博客

2.6、响应HTTP请求

协议:HTTP基础内容掌握_snow@li的博客-CSDN博客

2.7、关闭TCP连接

网络:TCP协议三次握手与四次挥手_snow@li的博客-CSDN博客

2.8、浏览器加载解析渲染

浏览器加载:指浏览器通过网络请求获取网页文件及其相关资源,并把它们存储在缓存中或者按需加载,以便让用户访问网页时快速加载数据。

解析:指浏览器把HTML、CSS和JavaScript解析成浏览器能够理解的结构,并构建出文档对象模型(DOM)和样式对象模型(CSSOM)。

渲染:指浏览器根据DOM和CSSOM,计算出网页元素的布局和样式,把它们绘制在屏幕上。

浏览器解析渲染过程 - 知乎

浏览器加载解析渲染_wk199351的博客-CSDN博客

浏览器加载解析渲染机制的全面解析 - 简书

浏览器的渲染:过程与原理 - 知乎

浏览器渲染原理流程 - 哔哩哔哩

三、欢迎交流指正,关注我,一起学习

相关文章
|
2月前
|
安全 搜索推荐 Java
Java的URL与URLConnection技术深度解析
Java的URL与URLConnection技术深度解析
394 0
|
14天前
|
域名解析 存储 缓存
HTTP请求流程概览:浏览器构建请求行含方法、URL和版本;检查缓存;解析IP与端口
【6月更文挑战第23天】 HTTP请求流程概览:浏览器构建请求行含方法、URL和版本;检查缓存;解析IP与端口;TCP连接(HTTP/1.1可能需排队);三次握手;发送请求头与体;服务器处理并返回响应;TCP连接可能关闭或保持;浏览器接收并显示响应,更新缓存。HTTP版本间有差异。
28 5
|
3天前
|
Web App开发 前端开发
canvas保存图片时,谷歌浏览器Chrome报错【解决方案】Not allowed to navigate top frame to data URL
canvas保存图片时,谷歌浏览器Chrome报错【解决方案】Not allowed to navigate top frame to data URL
5 0
|
4天前
|
域名解析 Web App开发 缓存
在浏览器上输入一个网址后,发生了什么?/HTTP的工作流程/DNS域名解析过程
在浏览器上输入一个网址后,发生了什么?/HTTP的工作流程/DNS域名解析过程
|
5天前
|
JavaScript
js 获取并解析 url 中参数的三种方法
js 获取并解析 url 中参数的三种方法
6 0
|
2月前
|
安全 网络安全 数据安全/隐私保护
Pikachu URL 重定向通关解析
Pikachu URL 重定向通关解析
|
2月前
uView queryParams 对象转URL参数
uView queryParams 对象转URL参数
29 0
|
2月前
|
JavaScript
vue截取URL中的参数
vue截取URL中的参数
33 0
|
5天前
|
JavaScript 前端开发 数据格式
URL编码【详解】——Javascript对URL进行编码解码的三种方式的区别和使用场景,axios请求拦截器中对get请求的参数全部进行URL编码
URL编码【详解】——Javascript对URL进行编码解码的三种方式的区别和使用场景,axios请求拦截器中对get请求的参数全部进行URL编码
7 0
|
10天前
|
文字识别 算法 API
视觉智能开放平台产品使用合集之在调用接口传入的图片URL参数,文件在本地或者非上海地域OSS链接,该怎么办
视觉智能开放平台是指提供一系列基于视觉识别技术的API和服务的平台,这些服务通常包括图像识别、人脸识别、物体检测、文字识别、场景理解等。企业或开发者可以通过调用这些API,快速将视觉智能功能集成到自己的应用或服务中,而无需从零开始研发相关算法和技术。以下是一些常见的视觉智能开放平台产品及其应用场景的概览。

推荐镜像

更多