面试题21解析-浏览器背后的秘密

简介: 题目:描述一下用户打开浏览器到看到网页整个过程发生了什么?

本文阅读大概需要15分钟。


由于上版本文章出现了知识点错误,为了不误解更多的小伙伴,在此,重新发一下,望大家谅解。


这个题目看似很简单,当你去深入分析的时候,就会发现内部其实很复杂。

简单主要体现在用户使用层面。HTTP的请求、响应和解析相对用户来说是透明的;比如,当我们在浏览器或者curl输入一个地址,直接敲回车,就能够返回给我们想要的结果。但是,背后计算机做了那些事情?对于用户来说没必要清楚,但对于做开发的我们来说,必需要搞清楚才行哦,便于我们分析bug。


一什么是HTTP协议?


如果读者对计算机网络的体系结构很了解应该清楚。IP协议位于网络层;TCP协议位于传输层;HTTP协议位于应用层;如图所示:


image.png


说明:

  1. TCP协议是传输层协议,主要解决数据如何在网络中传输;HTTP协议是应用层协议,是TCP协议的上层协议,主要用于浏览器与服务器之间的超文本数据传输。
  2. socket是对TCP协议的封装,是一个调用接口。


二怎么发起HTTP请求?


其实发起一个HTTP请求就是建立一个socket连接;只不过HTTP请求是无状态且短连接协议。

浏览器在建立socket连接之前,先根据DNS服务器去把域名解析成所对应的IP地址,将IP地址和默认的80端口(HTTPS请求跟HTTP类似,只不过它用的是443和证书)与服务器之间建立一个socket连接。

我们利用代码来模拟一下浏览器的请求过程,具体代码如下:


URLConnection urlConnection = new URL("http://www.baidu.com").openConnection();
urlConnection.connect();
Map<String, List<String>> map = urlConnection.getHeaderFields();
for (String key : map.keySet()) {
    System.out.println(key + ":" + map.get(key));
}

我们深入分析URLConnection的代码发现,其底层用到了socket接口,见sun.net.NetworkClient的内部实现,如图所示:


image.png


三浏览器怎么解析HTTP请求?


我们也可以通过curl/charles/wireshark来进行抓包分析HTTP数据包,下面咱们通过curl来查看http的请求头信息,命令如下:

curl -I http://www.baidu.com

执行结果如图所示:


image.png


HTTP header控制着用户浏览器的渲染和服务器的执行逻辑。我们一般需要掌握这些常见的HTTP header信息。


  • 常见的HTTP请求头,如图所示:

image.png


  • 常见的HTTP响应头,如图所示:

image.png


  • 常见的HTTP状态码,如图所示:

image.png


其实,我们要分析一个页面,只需要通过浏览器的开发者工具就足够了,作者以chrome为例来展示一个HTTP请求的详细过程,如图所示:


image.png


四浏览器缓存是什么?


浏览器缓存一般是前端工程师必须要掌握的,但是,我们作为后端开发也需要了解一下,毕竟技多不压身。


它就是我们在打开一个有缓存的网页时,浏览器会将其自动下载保存到本地(副本)。我们一般通过ctrl+f5来强制刷新本地缓存。


Cache-Control

缓存控制头信息,是关于浏览器缓存的最重要的设置,不仅可以控制浏览器,还可以覆盖其他设置(如Expires和Last-Modified)或代理服务器。另外,由于浏览器的行为基本相同,这个属性是处理跨浏览器缓存问题的最有效的方法。


Pragma

与Cache-Control功能类似。

Pragma属于通用首部字段,在客户端上使用时,常规要求我们往html上加上这段meta元标签,如:

<meta http-equiv="Pragma" content="no-cache">

用于告诉浏览器每次请求页面时都不要读缓存,都得往服务器发一次请求才行。

说明:仅有IE才能识别这段meta标签含义;它不一定会在请求字段加上Pragma,但的确会让当前页面每次都发新请求(仅限页面,页面上的资源则不受影响)。


Expires

过期头信息,通常后面跟一个时间,超过这个时间缓存内容将会失效。

在客户端上使用时,我照样可以加上meta元标签,如:

<meta http-equiv="expires" content="Sun, 04 Jun 2017 14:40:01 GMT">

说明:同样也只有IE能够识别,如果希望每次刷新页面都能发新请求,那么可以把“content”里的值写为“-1”或“0”。Pragma字段的优先级会高于Pragma。


Last-Modified/ETag

缓存校验字段;用于判断控制文件是否有修改。


一般浏览器缓存位于哪里呢?

Windows XP:C:\Documents and Settings\用户名\Local Settings\Temporary Internet Files

Windows Vista:%userprofile%\AppData\Local\Microsoft\Windows\Temporary Internet Files\Low?

Windows 7:C:\Users\Administrator\AppData\Local\Microsoft\Windows\Temporary Internet Files

C:\Users\test\AppData\Local\Microsoft\Windows\Temporary Internet Files\Content.IE5


如果读者希望了解更多关于HTTP相关的知识,建议去读一下《HTTP权威指南》和《图解HTTP》。


相关文章
|
11月前
|
Web App开发 缓存 前端开发
浏览器常见面试题目及详细答案解析
本文围绕浏览器常见面试题及答案展开,深入解析浏览器组成、内核、渲染机制与缓存等核心知识点。内容涵盖浏览器的主要组成部分(如用户界面、呈现引擎、JavaScript解释器等)、主流浏览器内核及其特点、从输入URL到页面呈现的全过程,以及CSS加载对渲染的影响等。结合实际应用场景,帮助读者全面掌握浏览器工作原理,为前端开发和面试提供扎实的知识储备。
433 4
|
7月前
|
数据采集 人工智能 自然语言处理
Playwright MCP 浏览器自动化框架全面解析
Playwright MCP是微软推出的开源项目,结合Playwright与MCP协议,让AI通过结构化数据直接操作浏览器。告别传统视觉识别,实现高效、精准的网页自动化,广泛应用于测试、爬虫、办公自动化等场景,大幅提升效率与可靠性。
|
监控 Java 应用服务中间件
高级java面试---spring.factories文件的解析源码API机制
【11月更文挑战第20天】Spring Boot是一个用于快速构建基于Spring框架的应用程序的开源框架。它通过自动配置、起步依赖和内嵌服务器等特性,极大地简化了Spring应用的开发和部署过程。本文将深入探讨Spring Boot的背景历史、业务场景、功能点以及底层原理,并通过Java代码手写模拟Spring Boot的启动过程,特别是spring.factories文件的解析源码API机制。
534 2
|
10月前
|
Web App开发 安全 测试技术
Playwright-MCP浏览器会话复用全解析
本文深入解析Playwright-MCP实现浏览器会话复用的核心技术,包括状态持久化(cookies/localStorage存储)和直接连接已打开浏览器实例(通过CDP协议)。通过多上下文隔离与安全机制设计,提供企业级应用场景的优化方案,帮助开发者提升测试效率并降低资源消耗。
|
机器学习/深度学习 人工智能 JSON
Resume Matcher:增加面试机会!开源AI简历优化工具,一键解析简历和职位描述并优化
Resume Matcher 是一款开源AI简历优化工具,通过解析简历和职位描述,提取关键词并计算文本相似性,帮助求职者优化简历内容,提升通过自动化筛选系统(ATS)的概率,增加面试机会。
1673 18
Resume Matcher:增加面试机会!开源AI简历优化工具,一键解析简历和职位描述并优化
|
数据采集 Web App开发 监控
深度解析:使用ChromeDriver和webdriver_manager实现无头浏览器爬虫
在现代网络爬虫实践中,动态网页加载和反爬虫机制增加了数据采集的难度。采用无头浏览器技术(如Selenium与ChromeDriver)可有效模拟用户行为、执行JavaScript,获取动态内容。通过设置代理IP、伪装User-Agent和处理Cookies,提升爬虫隐蔽性和稳定性。该方案适用于电商价格监控、社交媒体数据采集和招聘信息抓取等场景,实现更高效的数据获取。
1124 2
深度解析:使用ChromeDriver和webdriver_manager实现无头浏览器爬虫
|
数据采集 Web App开发 存储
深度解析:使用 Headless 模式 ChromeDriver 进行无界面浏览器操作
本文介绍了基于无界面浏览器(如ChromeDriver)和代理IP技术的现代爬虫解决方案,以应对传统爬虫面临的反爬机制和动态加载内容等问题。通过Selenium驱动ChromeDriver,并结合亿牛云爬虫代理、自定义Cookie和User-Agent设置,实现高效的数据采集。代码示例展示了如何配置ChromeDriver、处理代理认证、添加Cookie及捕获异常,确保爬虫稳定运行。性能对比显示,Headless模式下的ChromeDriver在数据采集成功率、响应时间和反爬规避能力上显著优于传统爬虫。该方案广泛应用于电商、金融和新闻媒体等行业。
766 0
深度解析:使用 Headless 模式 ChromeDriver 进行无界面浏览器操作
|
Java 程序员
面试官的加分题:super关键字全解析,轻松应对!
小米,29岁程序员,通过一个关于Animal和Dog类的故事,详细解析了Java中super关键字的多种用法,包括调用父类构造方法、访问父类成员变量及调用父类方法,帮助读者更好地理解和应用super,应对面试挑战。
260 3
|
存储 网络协议 安全
30 道初级网络工程师面试题,涵盖 OSI 模型、TCP/IP 协议栈、IP 地址、子网掩码、VLAN、STP、DHCP、DNS、防火墙、NAT、VPN 等基础知识和技术,帮助小白们充分准备面试,顺利踏入职场
本文精选了 30 道初级网络工程师面试题,涵盖 OSI 模型、TCP/IP 协议栈、IP 地址、子网掩码、VLAN、STP、DHCP、DNS、防火墙、NAT、VPN 等基础知识和技术,帮助小白们充分准备面试,顺利踏入职场。
2279 2
|
存储 算法 Java
大厂面试高频:什么是自旋锁?Java 实现自旋锁的原理?
本文详解自旋锁的概念、优缺点、使用场景及Java实现。关注【mikechen的互联网架构】,10年+BAT架构经验倾囊相授。
大厂面试高频:什么是自旋锁?Java 实现自旋锁的原理?

推荐镜像

更多
  • DNS