前端面试经历（三）

时间：2023年3月23日  下午15:00

一、项目里遇到了什么难题

二、如何了解和学习前端技能知识

三、系统登录如何实现，登录之后页面如何对用户鉴权

 Token使用非对称加密，密钥保存在服务器中，服务器将用户id写入Token，并对其加密发送给客户端。客户端接收后保存到本地，每次请求带上这个Token，Token通过密钥解析出用户id来鉴别用户。这样别人无法解析出Token加密后的用户id，服务器也不需要使用内存来保存，因为直接用密钥解析Token里的用户id即可识别用户
 

四、token如何给后端传递，告诉他我把token放在哪里

放在封装的请求拦截器里

五、前端向后端传递数据的方式

前端向后台传值的5种方式总结_前端向后端传值 form_JSai的博客-CSDN博客

1、通过form表单

1. 在后台可通过对应的name属性获取相应的值。
2. from表单中的action属性标识提交数据的地址。
3. method属性指明表单提交的方式。

2、通过url字符串拼接向后台提交数据

1. 直接在ajax中url拼接数据
2. JS提交数据，通过window.location.href指定路径提交数据
3. 通过a标签提交数据，通过a标签的href属性提交数据，和js提交数据类似。
4. 在后台中也可以互相访问相应的Servlet

六、二次封装axios实现了什么

请求拦截器，响应拦截器

请求拦截器实现了：

1、页面加载进度条的开始，页面加载进度条利用了nprogress插件，

2、携带用户的token给服务器进行验证，如果请求头存在该token就说明对上了该用户

响应拦截器实现了：

1、页面加载进度条的结束

2、返回服务器响应的数据

3、请求失败打印失败信息

七、封装了拦截器，拦截下来的信息做了什么转换，给拦截器加上了什么操作、什么能力

请求拦截器实现了：

1、页面加载进度条的开始，页面加载进度条利用了nprogress插件，

2、携带用户的token给服务器进行验证，如果请求头存在该token就说明对上了该用户

响应拦截器实现了：

1、页面加载进度条的结束

2、返回服务器响应的数据

3、请求失败打印失败信息

八、前端的存储方案

九、cookie、session、token的关系

十、cookie和storage的区别

十一、如何进行组件化、模块化，举个例子说明如何将组件进行抽离

十二、移动端尺寸的适配

1、媒体查询 @media screen

通过查询设备的宽度来适配不同的屏幕，执行不同的css代码，最终达到界面的配置

2、flex布局 + rem（相对于根元素（即html元素））

3、用vw

• vw:视图窗口的宽度，1vw = 视图窗口宽度的1%。
• vw:视图窗口的宽度，1vw = 视图窗口宽度的1%

十三、两个div的margin发生重叠，有什么解决方案

方法一：给父元素加overflow：hidden；

这种方法解决了我们外边距重叠问题，但是这个方法只适用于 “子元素的高度加上外边距高度小于父元素高度(childHeight +margin-top

方法二：给父元素加边框 border（可以加个透明的边框）

方法三：给父级或者子级设置display:inline-block;

既然只有块元素会产生外边距重叠，那么我们就让它不是块元素，把它设置为行内块元素

方法四：给父级或者子级设置float

方法五：给父级或者子级设置position: absolute;

方法六：给父元素添加padding
 

说说BFC

十四、不知宽高的元素如何基于父元素实现水平垂直居中

1、display:table和diaplay:table-cell

2、position:absolute、50%和translate

3、vw、vh和translate

4、:before和display:inline-block

十五、举几个块元素、行元素

十六、做接口处理时，常用的类型接口有哪些

get，post

十七、get和post的区别

十八、http和https的区别

十九、XSS和CSRF攻击

二十、浏览器的缓存机制

二十一、强缓存用到的属性

1、expries：http1.0的规范。它的值为一个绝对时间的GMT格式的时间字符串，如Mon,10 Jun 2015 21:31:24 GMT，如果发送请求的时间在expries之前，那么本地缓存是在有效，否则就会发送请求到服务器来获取资源。

2、cache-control：这是http1.1出现的header信息，主要是利用该字段的max-age值来进行判断，它是一个相对值，浏览器第一次的请求时间和Cache-Control设置的有效期，计算出这个资源过期时间，再拿到这个过期事件跟当前的时间进行比较，如果请求时间在过期时间之前，就能命中缓存，否则就不行；Cache-Control的设置与否在于服务器，都是在服务端设置的，前端不需要做任何事情。

二十二、事件循环

Javascript单线程任务被分为同步任务和异步任务。

同步任务：立即执行的任务，在主线程上排队执行，前一个任务执行完毕，才能执行后一个任务；

异步任务：异步执行的任务，不进入主线程， 而是在异步任务有了结果后，将注册的回调函数放入任务队列中等待主线程空闲的时候读取执行。

主线程不断从任务队列中读取事件，这个过程是循环不断的，这种运行机制就叫做Event Loop(事件循环)。

二十三、webpack常用的配置用过哪些，tree-shaking了解吗

二十四、Git用过哪些

二十五、Vue双向数据绑定的原理

二十六、用过slot吗，说一下功能

内容分发的 API，将  元素作为承载分发内容的出口。插槽实质是对子组件的扩展，通过插槽向子组件内部指定位置传递内容。 的出现是为了父组件可以随意在子组件中加入内容。

二十七、Vue2.x提到的数据绑定的缺陷，非要使用2来更新数据、页面渲染，如何实现

二十八、Vue生命周期

二十九、子组件与父组件渲染的生命周期顺序

父组件created→父组件beforeMounted→子组件created→子组件beforeMounted→子组件mounted→父组件mounted

三十、v-if、v-for的区别

三十一、null和undefined的区别

三十二、null用typeof判断返回什么

object

三十三、instanceof了解吗，底层原理是什么

查找构造函数的原型对象是否在实例对象的原型链上，如果在返回true，如果不在返回false

三十四、for in 和 for of 的区别

1. for...in 语句用于遍历数组或者对象，遍历的是对象的键名（或索引）。for of遍历可迭代对象（如数组、字符串、Set 等）的值，遍历的是对象的值，不能用于对象
2. for in得到对对象的key或数组,字符串的下标；for of和forEach一样,是直接得到值

三十五、promise的理解，是什么东西，解决什么问题

三十六、代码输出题