最新前端面试题精心整理(二)—HTTP协议_前端缓存机制 面试题，从基础到源码统统帮你搞定

总结

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

JavaScript

前端资料汇总

	- [A1：会发生从解析url到渲染页面的过程。](#A1url_5)
	- * [Q1-1：浏览器是怎么渲染的呢？CSS/DOM这些。](#Q11CSSDOM_16)
		* [A1-1：过程如下。](#A11_17)
	- [Q2: http协议中，缓存机制有哪些，如何命中？](#Q2_http_30)
	- [A2：强缓存、协商缓存。](#A2_31)
	- [Q3: http协议中，常见的状态码有哪些？](#Q3_http_69)
	- [A3：以2开头的代表的成功的返回，以3开头代表重定向，以4开头是客户端、用户操作的问题，以5开头是服务器端的错误。](#A32345_70)
	- [Q4：http协议 与 https协议 有什么区别？](#Q4http__https__86)
	- [A4：http协议是明文传输，https协议是http协议+ssl协议构建的，加密传输协议。](#A4httphttpshttpssl_87)
	- [Q5: TCP和UDP的区别](#Q5_TCPUDP_93)
	- [A5: 区别如下。](#A5__94)
	- [Q6：Http1.1与2.0的区别](#Q6Http1120_108)

上一篇是
TypeScript相关问题，点击超链接查看。

Q1: http协议中，从用户输入url地址，会发生什么？

A1：会发生从解析url到渲染页面的过程。

1. 首先浏览器会解析url，查看本地缓存（浏览器缓存、系统缓存、路由缓存等），如果有则直接显示。
2. 如果都没有，则进行DNS域名解析，解析出对应的IP地址。
3. 浏览器与服务器三次握手，成功建立TCP连接。
4. 浏览器发出http请求。
5. 服务器收到请求，返回资源。
6. 浏览器接收数据后，进行解析、渲染。
7. 最后显示出页面。

由于提到了浏览器渲染，有些面试官就会接着问下去。

Q1-1：浏览器是怎么渲染的呢？CSS/DOM这些。

A1-1：过程如下。

1. 解析HTML，生成DOM树。
2. 解析CSS，生成CSSOM树。
3. 将DOM和CSSOM合并，生成渲染树（Render-Tree）。
4. 计算渲染树的布局Layout， 将布局Paint渲染到屏幕上。

如图所示（原创勿盗）：

还可能涉及到回流、重绘的问题。

本篇文章主要是http协议相关，不过多赘述渲染问题。将文章看完，再点击 这里， 有很详细的浏览器渲染的资料推荐给大家。

Q2: http协议中，缓存机制有哪些，如何命中？

A2：强缓存、协商缓存。

强缓存与协商缓存的命中，由响应头Response Headers确定（服务器返回）。

1. 强缓存
   响应头中的 status 是 200，相关字段有expires（http1.0）,cache-control（http1.1)，两者同时出现时 cache-control 优先级更高。主要是利用 cache-control 的max-age值来进行判断。

浏览器再次请求服务器时，浏览器会先判断max-age，如果到期则直接请求服务器，否则直接从缓存中读取。

响应头的字段如图所示：
2. 协商缓存
响应头中的 status 是 304，相关字段有 Etag / If-No-Match，Last-Modified / If-Modified-Since。
（1） 服务器的 ETag 和 浏览器的 If-None-Match 对应：

Etag（服务器）: 上次加载时，服务器的 response header 返回的；
If-No-Match（浏览器）： 浏览器请求时的 request header 里的，取的是 Etag 的值。

如果服务器为请求的资源确定的 ETag 标头的值与浏览器请求中的 If-None-Match 值相同，则服务器将返回 304 Not Modified。表示资源文件没有发生改变，命中协商缓存。

服务器优先考虑Etag。

Etag 与 Last-Modifed 均是服务器的响应头返回的，如图所示：

（2） 服务器的 Last-Modified 和 浏览器请求的 If-Modified-Since 对应：

Last-Modified（服务器）：该资源文件最后一次更改时间，服务器的 response header 里返回；
If-Modified-Since（浏览器）：浏览器请求时的 request header 里的，取的是 Last-Modify 的值。

在下一次发送请求时，服务器在接收到会做比对，如果相同，则命中协商缓存。
If-No-Match 与 If-Modified-Since 是浏览器发送的，请求头可以简略为以下格式：

GET / HTTP/1.1
Host: example.com
Cache-Control: max-age=0
If-None-Match: "deadbeef"  // 对应服务端的标记Etag
If-Modified-Since: Tue, 22 Feb 2022 20:20:20 GMT // 对应服务端的Last-Modified

Q3: http协议中，常见的状态码有哪些？

A3：以2开头的代表的成功的返回，以3开头代表重定向，以4开头是客户端、用户操作的问题，以5开头是服务器端的错误。

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

[外链图片转存中…(img-FZpW7YNb-1715262755480)]

[外链图片转存中…(img-q1hYI9ej-1715262755481)]