前端面试题口语化

1.宏任务和微任务以及事件循环

微任务：Promise.then/catch、process.nextTick等等
宏任务：setTimeout、setInterval等等
事件循环：因为js是单线程的语言，一次只能处理一件事，为了防止事件堵塞设计了同步任务和异步任务，微任务和宏任务都属于异步任务，同步任务执行完后会优先执行微任务，微任务清空后会执行一个宏任务，完成一个宏任务后会检查微任务如果有微任务会优先执行微任务再去执行宏任务

2.深拷贝和浅拷贝

浅拷贝：只拷贝对象的第一层属性，拷贝的对象还是引用类型的话，修改拷贝后的对象，原对象也会跟着修改，因为他们绑定的是同一块内存地址。常见比方法比如Object.asssign和展开运算符或者直接赋值
深拷贝：完全拷贝一个对象，开辟新的内存地址，两个对象互不干扰，常见的有JSON.stringify(JSON.parse())，这是最常用的方法，缺点是不能拷贝对象、undefined、symbol。structuredClone，浏览器的api，除了不能拷贝函数，大部分情况都是可行的。手写深拷贝函数

3.防抖和节流

防抖：短时间内多次触发，只执行最后一次，常见：input框，浏览器resize
节流：多次连续触发，按规定的时间内只执行一次。常见：疯狂点击按钮

4.this的指向

this的指向不是在定义时决定的，而是在调用是决定的：
单独调用的情况：在非严格模式下指向window，严格模式下是undefined
被对象调用的情况obj.fn()：指向obj
使用call、apply、bind指向传入的第一个参数
使用new 作为构造函数，this执行函数内创建的新实例对象
箭头函数下没有自己的this，指向外部，且无法改变

5.v-if和v-show的区别

v-if可以条件渲染，如果条件为false时销毁/不渲染，v-show只是简单的切换了display为block或none，dom始终是存在的
使用场景：复杂渲染，使用v-if/v-else，一般在页面渲染后不再切换时使用v-if可以减少dom操作，v-show适合频繁切换如hover事件等等

6.computed和watch的区别

computed是计算属性，具有缓存机制，只有依赖的数据变化时才会重新计算，否则都读取缓存内容，性能更佳，不支持异步操作
watch是侦听，当依赖的数据变化时会重新执行，没有缓存机制，但是支持异步操作，比如数据变化后发送网络请求

7.组件间的通信方式有哪些

父子通信：props/emit最常用
子孙通信：provide/inject
全局通信：pinia和vuex
直接访问通信：ref获取子组件
事件总线：vue2使用$bus，vue3用mitt库

8.盒模型
标准盒模型和怪异盒模型(IE盒模型)
标准盒模型：实际width为content+padding+border，就是你给设置设置了width之后盒子的实际宽度其实是width+padding+border
怪异盒模型：实际width为你设置的width，内容为：width-padding-border

9.BFC(块级格式化上下文)

描述：bfc是一块独立渲染的区域，内部的渲染不会影响到外部
作用：
1.解决margin塌陷，父子元素的外边距合并导致了margin失效，给父元素设置overflow：hidden即可
2.解决高度塌陷，当父元素没有设置高度靠子元素撑开，此时子元素脱离文档流(float或position)，父元素高度就会塌陷，只需要设置overflow：hidden，页面就算时就会把脱离文档流的高度计算到父元素上

10.从输入url到页面渲染发生了什么

1)url解析，判断是搜索内容还是url地址
2)dns解析，把域名转为ip
3)简历tcp连接：tpc三次握手
4)发送http请求，把cookie等发送给服务器
5)服务器响应：返回html文档
6)浏览器渲染
7)断开tcp连接：tcp四次握手

11.重绘和重排

重排：元素的位置、结构、尺寸发生改变时会发生重绘，浏览器会重新计算布局。比如：改动宽高、位置、修改dom、窗口resize
重绘：当元素的样式发生变化时会触发重绘，但不会影响布局，比如修改color，background-color等等
关系：重排会导致重绘，重绘不一定会触发重排，重排会非常消耗性能
优化：尽量使用css3的transform去修改元素位置和尺寸，可以触发gpu加速且不会触发重排，性能非常好
用visibility：hidden代替display：none，前者只会触发重绘，而后者会触发重排，导致性能消耗

12.本地存储的区别

cookie、localstorage和seesionstorage的区别和作用
大小：cookie最大为4k作用，storage一般为5m
cookie可以设置过期期限，没有设置则关闭浏览器失效
localstorage没有过期时间，除非手动清除
seesionstorage关闭当前标签页则清除
cookie每次与服务器通信都会携带，storage是纯前端储存，不参与通信

13.flex的常见属性
display：flex、flex-diretion这周方向、justify-content主轴方向、items-align侧轴方向、flex-ward换行、flex-grow比例、flex-shrink缩小比例、flex-basis初始大小
flex:1是一种缩写，包含:flex-grow：1，flex-shrink：1，flex-basis：0，意识是当空间足够是平摊剩余空间，空间不足是按比例缩小

14.position有哪些值，sticky是干什么的

absolute：绝对定位，相对父元素
fixed：固定定位，相对屏幕
relative：相对定位
sticky：粘滞定位，常用语滚动吸顶效果
static：默认属性

15.Promise各个方法

promise.all：所有任务成果则返回成功，有一个失败则返回失败。返回结果数组
promise.any:有一个返回成功则成功，全部失败则返回失败。返回单个结果
promise.race:返回最快的任务状态，若任务失败则返回失败，成功则成功，返回单个结果
promise.allSettled:全部任务完成后返回成功不论成功失败，返回结果数组

16.什么是闭包，有什么优点缺点

闭包本质上是函数与它函数作用域的组合，实际应用用我们通常通过闭包来实现数据封装和数据私有化，通过调用外层函数来的到一个内层函数，内层函数可以访问到外层函数的变量而外部无法访问，从而避免了全局污染，实现了数据隔离。
缺点：闭包本身是不会导致内存泄漏的。但是如果不合理的使用，比如在闭包中引用了大量的dom对象没有清除，这些变量不会被垃圾回收机制回收就会导致内存泄漏。解决方法就是及时设置为null。

17.nextTick的作用和原理

作用：vue更新dom异步的，如果在数据变化后立即获取dom，拿到的还是旧的，nextTick的回调就是在dom更新后执行的
原理：利用了js的微任务机制，将nextTick的回调函数添加到了更新DOM任务这个微任务之后，确保dom更新完成后再执行nextTick回调

18.vue中key的作用是什么，为什么不建议使用index作为key

作用：key是虚拟dom的标识。在diff算法对比新旧虚拟节点时，通过可以可以更快速精准的找到节点从而节省更新性能(复用已有元素而不是销毁重建)
用index的弊端：如果v-for时使用index，列表发生删减或排序，index就会变换，这会导致vue误以为节点变化。从而引发错误的节点复用，在input组件尤为明显或错误，或者会造成不必要的性能损耗

19.vue2的Object.defineProperty和vue3的proxy对比

vue2会递归遍历data中的所有属性，给每一个属性添加setter和getter，无法监听属性新增删除，无法监听原生数组索引变化，需要使用$set或重写数组方法
vue3可以代理整个对象。可以监听对象新增删除，也可以监听数组索引变化，性能更好，代码更简洁

20.什么是虚拟列表(虚拟滚动)

场景：一次性加载万级数据DOM，浏览器会卡死
解决：只渲染用户可视区域内的DOM节点。监听滚动事件，动态计算可视区域内的起始索引和结束索引，只渲染这部分对应的DOM，从而大幅度降低渲染压力。中间可以设置缓冲区，这样能解决快速滑动时导致白屏

21.常见的http状态码

200成功 204成功但没有内容
301永久重定向 302临时重定向
400 参数错误 401未登录 403权限不足 404路径不存在
500 后端错误 502网关错误 503网关过载

22.跨域解决方案

定义：因为浏览器的同源策略，如果协议、域名、端口不一致就会导致跨域
解决：后端设置cors，在响应头中设置Access-Control-Allow-Origin。开发环境下可以设置Proxy代理，原理是利用node的服务器中间转发，因为服务器之间没有同源策略。nginx反向代理，也是利用了服务器间没有同源策略的原理，利用nginx中间转发

23.xss与csrf攻击

xss：攻击这恶意注入js脚本，比如在评论区输入script脚本，然后被执行，解决方案：对用户输入进行转义，避免使用v-html，cookie设置httpOnly来防止脚本读取