前端面试题之HTTP
从输入URL到页面加载发生了什么
参考答案
大致过程如下：
- DNS 解析：域名 -> IP地址；
- TCP 的连接；
- 浏览器向服务器发送 HTTP 请求；
- 服务器处理 HTTP 请求，并返回给浏览器；
- 浏览器解析渲染页面；
- 关闭连接；
参考资料
HTTP的状态码及含义
参考答案
可以笼统的概括为如下：
| 开头 | 含义 |
|---|---|
| 1xx | 请求已被接受，需要进一步处理。这类响应是临时响应 |
| 2xx | 请求成功 |
| 3xx | 重定向，需要进一步操作 |
| 4xx | 客户端错误 |
| 5xx | 服务器错误 |
常见的 HTTP 状态码：
| 状态码 | 含义 |
|---|---|
| 200 | 请求成功 |
| 301 | 永久重定向，资源（网页等）被永久转移到其他 URL |
| 302 | 临时重定向，请求的资源临时搬到其他位置 |
| 304 | 资源未修改 |
| 400 | 错误的请求 |
| 403 | 拒绝访问 |
| 404 | 请求的资源（网页等）不存在 |
| 405 | 客户端请求的方法错误 |
| 414 | 请求的 URL 过长 |
| 500 | 内部服务器错误 |
常见的http headers
参考答案
分为 Request headers 和 Response headers。
Request Headers：
| Header | 含义 |
|---|---|
| Accept | 浏览器可接收的数据格式 |
| Accept-Encoding | 浏览器可接收的压缩算法 |
| Accept-Language | 浏览器可接收的语言 |
| Connection | 决定当前的事务完成后，是否会关闭网络连接 |
| Cookie | 请求发送时，会把保存在该请求域名下的所有 cookie 值一起发送给服务器 |
| Host | 指明了请求将要发送到的服务器主机名和端口号 |
| User-Agent | 浏览器信息 |
| Content-Type | 发送数据的格式 |
| Referer | 包含一个 URL，用户从该 URL 代表的页面出发访问当前请求的页面 |
Response Headers：
| Header | 含义 |
|---|---|
| Cache-Control | 告诉所有的缓存机制是否可以缓存及哪种类型 |
| Content-Type | 返回数据的格式 |
| Content-Length | 返回数据的大小 |
| Content-Encoding | 返回数据的压缩算法 |
| Date | 原始服务器消息发出的时间 |
| Expires | 响应过期的日期和时间 |
| Last-Modified | 请求资源的最后修改时间 |
| ETag | 资源的唯一标识 |
| Location | 用来重定向接收方到非请求URL的位置来完成请求或标识新的资源 |
| Set-Cookie | 服务器端向客户端发送cookie |
参考资料
HTTP缓存有哪几种
参考答案
HTTP 缓存可分为两大类，分别是：强制缓存和协商缓存。
强制缓存在缓存数据未生效的情况下，是不需要再和服务器发生交互的；而协商缓存，顾名思义是需要进行比较判断是否可以使用缓存。
强制缓存的优先级高于协商缓存的
强制缓存：
强制缓存分两种情况，分别是 Expires 和 Cache-Control。
- Expires：它的值是服务器告诉浏览器的缓存过期时间的，是一个绝对时间，即如果下次请求时，如果当前距上次请求时间还未超过过期时间时，就直接使用缓存数据。但是存在部分问题：①客户端和服务器的时间不一致会出现问题；②在缓存未生效前，获取不到修改后的资源。
- Cache-Control：它是设置相对时间，就解决了 Expires 出现的问题。
Cache-Control 有以下可选值：
- no-cache：不直接使用缓存，根据新鲜度来使用缓存；
- no-store：不使用缓存，每次都是请求下载新资源；
- max-age：设置缓存存储的最大周期，超过这个时间就被认为过期；
- public / private：是否只能被单个用户使用，默认值为 private；
- must-revalidate：每次访问需要缓存校验。
注意：Cache-Control 优先级高于 Expires。
协商缓存：
它是服务器端缓存策略，相关属性有：ETag / if-Not-Match、Last-Modified / If-Modified-Since。
执行流程如下：
- 当浏览器第一次向服务器发送请求时，会在响应头中返回协商缓存的头属性：ETag 和 Last-Modified，其中 ETag 返回的是一个 hash 值，Last-Modified 返回的是 GMT 格式的最后修改时间。
- 浏览器在第二次发送请求的时候，会在请求头中带上与 ETag 对应的 if-Not-Match，其值就是响应头中返回的 ETag 的值，再带上 Last-Modified 对应的 If-Modified-Since。服务器在接收到这两个参数后会做比较，如果返回的是 304 状态码，则说明请求的资源没有修改，浏览器可以直接在缓存中取数据，否则，服务器会直接返回数据。
他们的优先级是：Cache-Control > Expires > ETag > Last-Modified。
Cookie、Session、LocalStorage之间的区别
参考资料
Cookie、session 和 localStorage、以及 sessionStorage 之间的区别
cookie、session、localStorage 分别是什么？有什么作用？
cookie 与 Session 机制区别以及 Cookie SessionStorage LocalStorage 异同
GET和POST的区别
参考答案
- GET 请求一般去请求获取数据，POST 请求一般发送数据到后台使用；
- GET 请求的参数在 url 上可见，而 POST 请求的参数放在 Request body 中；
- GET 请求参数的长度有限制，POST 请求没有长度限制；
- GET 请求刷新浏览器或回退没有影响，POST 请求回退会重新提交数据；
- GET 请求可被缓存，POST 请求不会；
- GET 请求保留在浏览器历史记录里，POST 请求不会；
- GET 请求可被收藏为书签，POST 请求不能；
- GET 请求只能进行 url 编码，POST 请求支持多种编码方式；
- GET 请求只需要一个报文，POST 请求需要两个及以上；
其实这两种请求最本质的区别就是语义不同，GET 请求是获取数据，而 POST 请求是提交数据
HTTP与HTTPS的区别
参考答案
- http 是以 http:// 开头，https 是以 https:// 开头；
- http 默认使用 80 端口，而 https 默认使用 443 端口；
- http 是超文本传输协议，信息采用明文传输，而 https 则是具有安全性 SSL 加密传输协议；
- https 协议需要到证书颁发机构 CA 申请证书，大多数情况下需要一定费用；
描述一下TCP的三次握手和四次挥手
参考答案
其他资料
http1与http2的区别
参考答案
- 新的二进制格式（Binary Format），HTTP1.x 的解析是基于文本。基于文本协议的格式解析存在天然缺陷，文本的表现形式有多样性，要做到健壮性考虑的场景必然很多，二进制则不同，只认 0 和 1 的组合。基于这种考虑 HTTP2.0 的协议解析决定采用二进制格式，实现方便且健壮。
- 多路复用（MultiPlexing），即连接共享，即每一个 request 都是是用作连接共享机制的。一个 request 对应一个 id，这样一个连接上可以有多个 request，每个连接的 request 可以随机的混杂在一起，接收方可以根据 request 的 id 将 request 再归属到各自不同的服务端请求里面。
- header 压缩，HTTP1.x 的 header 带有大量信息，而且每次都要重复发送，HTTP2.0 使用 encoder 来减少需要传输的 header 大小，通讯双方各自 cache 一份 header fields 表，既避免了重复 header 的传输，又减小了需要传输的大小。
- 服务端推送（server push），同 SPDY 一样，HTTP2.0 也具有 server push 功能。
更多面试题请移步至 我的新博客 - 持续更新地址
