牛客网前端工程师面经汇总—HTTP/HTML/浏览器（二）

一、浏览器状态码

1. **200 OK 请求成功。**一般用于GET与POST请求

2. **201 Created 已创建。**成功请求并创建了新的资源

3. **202 Accepted 已接受。**已经接受请求，但未处理完成

4. **203 Non-Authoritative Information 非授权信息。**请求成功。但返回的meta信息不在原始的服务器，而是一个副本

5. **204 No Content 无内容。**服务器成功处理，但未返回内容。在未更新网页的情况下，可确保浏览器继续显示当前文档

6. **205 Reset Content 重置内容。**服务器处理成功，用户终端（例如：浏览器）应重置文档视图。可通过此返回码清除浏览器的表单域

7. **206 Partial Content 部分内容。**服务器成功处理了部分GET请求

8. **300 Multiple Choices 多种选择。**请求的资源可包括多个位置，相应可返回一个资源特征与地址的列表用于用户终端（例如：浏览器）选择

9. **301 Moved Permanently 永久移动。**请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替

10. **302 Found 临时移动。**与301类似。但资源只是临时被移动。客户端应继续使用原有URI

11. **303 See Other 查看其它地址。**与301类似。使用GET和POST请求查看

12. **304 Not Modified 未修改。**所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源

13. **305 Use Proxy 使用代理。**所请求的资源必须通过代理访问

14. 306 Unused 已经被废弃的HTTP状态码

15. **307 Temporary Redirect 临时重定向。**与302类似。使用GET请求重定向

16. 400 Bad Request 客户端请求的语法错误，服务器无法理解

17. 401 Unauthorized 请求要求用户的身份认证

18. 402 Payment Required 保留，将来使用

19. 403 Forbidden 服务器理解请求客户端的请求，但是拒绝执行此请求

20. **404 Not Found 服务器无法根据客户端的请求找到资源（网页）。**通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面

21. 500 Internal Server Error 服务器内部错误，无法完成请求

22. 501 Not Implemented 服务器不支持请求的功能，无法完成请求

23. 502 Bad Gateway 作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接收到了一个无效的响应

24. 503 Service Unavailable 由于超载或系统维护，服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中

25. 504 Gateway Time-out 充当网关或代理的服务器，未及时从远端服务器获取请求

26. 505 HTTP Version not supported 服务器不支持请求的HTTP协议的版本，无法完成处理

二、get和post的区别

1. get参数通过url传递，post通过请求体传递。
2. get的参数有长度限制，post没有。
3. get请求只能进行url编码，post支持多种编码方式。
4. 浏览器会对get请求进行缓存，post不会被保留。
5. get产生一个tcp数据包，post产生两个tcp数据包。

三、浏览器缓存

1. 缓存机制：

   （1）首先浏览器判断这个资源是否有缓存，如果没有就正常请求。

   （2）如果有缓存，判断是否过期。如果没有过期，则直接使用，返回状态码200。

   （3）如果浏览器的缓存过期了，它会请求服务器，服务器进行校验是否发生了变化，如果没有发生变化，返回304告诉浏览器。

   （4）如果数据发生了变化，服务器返回200，并携带新的内容。

2. 浏览器缓存分类：

   （1）协商缓存：每次读取缓存时，先到服务器端去验证一下是否有改变，如果有就获取新的，没有从缓存中读取，响应code为304。这里的 header 中的信息指的是 Last-Modify/If-Modify-Since 和 ETag/If-None-Match。

   （2）强制缓存：只要缓存没过有效期，就强制读取缓存，响应code为200。该类缓存必定是要持久化到disk的。浏览器在加载资源时，会先根据本地缓存资源的 header 中的信息判断是否命中强缓存，如果命中则直接使用缓存中的资源不会再向服务器发送请求。这里的 header 中的信息指的是 expires 和 cahe-control.

3. 匹配流程

   （1）浏览器发送请求前，根据请求头的expires和cache-control判断是否命中（包括是否过期）强缓存策略，如果命中，直接从缓存获取资源，并不会发送请求。如果没有命中，则进入下一步。

   （2）没有命中强缓存规则，浏览器会发送请求，根据请求头的last-modified和etag判断是否命中协商缓存，如果命中，直接从缓存获取资源。如果没有命中，则进入下一步。

   （3）如果前两步都没有命中，则直接从服务端获取资源。

4. 三级缓存原理：

   （1）先在内存中查找,如果有,直接加载。

   （2）如果内存中不存在,则在硬盘中查找,如果有直接加载。

   （3）如果硬盘中也没有,那么就进行网络请求。

   （4）请求获取的资源缓存到硬盘和内存。

5. 浏览器缓存的优点：

   （1）减少了冗余的数据传输

   （2）减少了服务器的负担，大大提升了网站的性能

   （3）加快了客户端加载网页的速度

四、HTML5新增的元素

1. 首先html5为了更好的实践web语义化，增加了header，footer，nav,aside,section等语义化标签，在表单方面，为了增强表单，为input增加了color，emial,data ,range等类型，在存储方面，提供了sessionStorage，localStorage,和离线存储，通过这些存储方式方便数据在客户端的存储和获取，在多媒体方面规定了音频和视频元素audio和vedio，另外还有地理定位，canvas画布，拖放，多线程编程的web worker和websocket协议

五、在地址栏里输入一个URL,到这个页面呈现出来，中间会发生什么

1. [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iDgRtblz-1580212819387)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20200128195159588.png)]
2. [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hn2X2b98-1580212819388)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20200128194950632.png)]

六、常见的HTTP的头部

1. 可以将http首部分为通用首部，请求首部，响应首部，实体首部
2. 通用首部表示一些通用信息，比如date表示报文创建时间
3. 请求首部就是请求报文中独有的，如cookie，和缓存相关的如if-Modified-Since
4. 响应首部就是响应报文中独有的，如set-cookie，和重定向相关的location
5. 实体首部用来描述实体部分，如allow用来描述可执行的请求方法，content-type描述主题类型，content-Encoding描述主体的编码方式。

七、 HTTP2.0 的特性

1. 内容安全，应为http2.0是基于https的，天然具有安全特性，通过http2.0的特性可以避免单纯使用https的性能下降
2. 二进制格式，http1.X的解析是基于文本的，http2.0将所有的传输信息分割为更小的消息和帧，并对他们采用二进制格式编码，基于二进制可以让协议有更多的扩展性，比如引入了帧来传输数据和指令
3. 多路复用，这个功能相当于是长连接的增强，每个request请求可以随机的混杂在一起，接收方可以根据request的id将request再归属到各自不同的服务端请求里面，另外多路复用中也支持了流的优先级，允许客户端告诉服务器那些内容是更优先级的资源，可以优先传输。

八、cache-control的值有哪些

1. cache-control是一个通用消息头字段被用于HTTP请求和响应中，通过指定指令来实现缓存机制，这个缓存指令是单向的，常见的取值有private、no-cache、max-age、must-revalidate等，默认为private。

九、浏览器在生成页面的时候，会生成那两颗树

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