喜马拉雅前端面经整理
ES6新的特性
介绍Promise
Promise有几个状态
说一下闭包
闭包就是能够读取其他函数内部变量的函数。
由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，
因此可以把闭包简单理解成"定义在一个函数内部的函数"。
所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
闭包的用处
- 可以读取函数内部的变量
- 让这些变量的值始终保持在内存中
React的生命周期
componentWillReceiveProps的触发条件是什么
React16.3对生命周期的改变
介绍下React的Filber架构
画Filber渲染树
介绍React高阶组件
父子组件之间如何通信
Redux怎么实现属性传递，介绍下原理
React-Router版本号
网站SEO怎么处理
介绍下HTTP状态码
HTTP状态码的英文为HTTP Status Code，可以让我很方便的了解到请求的所在状态，今天有时间整理了一下，方便自己查阅。
HTTP状态码分类：
HTTP状态码由三个十进制数字组成，第一个十进制数字定义了状态码的类型，后两个数字没有分类的作用。HTTP状态码共分为5种类型：
HTTP状态码分类
1xx 信息，服务器收到请求，需要请求者继续执行操作
2xx 成功，操作被成功接收并处理
3xx 重定向，需要进一步的操作以完成请求
4xx 客户端错误，请求包含语法错误或无法完成请求
5xx 服务器错误，服务器在处理请求的过程中发生了错误
1XX：信息状态码
状态码 状态码英文名称 中文描述
100 Continue 继续。客户端应继续其请求
101 Switching Protocols 切换协议。服务器根据客户端的请求切换协议。只能切换到更高级的协议，例如，切换到HTTP的新版本协议
2XX：成功状态码
状态码 状态码英文名称 中文描述
200 OK 请求成功。一般用于GET与POST请求
201Created 已创建。成功请求并创建了新的资源
202 Accepted 已接受。已经接受请求，但未处理完成
203 Non-Authoritative Information 非授权信息。请求成功。但返回的meta信息不在原始的服务器，而是一个副本
204 No Content 无内容。服务器成功处理，但未返回内容。在未更新网页的情况下，可确保浏览器继续显示当前文档
205 Reset Content 重置内容。服务器处理成功，用户终端（例如：浏览器）应重置文档视图。可通过此返回码清除浏览器的表单域
206 Partial Content 部分内容。服务器成功处理了部分GET请求
3XX：重定向状态码
状态码 状态码英文名称 中文描述
300 Multiple Choices 多种选择。请求的资源可包括多个位置，相应可返回一个资源特征与地址的列表用于用户终端（例如：浏览器）选择
301 Moved Permanently 永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替
302 Found 临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI
303 See Other 查看其它地址。与301类似。使用GET和POST请求查看
304 Not Modified 未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源
305 Use Proxy 使用代理。所请求的资源必须通过代理访问
306 Unused 已经被废弃的HTTP状态码
307 Temporary Redirect 临时重定向。与302类似。使用GET请求重定向
4XX：客户端错误状态码
状态码 状态码英文名称 中文描述
400 Bad Request 客户端请求的语法错误，服务器无法理解
401 Unauthorized 请求要求用户的身份认证
402 Payment Required 保留，将来使用
403 Forbidden 服务器理解请求客户端的请求，但是拒绝执行此请求
404 Not Found 服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面
405 Method Not Allowed 客户端请求中的方法被禁止
406 Not Acceptable 服务器无法根据客户端请求的内容特性完成请求
407 Proxy Authentication Required 请求要求代理的身份认证，与401类似，但请求者应当使用代理进行授权
408 Request Time-out 服务器等待客户端发送的请求时间过长，超时
409 Conflict 服务器完成客户端的 PUT 请求时可能返回此代码，服务器处理请求时发生了冲突
410 Gone 客户端请求的资源已经不存在。410不同于404，如果资源以前有现在被永久删除了可使用410代码，网站设计人员可通过301代码指定资源的新位置
411 Length Required 服务器无法处理客户端发送的不带Content-Length的请求信息
412 Precondition Failed 客户端请求信息的先决条件错误
413 Request Entity Too Large 由于请求的实体过大，服务器无法处理，因此拒绝请求。为防止客户端的连续请求，服务器可能会关闭连接。如果只是服务器暂时无法处理，则会包含一个Retry-After的响应信息
414 Request-URI Too Large 请求的URI过长（URI通常为网址），服务器无法处理
415 Unsupported Media Type 服务器无法处理请求附带的媒体格式
416 Requested range not satisfiable 客户端请求的范围无效
417 Expectation Failed 服务器无法满足Expect的请求头信息
5XX：服务端错误状态码
状态码 状态码英文名称 中文描述
500 Internal Server Error 服务器内部错误，无法完成请求
501 Not Implemented 服务器不支持请求的功能，无法完成请求
502 Bad Gateway 作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接收到了一个无效的响应
503 Service Unavailable 由于超载或系统维护，服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中
504 Gateway Time-out 充当网关或代理的服务器，未及时从远端服务器获取请求
505 HTTP Version not supported 服务器不支持请求的HTTP协议的版本，无法完成处理
403、301、302是什么
缓存相关的HTTP请求头
简单的总结来说，在HTTP中与网页缓存相关的HTTP头部信息分为以下三组：
Last-Modified和If-Modified-Since
ETags和If-None-Match
Expires和Cache-Control
1、Last-Modified和If-Modified-Since
在HTTP中Last-Modified与If-Modified-Since都是用于记录页面最后修改时间的HTTP头信息，二者的区别如下：
Last-Modified是由服务器往客户端发送的HTTP头；
If-Modified-Since是由客户端往服务器发送的头。
如上图所示，用户通过浏览器第一次请求相关网页时，服务器会返回一个Last-Modified:Mon, 26 Apr 2019 13:22:17 GMT这样的请求头；当用户再次访问对应的网页时，浏览器会将服务器响应的Last-Modified值赋给If-Modified-Since，接下来，浏览器会带着If-Modified-Since:Mon, 26 Apr 2019 13:22:17 GMT这样的请求头去访问服务器应用。服务器收到请求后，会将这个对应网页的更新时间与If-Modified-Since进行比对以决定是返回304重定向码还是200成功码。
2、ETags和If-None-Match
通过上面的总结，我们知道Last-Modified和If-Modified-Since只能判断资源的最后修改时间，以此来决定是否使用缓存。而ETags和If-None-Match则比较更高级一点。通过ETags和If-None-Match，我们可以对资源的任何属性进行判断，以此判断是否使用缓存。同样的，我们也需要记住ETags和If-None-Match的两个知识点：
ETags是由服务器往客户端发送的HTTP头；
If-None-Match是由客户端往服务器发送的头。
请求逻辑与Last-Modified和If-Modified-Since大致一样，不同之处就是在服务器端的判断。比如有些特定的场合下，一些静态的文件，可能会被频繁的更新，但是文件内容没有变化，这时候如果使用Last-modified，服务器端始终返回最新的内容给浏览器，而Etag是根据文件内容来的，如果内容没有变化的话，始终会让浏览器使用本地缓存的文件。所以，使使用ETag可以更好的避免一些不必要的服务器相应。
3、Expires和Cache-Control
添加Expires头能有效的利用浏览器的缓存能力来改善页面的性能，能在后续的页面中有效避免很多不必要的HTTP请求，WEB服务器使用Expires头来告诉Web客户端它可以使用一个组件的当前副本，直到指定的时间为止。例如：Expires：Thu，15 Apr 2019 20：00：00 GMT;这个告诉浏览器缓存有效性持续到2019年4月15日为止，在这个时间之内相同的请求使用缓存，这个时间之外使用HTTP请求。与上面说到的Last-Modified和If-Modified-Since和ETags和If-None-Match相比，是能够节省一点带宽的，因为可能会少发一次HTTP请求。
但是Expires有一个明显的缺点；由于返回的到期时间是服务器端的时间，这样存在一个问题，如果客户端的时间与服务器的时间相差很大，那么误差就很大，所以在HTTP 1.1版开始，使用Cache-Control:max-age=秒替代。如果Cache-Control与Expires同时存在，Cache-Control生效。
由于现在基本上都在使用Cache-Control，所以有必要对Cache-Control进行详细的总结一下。
Cache-Control的可缓存性：
public ： HTTP返回的时候在Heaher中设置Cache-Control的值为public。它代表，这个HTTP请求它返回的内容所经过的任何路径中，包括中间的一些HTTP代理服务器以及发出请求的客户端浏览器，都可以进行对返回内容的缓存操作
private ： 发起请求的浏览器才能使用返回数据的缓存
no-cache ： 可以在本地或者proxy服务器进行缓存，每次发起请求都要去服务器验证，服务器返回可以使用缓存，才可以真正使用本地缓存，任何节点都不能直接使用缓存
Cache-Control的有效期
**max-age=seconds ：**最常用模式，表示过期的秒数
**s-maxage=seconds ：**只有在代理服务器才会生效，且代理服务器会优先使用s-maxage
**max-stale=seconds ：**它是发起请求方，主动去带着的header；在max-age过期后，但还在max-stale的有效期内，还可以使用过期的缓存，不需要去原服务器请求新的内容
Cache-Control的其它取值
**no-store ：**浏览器或者proxy服务器都不能存返回数据的缓存，永远都需要去服务器请求新的数据
**no-transform ：**主要用在proxy服务器，表示不要去随意改动返回的内容，比如压缩什么的
介绍HTTPS
ssl：
https://www.bilibili.com/video/BV1w4411m7GL
HTTPS怎么建立安全通道
前端性能优化（JS原生和React）
1、路由懒加载
用const Foo = () => import(’./Foo.vue’)代替import ‘./Foo.vue’；
2、http连接优化
减少http请求：
合理使用缓存：
**使用字体图标：**尽量所使用的字体图标或者SVG图标来代替传统png图，渲染速度快
图片懒加载：
3、组件优化
4、代码优化
第三方引入优化 ：去除不必要的引入，如jq
基础优化 ：如频繁切换用v-show，否组用v-if、提取公用的方法放在js文件中、全局style尽量抽象提高复用率
5、打包优化：
https://www.cnblogs.com/veritas-sj/p/10518046.html
用户体验做过什么优化
对PWA有什么了解
对安全有什么了解
介绍下数字签名的原理
前后端通信使用什么方案
websocket、ajax
RESTful常用的Method
1、GET[select] 请求会向数据库发索取数据的请求，从而来获取信息,其只是用来查询一下数据，不会修改、增加数据，不会影响资源的内容。无论进行多少次操作，结果都是一样的。
2、PUT[update] 请求是向服务器端发送数据的，从而改变信息，其用来修改数据的内容，但是不会增加数据的种类等，无论进行多少次PUT操作，其结果并没有不同。
3、POST[insert] 请求同PUT请求类似，都是向服务器端发送数据的，但是该请求会改变数据的种类等资源.几乎目前所有的提交操作都是用POST请求的。
4、DELETE[delete] 请求是用来删除某一个资源的。
POST主要作用在一个集合资源之上的（url），而PUT主要作用在一个具体资源之上的（url/xxx）.如URL可以在客户端确定，那么可使用PUT，否则用POST。
一个URL地址，它用于描述一个网络上的资源，而HTTP中的GET，POST，PUT，DELETE就对应着对这个资源的查，改，增，删4个操作。
介绍下跨域
1、JSONP跨域
2、跨域资源共享（CORS）
3、nginx代理跨域
4、nodejs中间件代理跨域