前端HTTP面试题小结

止春风
130 阅读8分钟

1 浏览器的缓存原理 (强缓存以及协商缓存)

Web 服务缓存 ⼤致可以分为：

数据库缓存、服务器端缓存（代理服务器缓存、CDN 服务器缓存）、浏览器缓存。

浏览器缓存 也包含很多内容： HTTP 缓存、indexDB、cookie、localstorage 等等。 这⾥我们只讨论 HTTP 缓存相 关内容 。

HTTP缓存: (优化⻚⾯加载的效率, 如果没有缓存策略, 每次重新加载⻚⾯, 会⾮常慢!)

在具体了解 HTTP 缓存之前先来明确⼏个术语：

  • 缓存命中率：从缓存中得到数据的请求数 与 所有请求数的⽐率。理想状态是越⾼越好。 (看所有的请求中, 多少从缓存中读的)
  • 过期内容：超过设置的有效时间，被标记为“陈旧”的内容。
  • 验证：验证缓存中的过期内容是否仍然有效，验证通过的话刷新过期时间。
  • 失效：失效就是把内容从缓存中移除。

浏览器缓存, HTTP缓存分类

浏览器缓存分为 强缓存 和 协商缓存 ，浏览器加载⼀个⻚⾯的简单流程如下：

  1. 浏览器先根据这个资源的 http头信息 来 判断是否命中强缓存。 如果命中则直接加载在缓存中的资源，并不会将请求发送到服务器。（强缓存）
  2. 如果未命中强缓存，则浏览器会将资源加载请求发送到服务器。 服务器来判断浏览器本地缓存是否失效。 若可以使⽤，则服务器并不会返回资源信息，浏览器继续从缓存加载资源。（协商缓存）
  3. 如果未命中协商缓存，则服务器会将完整的资源返回给浏览器，浏览器加载新资源，并更新缓存。（新的请 求）

强缓存

命中强缓存时，浏览器并不会将请求发送给服务器。

在Chrome的开发者⼯具中看到http的返回码是200，但是在Size列会显示为(from cache)。

image.png

强缓存是利⽤http的返回的响应头中的Expires或者Cache-Control来判断过期时间

Expires

Expires是Web服务器响应消息头字段，在响应http请求时告诉浏览器在过期时间前浏览器可以直接从浏览器缓存 取数据，⽽⽆需再次请求。

image.png 该字段会返回⼀个时间，⽐如Expires: Wed, 23 Nov 2050 16:00:01 GMT 。这个时间代表着这个资源的失效时 间，也就是说在xx年xx⽉xx⽇时间之前都是有效的，即命中缓存。

这种⽅式有⼀个明显的缺点，由于失效时间是⼀个 绝对时间 ，所以当 服务器与客户端 时间偏差很⼤ 以后，就会导 致缓存混乱。于是发展出了Cache-Control

Cache-Control

Cache-Control是⼀个 相对时间 ，例如Cache-Control:max-age 3600，代表着资源的有效期是3600秒。 由于是相对时间，并且都是与客户端时间⽐较，所以服务器与客户端时间偏差也不会导致问题。

Cache-Control与Expires可以在服务端配置同时启⽤或者启⽤任意⼀个，同时启⽤的时候Cache-Control优先级⾼。

协商缓存

强缓存命中失效了, 超过过期时间了, 拿着标识(最后的修改时间, 唯⼀标识etag), 去问服务器, 是否真的过期了，如果验证通过, 服务器会直接响应 304, 且不会返回资源

2 计量单位

  • 1bit（位） ：1bit
  • 1Byte (字节)：1Byte =8bit
  • 1KB=1024Byte=1*210Byte
  • 1M=1024KB =1*220Byte 210 210
  • 1G=1024MB
  • 1T=1024GB

3 五层参考模型

image.png

1.TCP协议是什么?

TCP(Transmission Control Protocol 传输控制协议)是一种面向连接(连接导向)的、可靠的、基于IP的传输层协议。TCP 使用校验、确认和重传机制来保证可靠传输 而 HTTP协议 就是建立在TCP协议之上的一种应用。

image.png

2.一次完整的HTTP服务过程是什么

当我们在web浏览器的地址栏中输入: www.baidu.com ，具体发生了什么? 1.对 www.baidu.com 这个网址进行DNS域名解析，得到对应的IP地址 2.根据这个IP，找到对应的服务器，发起TCP的三次握手 3.建立TCP连接后,发起HTTP请求 4.服务器响应HTTP请求，浏览器得到html代码 5.浏览器解析html代码，并请求html代码中的资源(如is、CSS、图片等) (先得到html代码，才能去找这些资源) 6.浏览器对页面进行渲染呈现给用户 7.服务过程完毕。关闭TCP连接,四次挥手 注:

1.DNS怎么找到域名的? DINS域名解析采用的是递归查询的方式，过程是，先去找DNS缓存->缓存找不到就去找根域名服务器->根域名又会去找下一级，这样递归香找之后，找到给我们的web浏览哭

什么是DNS 解析

DNS解析 (域名解析服务器) 将域名转换成ip地址 假定请求的是 www.baidu.com a)首先会搜索浏览器自身的DNS缓存(缓存时间比较短，大概只有1分钟，且只能容纳1000条缓存 b) 如果浏览器自身的缓存里面没有找到，那么浏览器会搜索操作系统windows自身的DNS缓存 c) 如果还没有找到，那么尝试从 hosts 文件里面去找 d)在前面三个过程都没获取到的情况下，就递归地去域名服务器去查找(就近查找)，具体过程如下

DNS优化两个方面: DNS缓存、DNS负载均衡(准备多台dns服务器,进行dns解析

三次握手和四次挥手

建立连接

三次握手 (1) 服务器啊，我是浏览器，我要和你建立连接 (2) 服务器看到了，好的，那么建立连接吧，我准备好了，你确定吗? (3) 浏览器:是的，我确定! 连接就建立成功 三次握手 = 连接的发起 + 双方的确认 image.png

四次挥手（客气挽留）

image.png 这和有礼貌的好友道别一样: (a: 客户端 b:服务端) 1、一开始A想要回家离开，但是呢? 怕B还有事情要交代，那么呢? 只好先向B打招呼，我要走了，请求停止交谈(请求断开连接 (此时，a到B的连接没有断开，依旧可以进行通伟) ; 2、同意A的请求，说好的，但是我这里可能还有一些话(数据)没说完。我检查看看，你等等，等我说完你再走。 3、B确实没啥要补充的了，就告知你我可以散伙了 4、A说好的，知道了，88;(B得知A走开了，关闭了自己的连接 ) 完整的一次 http 请求流程才算结束

http常⻅的状态码有哪些? 以及他们分别表示什么?

成功 2XX

image.png

重定向（3XX）

image.png 因为post请求, 是⾮幂等的, 从302中, 细化出了 303 和 307 简⽽⾔之:

  • 301 302 307 都是重定向
  • 304 协商缓存

客户端错误（4XX）

image.png

服务端错误（5XX）

image.png

关键渲染路径

  1. 构建DOM树
  2. 构建CSSOM树
  3. 合并DOM和CSSOM
  4. 布局

把display不为none的元素，进行布局

如果遇到图片、transform等属性，opacity等设置，还需要重绘。 image.png

keep-alive

早期HTTP/1.0在每次请求的时候，都要创建一个新的链接，而创建连接的过程需要消耗资源和时间，为了减少资源消耗，缩短响应时间，就需要复用已有的连接。 在后来的HTTP/1.0和HTTP/1.1中引入了复用链接的机制，也就是在请求头中加入Connection:keep-alive，以此告诉对象这个请求响应完成后不要关闭链接，下一次还用这个请求的连接进行后续交流。 协议规定，如果想保持连接，则需要在请求头中加上 Connection:keep-alive

keep-alive 的优点(复用连接) 。较少的 CPU 和内存的占用 (因为要打开的连接数变少了,复用了连接) 。减少了后续请求的延迟 (无需再进行握手) 缺点: 因为在处理的暂停期间，本来可以释放的资源仍旧被占用。请求已经都结束了,但是还一直连接着也不合适解决: Keep-Alive: timeout=5, max=100

  • timeout: 过期时间5秒 (对应httpd.conf里的参数是: KeepAliveTimeout)，max是最多一百次请求，强制断掉连接。
  • 就是在timeout时间内又有新的连接过来，同时max会自动减1，直到为0，强制断掉。
avatar
文章
阅读
粉丝