前端JS知识点

31.cookie和session的区别

session:
它的数据是放在服务器上的,他比cookie来说相对安全,不会造成被他人盗用字段,因为他大了,session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能考虑到减轻服务器性能方面，应当使用cookie。在存储大小上,Session对象没有对存储的数据量的限制，其中可以保存更为复杂的数据类型,使用上session很容易失效,用户体验很差;
请描述一下 cookies sessionStorage和localstorage区别
（1）
相同点：都存储在客户端
不同点：1.存储大小
· cookie数据大小不能超过4k。
· sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
（2）有效时间
· localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
· sessionStorage 数据在当前浏览器窗口关闭后自动删除。
· cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
（3）数据与服务器之间的交互方式
· cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
· sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

32.Http和Https区别（高频）

1)`HTTP` 的URL 以http:// 开头，而HTTPS 的URL 以https:// 开头
2)`HTTP` 是不安全的，而 HTTPS 是安全的
3)`HTTP` 标准端口是80 ，而 HTTPS 的标准端口是443
4)`在OSI` 网络模型中，HTTP工作于应用层，而HTTPS 的安全传输机制工作在传输层	
5)`HTTP` 无法加密，而HTTPS 对传输的数据进行加密
6)`HTTP`无需证书，而HTTPS 需要CA机构wosign的颁发的SSL证书

常见的HTTP状态码
2开头 （请求成功）表示成功处理了请求的状态代码。

200 （成功） 服务器已成功处理了请求。 通常，这表示服务器提供了请求的网页。
201 （已创建） 请求成功并且服务器创建了新的资源。
202 （已接受） 服务器已接受请求，但尚未处理。

3开头(请求被重定向)表示要完成请求,需要进一步操作.通常,这些状态代码用来重定向。

300 （多种选择） 针对请求，服务器可执行多种操作。
301 （永久移动） 请求的网页已永久移动到新位置。
302 （临时移动） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。
303 （查看其他位置） 请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。

4开头 （请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理。

400 （错误请求） 服务器不理解请求的语法。
401 （未授权） 请求要求身份验证.对于需要登录的网页，服务器可能返回此响应。
403 （禁止） 服务器拒绝请求。
404 （未找到） 服务器找不到请求的网页。
408 （请求超时） 服务器等候请求时发生超时。

5开头（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。

500 （服务器内部错误） 服务器遇到错误，无法完成请求。
501 (尚未实施)服务器不具备完成请求的功能.例如,服务器无法识别请求方法时可能会返回此代码。
502 （错误网关） 服务器作为网关或代理，从上游服务器收到无效响应。
503 （服务不可用） 服务器目前无法使用(由于超载或停机维护).通常,这只是暂时状态。
504 （网关超时） 服务器作为网关或代理，但是没有及时从上游服务器收到请求。
505 （HTTP 版本不受支持） 服务器不支持请求中所用的 HTTP 协议版本。

33.真实DOM:

什么是虚拟DOM？
虚拟DOM(VDOM)是真实DOM在内存中的表示。UI的表示形式保存在内存中，并与实际的DOM同步。这是一个发生在渲染函数被调用和元素在屏幕上显示之间的步骤，整个过程被称为调和。为什么虚拟dom会提高性能?虚拟dom相当于在js和真实dom中间加了一个缓存，利用domdiff算法避免了没有必要的dom操作，从而提高性能。

34.Vue 组件间通信有哪几种方式？

（1）props / $emit 适用 父子组件通信

（2）ref 与 $parent / $children 适用 父子组件通信

ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；
     如果用在子组件上，引用就指向组件实例
$parent / $children：访问父 / 子实例

（3）EventBus （$emit / $on） 适用于 父子、隔代、兄弟组件通信

这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件

（4）$ attrs / $ listeners 适用于 隔代组件通信

$attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 ( class 和 style 除外 )。
        当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 ( class 和 style 除外 )，
        并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 inheritAttrs 选项一起使用。
$listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。
        它可以通过 v-on="$listeners" 传入内部组件

（5）provide / inject 适用于 隔代组件通信

祖先组件中通过 provider 来提供变量，然后在子孙组件中通过 inject 来注入变量。 provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。

（6）Vuex + localstorage

vuex 是 vue 的状态管理器，存储的数据是响应式的。但是并不会保存起来，刷新之后就回到了初始状态.
具体做法应该在vuex里数据改变的时候把数据拷贝一份保存到localStorage里面，刷新之后，如果localStorage里有保存的数据，取出来再替换store里的state。
这里需要注意的是：由于vuex里，我们保存的状态，都是数组，而localStorage只支持字符串，所以需要用JSON转换。

35.Vue 中的 key 有什么作用？

Vue 中 key 的作用是：key 是为 Vue 中 vnode 的唯一标记，通过这个 key，我们的 diff 操作可以更准确、更快速
更准确：因为带 key 就不是就地复用了，在 sameNode 函数 a.key === b.key 对比中可以避免就地复用的情况。所以会更加准确。
更快速：利用 key 的唯一性生成 map 对象来获取对应节点，比遍历方式更快