面试题|【Web前端面试】葵花宝典(2022版本)——HTTP\浏览器篇面试|前端|http|HTTP协议

$面试题|【Web前端面试】葵花宝典(2022版本)——HTTP\浏览器篇$
文章图片

还在担心面试不通过吗？给大家推荐一个超级好用的刷面试题神器：牛客网，里面涵盖了各个领域的面试题库，还有大厂真题哦！
赶快悄悄的努力起来吧，不苒在这里衷心祝愿各位大佬都能顺利通过面试。
面试专栏分享，感觉有用的小伙伴可以点个订阅，不定时更新相关面试题：面试专栏。
$面试题|【Web前端面试】葵花宝典(2022版本)——HTTP\浏览器篇$
文章图片

文章目录

前言
正文
- 1. 说一下http和 https 的概念
- 2. http和https的区别是什么？
- 3.简单的说一下 TCP 三次握手
- 4. TCP和UDP的区别
- 5.什么是 `WebSocket`
- 6.说一下 http2.0
- 7.常见的状态码都有哪些？分别有什么作用？
- 8. fetch 发送 2 次请求的原因
- 9. sessionStorage、localStorage、cookie、session 的区别(重点)
- 10.前端优化方法都有哪些？
- 11. HTTP常见的请求方法
- 12.常见的 HTTP 的头部
- 13.浏览器在生成页面的时候，会生成那两颗树？
- 14.输入URL到页面加载显示完成发生了什么？
- 15. cookie 有哪些限制？
- 16.知道 304 吗，什么时候用 304？
专栏分享：

前言

本篇文章主要写的是【前端高频面试题（HTTP/浏览器）篇】，本来不打算更新本篇文章了，但是经验所得面试问到的有关HTTP、浏览器等前端基础问题还是不少，所以本文总结一写常见的分享给各位。
面试题参考文章：

【Web前端面试】葵花宝典（2022版本）—— Vue篇

【Web前端面试】葵花宝典(2022版本) —— React 篇

【Web前端面试】葵花宝典（2022版本）—— CSS篇

【Web前端面试】葵花宝典（2022版本）—— JS篇（上）

【Web前端面试】葵花宝典(2022版本)—— JS篇（下）

【JavaScript】中this指向相关的经典面试题

【JavaScript】作用域提升面试题（详解）

【面试题|【Web前端面试】葵花宝典(2022版本)——HTTP\浏览器篇】【面试专栏】—— 点击链接即可订阅面试专栏

正文 1. 说一下http和 https 的概念

http：超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从 WWW 服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。

https: 是以安全为目标的 HTTP 通道，简单讲是 HTTP 的安全版，即 HTTP 下加入 SSL 层，HTTPS 的安全基础是 SSL，因此加密的详细内容就需要 SSL。 https 协议的主要作用是：建立一个信息安全通道，来确保数组的传输，确保网站的真实性。

2. http和https的区别是什么？

http 传输的数据都是未加密的，也就是明文的，网景公司设置了 SSL 协议来对 http 协议传输的数据进行加密处理，简单来说 https 协议是由 http 和 ssl 协议构建的可进行加密传输和身份认证的网络协议，比 http 协议的安全性更高。
主要的区别如下：

Https 协议需要 ca 证书，费用较高。

http 是超文本传输协议，信息是明文传输，https 则是具有安全性的 ssl 加密传输协议。

使用不同的链接方式，端口也不同，一般而言，http 协议的端口为 80，https 的端口为 443

http 的连接很简单，是无状态的；HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 http 协议安全。

3.简单的说一下 TCP 三次握手 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GW7RXc3r-1657621042524)(C:\Users\24817\Desktop\封面\三次握手.png)]

从图片可以得到三次握手可以简化为：C 发起请求连接 S 确认，也发起连接 C 确认我们再看看每次握手的作用：第一次握手：S 只可以确认自己可以接受 C 发送的报文段第二次握手：C 可以确认 S 收到了自己发送的报文段，并且可以确认自己可以接受 S 发送的报文段第三次握手：S 可以确认 C 收到了自己发送的报文段

4. TCP和UDP的区别

TCP 是面向连接的，UDP 是无连接的即发送数据前不需要先建立链接。

TCP 提供可靠的服务。也就是说，通过 TCP 连接传送的数据，无差错，不丢失，不重复，且按序到达；UDP 尽最大努力交付，即不保证可靠交付。并且因为 TCP 可靠，面向连接，不会丢失数据因此适合大数据量的交换。

TCP 是面向字节流，UDP 面向报文，并且网络出现拥塞不会使得发送速率降低，因此会出现丢包，对实时的应用比如IP电话和视频会议等。

TCP只能是1对1的，UDP 支持1对1,1对多。

TCP 的首部较大为20字节，而UDP只有8字节。

TCP 是面向连接的可靠性传输，而UDP是不可靠的

5.什么是 WebSocket

WebSocket 是 HTML5 中的协议，支持持久连续，http 协议不支持持久性连接。Http1.0 和 HTTP1.1 都不支持持久性的链接，HTTP1.1 中的 keep-alive，将多个 http 请求合并为 1 个。

6.说一下 http2.0

首先补充一下，http 和 https 的区别，相比于 http,https 是基于 ssl 加密的 http 协议
简要概括：http2.0 是基于 1999 年发布的 http1.0 之后的首次更新。

提升访问速度（可以对于，请求资源所需时间更少，访问速度更快，相比 http1.0）

允许多路复用：多路复用允许同时通过单一的 HTTP/2 连接发送多重请求-响应信息。改善了：在 http1.1 中，浏览器客户端在同一时间，针对同一域名下的请求有一定数量限制（连接数量），超过限制会被阻塞。

二进制分帧：HTTP2.0 会将所有的传输信息分割为更小的信息或者帧，并对他们进行二进制编码、首部压缩、服务器端推送

7.常见的状态码都有哪些？分别有什么作用？

200	表示请求成功
301	表示永久重定向
302	表示你临时重定向
304	表示可以在缓存中取到数据（协商缓存）
400	请求无效
401	表示当前请求需要用户验证
403	表示跨域，服务器已经得到请求，但是拒绝执行
404	表示请求资源不存在
500	服务端错误

8. fetch 发送 2 次请求的原因

fetch 发送 post 请求的时候，总是发送 2 次，第一次状态码是 204（服务器成功处理了请求，但没有返回任何内容），第二次才成功？原因很简单，因为你用 fetch 的 post 请求的时候，导致 fetch 第一次发送了一个 Options 请求，询问服务器是否支持修改的请求头，如果服务器支持，则在第二次中发送真正的请求。

9. sessionStorage、localStorage、cookie、session 的区别(重点)

localStorage

生命周期：关闭浏览器后数据依然保留，除非手动清除，否则一直在

作用域：相同浏览器的不同标签在同源情况下可以共享localStorage

sessionStorage

生命周期：关闭浏览器或者标签后即失效

作用域：只在当前标签可用，当前标签的iframe中且同源可以共享

cookie

是保存在客户端的，一般由后端设置值，可以设置过期时间

存储大小只有4k

一般用来保存用户的信息的

在http下cookie是明文传出的，比较不安全

cookie属性：

http-only:不能被客户端更改访问，防止XSS攻击(保证cookie安全性的操作)

Secure：只允许在https下传输

Max-age: cookie生成后失效的秒数

expire: cookie的最长有效时间，若不设置则cookie生命期与会话期相同

session

session是保存在服务端的

session的运行依赖sessionId，而sessionId又保存在cookie中，所以如果禁用的cookie，session也是不能用的，不过硬要用也可以，可以把sessionId保存在URL中

session一般用来跟踪用户的状态

session 的安全性更高，保存在服务端，不过一般为使服务端性能更加，会考虑部分信息保存在cookie中

10.前端优化方法都有哪些？

降低请求量：合并资源，减少HTTP请求数，lazyLoad。

加快请求速度：预解析DNS，减少域名数，并行加载，CDN分发。

缓存：HTTP 协议缓存请求，离线缓存，离线数据缓存localStorage。

渲染：JS/CSS优化，加载顺序，服务器渲染。

11. HTTP常见的请求方法

get、post，这两个用的是最多的，还有很多比如 patch、delete、put、options 等

12.常见的 HTTP 的头部

可以将 http 首部分为通用首部，请求首部，响应首部，实体首部

通用首部表示一些通用信息，比如 date 表示报文创建时间

请求首部就是请求报文中独有的，如 cookie，和缓存相关的如 if-Modified-Since

响应首部就是响应报文中独有的，如 set-cookie，和重定向相关的 location

实体首部用来描述实体部分，如 allow 用来描述可执行的请求方法，content-type 描述主题类型，content-Encoding 描述主体的编码方式。

13.浏览器在生成页面的时候，会生成那两颗树？

构造两棵树，DOM 树和 CSSOM 规则树
当浏览器接收到服务器相应来的 HTML 文档后，会遍历文档节点，生成 DOM 树
CSSOM 规则树由浏览器解析 CSS 文件生成。

14.输入URL到页面加载显示完成发生了什么？

DNS 解析

TCP 连接

发送 HTTP 请求

服务器处理请求并返回 HTTP 报文

浏览器解析渲染页面

连接结束

15. cookie 有哪些限制？

单个cookie 保存的数据不能超过4K

很多浏览器都限制一个站点最多保存20个cookie

16.知道 304 吗，什么时候用 304？

304：如果客户端发送了一个带条件的GET请求，且该请求已经被允许，而文档的内容（自上次访问以来或者根据条件的请求的条件）并没有改变，则服务器应当返回304状态码。

专栏分享：

JavaScript相关面试题就更新到这里啦，相关 Web前端面试题可以订阅专栏哦
专栏地址：《面试必看》

?名言警句：说能做的做说过的 \textcolor{red} {名言警句：说能做的做说过的} 名言警句：说能做的做说过的

?原创不易，还希望各位大佬支持一下 \textcolor{blue}{原创不易，还希望各位大佬支持一下} 原创不易，还希望各位大佬支持一下

点赞，你的认可是我创作的动力！ \textcolor{green}{点赞，你的认可是我创作的动力！} 点赞，你的认可是我创作的动力！

??收藏，你的青睐是我努力的方向！ \textcolor{green}{收藏，你的青睐是我努力的方向！} 收藏，你的青睐是我努力的方向！

??评论，你的意见是我进步的财富！ \textcolor{green}{评论，你的意见是我进步的财富！} 评论，你的意见是我进步的财富！