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


目录
打赏
0
0
0
0
1
分享
相关文章
浏览器常见面试题目及详细答案解析
本文围绕浏览器常见面试题及答案展开,深入解析浏览器组成、内核、渲染机制与缓存等核心知识点。内容涵盖浏览器的主要组成部分(如用户界面、呈现引擎、JavaScript解释器等)、主流浏览器内核及其特点、从输入URL到页面呈现的全过程,以及CSS加载对渲染的影响等。结合实际应用场景,帮助读者全面掌握浏览器工作原理,为前端开发和面试提供扎实的知识储备。
103 4
2025 最新史上最全 Java 面试题独家整理带详细答案及解析
本文从Java基础、面向对象、多线程与并发等方面详细解析常见面试题及答案,并结合实际应用帮助理解。内容涵盖基本数据类型、自动装箱拆箱、String类区别,面向对象三大特性(封装、继承、多态),线程创建与安全问题解决方法,以及集合框架如ArrayList与LinkedList的对比和HashMap工作原理。适合准备面试或深入学习Java的开发者参考。附代码获取链接:[点此下载](https://pan.quark.cn/s/14fcf913bae6)。
187 48
2025 最新 100 道 CSS 面试题及答案解析续篇
本文整理了100道CSS面试题及其答案,涵盖CSS基础与进阶知识。内容包括CSS引入方式、盒模型、选择器优先级等核心知识点,并通过按钮、卡片、导航栏等组件封装实例,讲解单一职责原则、样式隔离、响应式设计等最佳实践。适合前端开发者巩固基础、备战面试或提升组件化开发能力。资源地址:[点击下载](https://pan.quark.cn/s/50438c9ee7c0)。
52 5
2025 最新 100 道 CSS 面试题及答案解析续篇
|
24天前
|
Java Redis 面试题集锦 常见高频面试题目及解析
本文总结了Redis在Java中的核心面试题,包括数据类型操作、单线程高性能原理、键过期策略及分布式锁实现等关键内容。通过Jedis代码示例展示了String、List等数据类型的操作方法,讲解了惰性删除和定期删除相结合的过期策略,并提供了Spring Boot配置Redis过期时间的方案。文章还探讨了缓存穿透、雪崩等问题解决方案,以及基于Redis的分布式锁实现,帮助开发者全面掌握Redis在Java应用中的实践要点。
78 6
2025 年最新 Java 面试从基础到微服务实战指南全解析
《Java面试实战指南:高并发与微服务架构解析》 本文针对Java开发者提供2025版面试技术要点,涵盖高并发电商系统设计、微服务架构实现及性能优化方案。核心内容包括:1)基于Spring Cloud和云原生技术的系统架构设计;2)JWT认证、Seata分布式事务等核心模块代码实现;3)数据库查询优化与高并发处理方案,响应时间从500ms优化至80ms;4)微服务调用可靠性保障方案。文章通过实战案例展现Java最新技术栈(Java 17/Spring Boot 3.2)的应用.
91 9
Java 基础知识面试题全解析之技术方案与应用实例详解
本内容结合Java 8+新特性与实际场景,涵盖函数式编程、Stream API、模块化、并发工具等技术。通过Lambda表达式、Stream集合操作、Optional空值处理、CompletableFuture异步编程等完整示例代码,助你掌握现代Java应用开发。附面试题解析与技术方案,提升实战能力。代码示例涵盖计算器、员工信息统计、用户查询、模块化系统设计等,助你轻松应对技术挑战。
61 9
2025 年 Java 面试必备最常见 200 + 面试题及答案解析
这是一份针对Java面试的综合技术方案与应用实例文档,涵盖Java基础(JDK/JRE、字符串、IO流)、容器(ArrayList/LinkedList、HashMap)、多线程(线程创建、同步、线程池)、数据库(MySQL索引、Redis缓存穿透)及Spring框架(IOC容器、热部署)等核心模块。通过详细解析常见面试题,帮助读者深入理解并掌握Java核心技术,为应对面试提供全面指导。此外,还涉及反射、设计模式、JVM调优等进阶内容,助力开发者全面提升技能。代码示例可从提供的链接下载。
126 6
Java 集合篇面试题全面总结及答案解析
本文总结了Java集合框架的核心概念、常见集合类的特性与应用场景,以及开发中可能遇到的问题与解决方案。内容涵盖集合框架的基础接口(如Collection、Set、List、Map)、泛型的优点、线程安全集合类(如ConcurrentHashMap、CopyOnWriteArrayList)、常见集合类的区别(如ArrayList与LinkedList、HashMap与HashTable)等。此外,还详细介绍了如何实现LRU缓存、FIFO队列、优先级队列及栈等数据结构,并提供了相关代码示例。通过本文,读者可以全面掌握Java集合相关的面试知识点及其实际应用技巧。
50 1
2025 校招必看:Java 开发面试核心知识点深度解析及最新笔面试题汇总
本文针对2025校招Java开发面试,系统梳理了Java基础、集合框架、多线程并发、JVM等核心知识点,并附带最新笔面试题。内容涵盖封装、继承、多态、异常处理、集合类使用、线程同步机制、JVM内存模型及垃圾回收算法等。同时深入探讨Spring、数据库(MySQL索引优化、Redis持久化)、分布式系统(CAP理论、分布式事务)等相关知识。通过理论结合实例解析,帮助考生全面掌握面试要点,提升实战能力,为成功拿下Offer奠定坚实基础。
143 2

热门文章

最新文章

推荐镜像

更多
  • DNS
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等

    登录插画

    登录以查看您的控制台资源

    管理云资源
    状态一览
    快捷访问