Web前端面试葵花宝典(2022版本)——HTTP浏览器 篇

Posted 不苒

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Web前端面试葵花宝典(2022版本)——HTTP浏览器 篇相关的知识,希望对你有一定的参考价值。

还在担心面试不通过吗?给大家推荐一个超级好用的刷面试题神器:牛客网,里面涵盖了各个领域的面试题库,还有大厂真题哦!

赶快悄悄的努力起来吧,不苒在这里衷心祝愿各位大佬都能顺利通过面试。
面试专栏分享,感觉有用的小伙伴可以点个订阅,不定时更新相关面试题:面试专栏

文章目录

🍉前言

本篇文章主要写的是【前端高频面试题(HTTP/浏览器)篇】,本来不打算更新本篇文章了,但是经验所得面试问到的有关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的区别

  1. TCP 是面向连接的,UDP 是无连接的即发送数据前不需要先建立链接。
  2. TCP 提供可靠的服务。也就是说,通过 TCP 连接传送的数据,无差错,不丢失, 不重复,且按序到达;UDP 尽最大努力交付,即不保证可靠交付。 并且因为 TCP 可靠, 面向连接,不会丢失数据因此适合大数据量的交换。
  3. TCP 是面向字节流,UDP 面向报文,并且网络出现拥塞不会使得发送速率降低,因此会出现丢包,对实时的应用比如IP电话和视频会议等。
  4. TCP只能是1对1的,UDP 支持1对1,1对多。
  5. TCP 的首部较大为20字节,而UDP只有8字节。
  6. 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到页面加载显示完成发生了什么?

  1. DNS 解析
  2. TCP 连接
  3. 发送 HTTP 请求
  4. 服务器处理请求并返回 HTTP 报文
  5. 浏览器解析渲染页面
  6. 连接结束

15. cookie 有哪些限制?

  • 单个cookie 保存的数据不能超过4K
  • 很多浏览器都限制一个站点最多保存20个cookie

16.知道 304 吗,什么时候用 304?

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

🎃专栏分享:

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


名 言 警 句 : 说 能 做 的 做 说 过 的 \\textcolorred 名言警句:说能做的做说过的

原 创 不 易 , 还 希 望 各 位 大 佬 支 持 一 下 \\textcolorblue原创不易,还希望各位大佬支持一下

👍 点 赞 , 你 的 认 可 是 我 创 作 的 动 力 ! \\textcolorgreen点赞,你的认可是我创作的动力!

⭐️ 收 藏 , 你 的 青 睐 是 我 努 力 的 方 向 ! \\textcolorgreen收藏,你的青睐是我努力的方向!

✏️ 评 论 , 你 的 意 见 是 我 进 步 的 财 富 ! \\textcolorgreen评论,你的意见是我进步的财富!

以上是关于Web前端面试葵花宝典(2022版本)——HTTP浏览器 篇的主要内容,如果未能解决你的问题,请参考以下文章

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

web前端面试宝典——带你直击面试重难点(40个经典题目,涵盖近90%的考点,码字2w,干货满满!)

学姐面试宝典—— 前端基础篇Ⅰ(HTTP/HTML/浏览器)

学姐面试宝典—— 前端基础篇Ⅱ(HTTP/HTML/浏览器)

前端面试宝典 - Javascript 基础知识

前端最强面试宝典 - JS 篇之数据类型