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

简介: 在浏览器从输入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博客

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

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

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

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

相关文章
|
5月前
|
Web App开发 缓存 前端开发
浏览器常见面试题目及详细答案解析
本文围绕浏览器常见面试题及答案展开,深入解析浏览器组成、内核、渲染机制与缓存等核心知识点。内容涵盖浏览器的主要组成部分(如用户界面、呈现引擎、JavaScript解释器等)、主流浏览器内核及其特点、从输入URL到页面呈现的全过程,以及CSS加载对渲染的影响等。结合实际应用场景,帮助读者全面掌握浏览器工作原理,为前端开发和面试提供扎实的知识储备。
247 4
|
1月前
|
数据采集 人工智能 自然语言处理
Playwright MCP 浏览器自动化框架全面解析
Playwright MCP是微软推出的开源项目,结合Playwright与MCP协议,让AI通过结构化数据直接操作浏览器。告别传统视觉识别,实现高效、精准的网页自动化,广泛应用于测试、爬虫、办公自动化等场景,大幅提升效率与可靠性。
|
1月前
|
JSON Java Go
【GoGin】(2)数据解析和绑定:结构体分析,包括JSON解析、form解析、URL解析,区分绑定的Bind方法
bind或bindXXX函数(后文中我们统一都叫bind函数)的作用就是将,以方便后续业务逻辑的处理。
262 3
|
7月前
|
数据采集 人工智能 Java
1天消化完Spring全家桶文档!DevDocs:一键深度解析开发文档,自动发现子URL并建立图谱
DevDocs是一款基于智能爬虫技术的开源工具,支持1-5层深度网站结构解析,能将技术文档处理时间从数周缩短至几小时,并提供Markdown/JSON格式输出与AI工具无缝集成。
319 1
1天消化完Spring全家桶文档!DevDocs:一键深度解析开发文档,自动发现子URL并建立图谱
|
4月前
|
Web App开发 安全 测试技术
Playwright-MCP浏览器会话复用全解析
本文深入解析Playwright-MCP实现浏览器会话复用的核心技术,包括状态持久化(cookies/localStorage存储)和直接连接已打开浏览器实例(通过CDP协议)。通过多上下文隔离与安全机制设计,提供企业级应用场景的优化方案,帮助开发者提升测试效率并降低资源消耗。
|
9月前
|
数据采集 Web App开发 监控
深度解析:使用ChromeDriver和webdriver_manager实现无头浏览器爬虫
在现代网络爬虫实践中,动态网页加载和反爬虫机制增加了数据采集的难度。采用无头浏览器技术(如Selenium与ChromeDriver)可有效模拟用户行为、执行JavaScript,获取动态内容。通过设置代理IP、伪装User-Agent和处理Cookies,提升爬虫隐蔽性和稳定性。该方案适用于电商价格监控、社交媒体数据采集和招聘信息抓取等场景,实现更高效的数据获取。
771 2
深度解析:使用ChromeDriver和webdriver_manager实现无头浏览器爬虫
|
9月前
|
数据采集 Web App开发 存储
深度解析:使用 Headless 模式 ChromeDriver 进行无界面浏览器操作
本文介绍了基于无界面浏览器(如ChromeDriver)和代理IP技术的现代爬虫解决方案,以应对传统爬虫面临的反爬机制和动态加载内容等问题。通过Selenium驱动ChromeDriver,并结合亿牛云爬虫代理、自定义Cookie和User-Agent设置,实现高效的数据采集。代码示例展示了如何配置ChromeDriver、处理代理认证、添加Cookie及捕获异常,确保爬虫稳定运行。性能对比显示,Headless模式下的ChromeDriver在数据采集成功率、响应时间和反爬规避能力上显著优于传统爬虫。该方案广泛应用于电商、金融和新闻媒体等行业。
508 0
深度解析:使用 Headless 模式 ChromeDriver 进行无界面浏览器操作
|
10月前
|
缓存 网络协议 JavaScript
浏览器输入 URL 后的那些事儿
本文介绍了浏览器输入URL后到页面展示的完整过程,涵盖DNS解析、TCP三次握手、HTTP请求与响应、以及浏览器渲染等关键步骤。首先,浏览器通过DNS解析将域名转换为IP地址;接着,通过TCP三次握手建立连接;随后发送HTTP请求获取网页内容;最后,浏览器解析HTML、CSS并构建渲染树,完成页面渲染。整个过程涉及网络协议和浏览器内部机制的协同工作。
298 13
|
缓存 网络协议 JavaScript
浏览器输入url之后最后网页渲染出来经过了什么
【10月更文挑战第31天】从浏览器输入 URL 到网页渲染出来是一个涉及多个环节和技术的复杂过程,每个环节都对最终的网页显示效果和用户体验有着重要的影响。
142 3
|
存储 缓存 网络协议
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点,GET、POST的区别,Cookie与Session
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点、状态码、报文格式,GET、POST的区别,DNS的解析过程、数字证书、Cookie与Session,对称加密和非对称加密

推荐镜像

更多
  • DNS