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

本文涉及的产品
.cn 域名,1个 12个月
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 在浏览器从输入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博客

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

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

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

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

相关文章
|
3天前
|
缓存 网络协议 JavaScript
第八问:在浏览器中输入URL后发生了什么?
当在浏览器中输入URL并按下回车键时,会经历一系列复杂的过程:1. 用户输入URL;2. DNS解析域名;3. 建立TCP连接;4. 发送HTTP/HTTPS请求;5. 服务器处理请求;6. 浏览器渲染页面;7. 页面展示。每个步骤涉及不同的技术和协议,确保数据的准确传输和页面的正确显示。
12 0
|
1月前
|
缓存 网络协议 JavaScript
浏览器输入url之后最后网页渲染出来经过了什么
【10月更文挑战第31天】从浏览器输入 URL 到网页渲染出来是一个涉及多个环节和技术的复杂过程,每个环节都对最终的网页显示效果和用户体验有着重要的影响。
29 3
|
1月前
|
存储 缓存 网络协议
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点,GET、POST的区别,Cookie与Session
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点、状态码、报文格式,GET、POST的区别,DNS的解析过程、数字证书、Cookie与Session,对称加密和非对称加密
|
1月前
|
域名解析 缓存 网络协议
浏览器中输入URL返回页面过程(超级详细)、DNS域名解析服务,TCP三次握手、四次挥手
浏览器中输入URL返回页面过程(超级详细)、DNS域名解析服务,TCP三次握手、四次挥手
|
1月前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
66 1
|
2月前
|
Web App开发 SQL 数据库
使用 Python 解析火狐浏览器的 SQLite3 数据库
本文介绍如何使用 Python 解析火狐浏览器的 SQLite3 数据库,包括书签、历史记录和下载记录等。通过安装 Python 和 SQLite3,定位火狐数据库文件路径,编写 Python 脚本连接数据库并执行 SQL 查询,最终输出最近访问的网站历史记录。
42 4
|
2月前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
146 0
|
2月前
|
域名解析 缓存 网络协议
浏览器输入 URL 回车后会经历哪些步骤?
本文首发于微信公众号“前端徐徐”,详细解析了从在浏览器中输入URL到页面完全呈现的全过程,涵盖检查缓存、URL解析、DNS解析、TCP连接、HTTP请求、服务器响应、浏览器处理响应、页面解析与渲染、关闭TCP连接等关键步骤。通过这些步骤,帮助读者深入了解互联网的工作原理,提升网站性能和用户体验。
35 0
|
3月前
|
前端开发 JavaScript
前端JS截取url上的参数
文章介绍了两种前端JS获取URL参数的方法:手动截取封装和使用URLSearchParams。
60 0
|
4月前
|
开发框架 前端开发 .NET
Asp.net Webapi 的 Post 方法不能把参数加到 URL 中?试试这样写
Asp.net Webapi 的 Post 方法不能把参数加到 URL 中?试试这样写

推荐镜像

更多