前端面试题总结

目录
1.position定位问题
2.session、cookie、sessionStorage、localStorage
3.vue中使用v-for为什么要使用key？使用key为什么不能用index下标作为Key值绑定而要用唯一的ID值？

1.position定位问题

position: relative 、absolute、 fixed 、static(默认) inherit（继承父元素的positon定位）、 sticky

position常用的值有

relative 相对定位 相对于自身定位

absolute 绝对定位 相对于父元素定位

fixed 固定定位 相当于浏览器窗口定位

sticky 粘性定位

sticky 粘性定位

粘性定位之前没有用过，这里做一些补充学习。

sticky粘性定位是position：relative 和 position: fixed的结合，设定sticky定位时，必须设定 top bottom left right 四个阙值中的一个。

若没有设置四个阙值sticky粘性定位会和relative作用相同，同时设定top和bottom，top优先级高，同时设定left和right，left优先级高。

例如:
div{position:sticky; top:10px;}

随着浏览器窗口的滚动，当该div距离顶部大于10px时，定位表现为 relative，当小于10px时，定位表现为fixed。

父子div同时设定position:absoulte 子div相对于父div定位

2.session、cookie、sessionStorage、localStorage

2.1 session、cookie

seesion cookie的区别

token补充

cookie

cookie 存储在客户端 （用户操作）,cookie可存储大小为4096,cookie中只能存储字符串，且一般浏览器最多存储20个cookie，这样，当cookie过多时就要将存储的信息转化为数组，再转化为字符串存储。cookie存储对象或数组时最好使用json串存储，不然在后期获取的时候可能会有问题。

http协议是无状态协议，客户端与服务器建立接连后，断开连接再重新连接的时候,服务器不能识别是你回来了,因此需要身份识别。

每次访问服务器的时候携带cookie可作为唯一标识符，这样服务器就可以根据cookie中的信息识别用户的身份，并显示个性化信息。

客户端访问服务器的时候会先发送一个http请求

服务器会返回一个http响应的客户端，并携带cookie信息

客户端保存cookie信息，并再接下来的http请求中携带cookie信息发起访问

服务器根据cookie识别用户身份

cookie存储安全性不高，application中可以直接查看所有cookie内容

2.2 session

session 储存在服务端

客户端访问服务器

服务器返回客户端每一个用户一个专属的sessionID

服务器把seesionID和用户操作等相关信息一起存储起来，这就是session。

客户端再次访问服务器的时候，携带cookie请求，cookie中包含sessionID，这样服务器就能唯一识别用户。

根据客户端请求时携带的sessionID，服务器返回相应的内容给客户端。

session的安全性高，但是对服务器的存储压力会比较大，因为session要存储多个用户的信息。

2.3 sessionStorage 创建、获取、删除

sessionStorage.setIem(key,value) 保存

sessionStorage.getItem(key) 获取

sessionStorage.removeItem(key) 删除单个sessionStorage

sessionStorage.clear() 删除全部sessionStorage

2.4 localStorage 创建、获取、删除

localStorage.setItem(key,value) 保存

localStorage.getItem(key) 获取

localStorage.removeItem(key) 删除单个localStorage

localStorage.clear() 删除全部localStorage

sessionStorage 关闭浏览器之后就会被清除，而localSotrage不主动删除会一直存在于浏览器缓存中

sessionStorage和localStorage属于 web Storage 可存储大小为5M

3.vue中使用v-for为什么要使用key？使用key为什么不能用index下标作为Key值绑定而要用唯一的ID值？

3.1 vue中使用v-for为什么要使用key？

vue中使用Key是因为vue的核心是数据驱动，即不操作dom仅操作数据实现视图更新，而这一切是由于vue中有一套虚拟的DOM，进行视图更新时，基于diff算法，对虚拟的DOM进行比较，因此绑定key能大大提高更新DOM的效率。

当不绑定key时，控制台会有警告提醒，提示需要绑定key值。

3.2 使用key为什么不能用index下标作为Key值绑定而要用唯一的ID值？

举例说明

<template>
<ul v-for=(item,index) in lists :key="index">
<li>{{item.val}}</li>
</ul>
</template>

data() {
 return{
 lists:[
{id:1,val:'person1'},
{id:2,val:'person2'},
{id:3,val:'person3'},
{id:4,val:'person4'},
]
}
}

key id val
0 1 person1
1 2 person2
2 3 person3
3 4 person4

当修改person4的时候直接修改没有影响，若删除person2，来看一下变化

key id val
0 1 person1
1 3 person3
2 4 person4

由以上变化可以看出，person2之后的key值都反正了变化，key值变了，就需要重新渲染，这样性能就会大大降低。

因此不能使用index作为key值绑定的原因就在于，列表项中非末尾项发生改变时，其他项的index值会发生改变，key值也会发生改变，这样会导致性能降低，DOM更新比较多，因此要绑定唯一的ID作为key值，这样不会受其他项删除和修改的影响，减少页面的重排。