写在前面的话&前端日常面试问题合集

写在前面的话

我开始记录博客的原因？

身为一个转行从业IT的社畜，在刚开始小白时期是非常焦虑的，因为并不是计算机专业出身，在刚开始在记忆和理解程序语言很吃力，所以基本就是面向对象编程（ps：我可不是自己new 出来的 ，骄傲叉腰）和面向百度编程。

后来，被迫填鸭式的学习过程逐渐变成自主深入学习，慢慢的开始会new对象了，而且还会用，哈哈哈，除了面向百度也会面向谷歌、bing、stackoverflow…

在这个时候，突然就想着记录一下自己日常工作中遇到的问题，整理自己学习前端开发中的过程。虽然深度也不是很深吧，但是也是竭尽所能（还是要努力啊！），如果自己踩过的坑能帮到别人当然更好了。

所以，才有了之后的文章。

虽然我不是大佬，但对于其他和我一样跨行业工作的IT民工，我有一些粗浅的建议：

• 记录博客，真的有助于记忆和学习，好记性不如烂笔头这句老话诚不欺我，现在没有本子笔，博客就是很好的工具；
• 非计算机专业在刚开始开发时候确实很不友好，你根本不懂你为什么出BUG了，但是，不要害怕，程序开发最后都会转化为经验，下一次你就可以自己独立解决BUG了；
• 这个行业学习很重要！而且不是浅显的学，还需要逐渐深入，知其然也要知其所以然，这也是我记录博客的一大原因，自己学老是忘记，跟着整理成博客就不会忘；
• 最后还是加油吧！

我会持续更新，哈哈哈，毕竟人的一生就是在学习成长的过程~

励志的话结束，剩下部分只记录自己偶尔日常思考的问题和解决思路，排版什么的就忽略哈。主要也是面试会问（不然面试过不了，唉，被生活压弯了腰）！

最后，如果你还有什么问题或者其他建议给我~可以在评论区里留言哦 ~当然 ~如果有好的工作也可以推荐给我哦，坐标北京！

前端问题

1. position有几个属性，各自的体征是什么？

relative：相对定位，相对于自身定位。不脱离文本流 。
absolute：绝对定位，相对于父集，如果父集没有relative，就一层一层往上找，脱离文本流。
fixed:固定定位，相对于视口定位。脱离文本流，不占位置 。
static：常规流式布局，不脱离文本流 。
sticky：粘性定位，例：先给父元素设置高度，当父元素滚动100位置时候才会显示的。

2. vue中循环为什么要使用key？

1.key相当于唯一标识符，在渲染数组的时候，给原数组浅拷贝新增项或者删除项，如果不加key,可能会出现选择错误的bug。2.更有效的更新dom。
这个原因是：vue更新内层原理使用了diff算法，使用的是虚拟dom树去一层层对比，就是取出同层结构的前后dom树对比，如果一样就更新，如果不一样就把之前的dom替换掉然后更新。有了标识，就可以更好的定位到位置去操作虚拟dom.

浅显来说就是：[1,2,3]–>[1,3]删除了第二项，没有唯一标识时计算机的理解是：1不变，2变成了3,3被删除了。有了 key：计算机理解为把key：2的项删除了。

基于以上结论，如果是涉及到操作数据，最好不要用index作为key，因为索引会随着数组的改变而改变，简单的html展示还是可以使用index的。 以上：key == id==唯一标识！

3. cookie和session，还有webStorage之间的区别？各自保存在浏览器哪个地方？cookie必须去设置吗？后台可以自己去操作cookie吗？

按功能分

因为浏览器是无状态的，他不会分辨你是哪个用户，所以当你访问一个网站的时候，服务器或客户端会给你一个标识，你携带着这个标识就可以访问当前网站的其他页面，也不用登录或者重新请求标识，或者在你下次访问网站的时候来根据标识给你推送你之前存储或浏览的一些信息，就好比是用户的身份证，而这个标识可以分为三种方式，来完成：

• cookie：客户端可以去操作设置的标识，把cookie附在http请求头中发送给服务器，以键值对形式存在，如果没有设置过期时间，则存储在内存中，浏览器关闭cookie就删除掉。如果设置了过期时间，就存在硬盘中，下次访问可以直接发送给服务器，直到时间过期。

• session：服务器端来设置标识，当客户端首次请求的时候，服务器端给当前用户新建一个session ID，并存储在客户端的cookie中，在随后的请求头中都携带session ID。当客户端再次访问网站，如果有这个id，服务器就根据id去操作，没有则新建id给用户。

  session存在服务器中，但是如果没设置cookie失效时间，浏览器关闭cookie失效，ses随即sion失效，但服务器并不会删除，只是找不到了。但由于关闭浏览器不会导致session被删除，迫使服务器为session设置了一个失效时间通常为20分钟，当距离客户端上一次使用session的时间超过这个失效时间时，服务器就可以以为客户端已经停止了活动，才会把session删除以节省存储空间

  由于：cookie可以被禁止，如果被禁后，可以重写url,把sessionId拼接到url后。

• token：是随着单页面的发展而出现的产物，当你登录一个网站，每一个单页面请求都需要验证你是不是当前用户，不是就退出，这样频繁验证的方式很浪费，所以衍生出了token 令牌。
  通俗理解：当你登录一个网站后，服务器会给当前客户端签发一个通行证，客户端再每一个请求的时候把这个通行证携带上，服务器一看你的通行证是正确的，就让你通过了。（就和进公司门卫看你工牌一样），通常token存在localStorage或者cookie中

• cookie和token的比较

  • 状态：cookie是有状态的必须同时保存在客户端和服务器中。token无状态，服务器只负责签发和验证。
  • 跨域：cookie是单域的，a.com和b.com不能共访问同一个cookie。token可以跨域，服务器只要验证成功，就可以给你信息。
  • 存储信息：cookie通常存seesion Id，或者其他键值对形式的参数，还有限制，token可以存所有合规的json格式数据。
  • 兼容性：cookie web端支持，移动端部分不支持。token移动端都支持。
  • 安全性：token防止解决csrf 攻击。cookie不是很安全，别人可以分析存放在本地的cookie并进行cookie欺骗。

按照存储方式分

cookie：携带在请求头中，单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
sessionStorage：存在本地内存，是用户从打开回话窗到关闭会话窗这一段时间有效，关闭之后存的数据就会被删除。
localStorage：存在本地内存，会一直存在浏览器中 除非人工清除。

Web Storage拥有setItem,getItem,removeItem,clear等方法。
cookie需要前端开发者自己封装setCookie，getCookie。

4. csrf 和xss攻击？

xss，跨站脚本攻击，是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行。利用这些恶意脚本，攻击者可获取用户的敏感信息如 Cookie、SessionID 等，进而危害数据安全。

csrf ，跨站点请求伪造，攻击者盗用了你的身份，以你的名义发送恶意请求，对服务器来说这个请求是完全合法的，但是却完成了攻击者所期望的一个操作，比如以你的名义发送邮件、发消息，盗取你的账号，添加系统管理员，甚至于购买商品、虚拟货币转账等。

5. 如何改变this的指向？