面试题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》。


相关文章
|
3月前
|
Web App开发 编解码 前端开发
面试题22:如何测试Web浏览器的兼容性?
面试题22:如何测试Web浏览器的兼容性?
|
4月前
|
Web App开发 前端开发
Chrome 浏览器插件 V3 版本 Manifest.json 文件中 Action 的类型(Types)、方法(Methods)和事件(Events)的属性和参数解析
Chrome 浏览器插件 V3 版本 Manifest.json 文件中 Action 的类型(Types)、方法(Methods)和事件(Events)的属性和参数解析
162 0
|
3月前
|
XML 机器学习/深度学习 JSON
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
31 0
在火狐浏览器调ajax获取json数据时,控制台提示“XML 解析错误:格式不佳”。
|
13天前
|
前端开发 JavaScript
浏览器通过构建DOM树来解析HTML代码
【4月更文挑战第30天】浏览器通过构建DOM树来解析HTML代码
24 1
|
23天前
|
数据采集 机器学习/深度学习 数据挖掘
Python数据清洗与预处理面试题解析
【4月更文挑战第17天】本文介绍了Python数据清洗与预处理在面试中的常见问题,包括Pandas基础操作、异常值处理和特征工程。通过示例代码展示了数据读取、筛选、合并、分组统计、离群点检测、缺失值和重复值处理、特征缩放、编码、转换和降维。强调了易错点,如忽视数据质量检查、盲目处理数据、数据隐私保护、过度简化特征关系和忽视模型输入要求。掌握这些技能和策略将有助于在面试中脱颖而出。
33 8
|
25天前
|
调度 Python
Python多线程、多进程与协程面试题解析
【4月更文挑战第14天】Python并发编程涉及多线程、多进程和协程。面试中,对这些概念的理解和应用是评估候选人的重要标准。本文介绍了它们的基础知识、常见问题和应对策略。多线程在同一进程中并发执行,多进程通过进程间通信实现并发,协程则使用`asyncio`进行轻量级线程控制。面试常遇到的问题包括并发并行混淆、GIL影响多线程性能、进程间通信不当和协程异步IO理解不清。要掌握并发模型,需明确其适用场景,理解GIL、进程间通信和协程调度机制。
35 0
|
25天前
|
API Python
Python模块化编程:面试题深度解析
【4月更文挑战第14天】了解Python模块化编程对于构建大型项目至关重要,它涉及代码组织、复用和维护。本文深入探讨了模块、包、导入机制、命名空间和作用域等基础概念,并列举了面试中常见的模块导入混乱、不适当星号导入等问题,强调了避免循环依赖、合理使用`__init__.py`以及理解模块作用域的重要性。掌握这些知识将有助于在面试中自信应对模块化编程的相关挑战。
22 0
|
1月前
|
JavaScript 前端开发 UED
|
4月前
|
消息中间件 数据库
面试题解析:RabbitMQ在多线程秒杀系统中的关键作用
面试题解析:RabbitMQ在多线程秒杀系统中的关键作用
34 0
|
4月前
|
消息中间件 存储 NoSQL
面试题解析:如何解决分布式秒杀系统中的库存超卖问题?
面试题解析:如何解决分布式秒杀系统中的库存超卖问题?
125 0

推荐镜像

更多