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

本文涉及的产品
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 题目:描述一下用户打开浏览器到看到网页整个过程发生了什么?

本文阅读大概需要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》。


相关文章
|
2月前
|
缓存 前端开发 中间件
[go 面试] 前端请求到后端API的中间件流程解析
[go 面试] 前端请求到后端API的中间件流程解析
|
2月前
|
并行计算 数据挖掘 大数据
[go 面试] 并行与并发的区别及应用场景解析
[go 面试] 并行与并发的区别及应用场景解析
|
6天前
|
Web App开发 SQL 数据库
使用 Python 解析火狐浏览器的 SQLite3 数据库
本文介绍如何使用 Python 解析火狐浏览器的 SQLite3 数据库,包括书签、历史记录和下载记录等。通过安装 Python 和 SQLite3,定位火狐数据库文件路径,编写 Python 脚本连接数据库并执行 SQL 查询,最终输出最近访问的网站历史记录。
17 4
|
1月前
|
设计模式 Java 关系型数据库
【Java笔记+踩坑汇总】Java基础+JavaWeb+SSM+SpringBoot+SpringCloud+瑞吉外卖/谷粒商城/学成在线+设计模式+面试题汇总+性能调优/架构设计+源码解析
本文是“Java学习路线”专栏的导航文章,目标是为Java初学者和初中高级工程师提供一套完整的Java学习路线。
307 37
|
5天前
|
JavaScript API
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
深入解析JS中的visibilitychange事件:监听浏览器标签间切换的利器
12 0
|
1月前
|
XML 编解码 JavaScript
从浏览器的解析规则认识XSS防御
从浏览器的解析规则认识XSS防御
30 2
|
1月前
|
缓存 Android开发 开发者
Android RecycleView 深度解析与面试题梳理
本文详细介绍了Android开发中高效且功能强大的`RecyclerView`,包括其架构概览、工作流程及滑动优化机制,并解析了常见的面试题。通过理解`RecyclerView`的核心组件及其优化技巧,帮助开发者提升应用性能并应对技术面试。
61 8
|
1月前
|
存储 缓存 Android开发
Android RecyclerView 缓存机制深度解析与面试题
本文首发于公众号“AntDream”,详细解析了 `RecyclerView` 的缓存机制,包括多级缓存的原理与流程,并提供了常见面试题及答案。通过本文,你将深入了解 `RecyclerView` 的高性能秘诀,提升列表和网格的开发技能。
56 8
|
2月前
|
存储 JavaScript 前端开发
|
2月前
|
缓存 网络协议 Linux
在Linux中,当用户在浏览器当中输入⼀个网站,计算机对dns解释经过那些流程?
在Linux中,当用户在浏览器当中输入⼀个网站,计算机对dns解释经过那些流程?

推荐镜像

更多