前端部分面经整理|奏鸣曲的博客

1.水平垂直居中，分别都说出两种

https://www.jianshu.com/p/fc95a49821e2

只水平：

1. text-align:center;

2.margin:0 auto;配合 width:fit-content;

3.flex方法： display: flex;

justify-content: center;

只垂直：display: flex;

align-items: center;

2.block和inline的区别块级元素特点：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（很霸道，一个块级元素独占一行）

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

内联元素特点：

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

3.选择器的优先级：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

4.BFC讲一下：创建条件，作用

https://vue3js.cn/interview/css/BFC.html

5.relative和absolute的区别

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 relative：生成相对定位的元素，相对于其正常位置进行定位。两者最核心的区别在于：absolute不受父元素里的其他元素影响，而relative会受到父元素里的其他元素影响。

6.判断js数据类型哪些方法

https://www.cnblogs.com/onepixel/p/5126046.html

7.防抖节流：手撕

https://www.nowcoder.com/discuss/1048510 手撕合集,本博客也有转载。

8.读代码输出题：关于this指向的，还有settimeout，async等同步任务、微任务执行顺序之类的

9.localstorage和sessionstorage的区别

sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的

10.同源策略以及跨域解决方案

见本博客文章：https://www.cnblogs.com/zzzlight/p/16541292.html

11.CORS跨域是在后端还是前端设置

后端

12.项目中使用过什么跨域方法

按自己项目情况说

13.CSRF攻击说一下，还有什么其他的攻击？

CSRF和XSS 是：对输入(和 URL 参数)进行过滤，对输出进行编码。也就是对提交的所有内容进行过滤，对 url 中的参数进行过滤，过滤掉会导致脚本执行的相关内容；然后对动态输出到页面的内容进行 html 编码，使脚本无法在浏览器中执行。虽然对输入过滤可以被绕过，但是也还是会拦截很大一部分的 XSS 攻击。

防御 CSRF 攻击主要有三种策略：验证 HTTP Referer 字段；在请求地址中添加token 并验证；在 HTTP 头中自定义属性并验证。

https://juejin.cn/post/7104877798753468447

14.TCP三次握手和四次挥手，为什么是三次握手而不是两次，为什么是四次挥手而不是三次

小林coding，计算机网络篇

15.为什么项目不用vue3做

自己根据情况发挥

16.webpack了解嘛？描述一下

https://vue3js.cn/interview/webpack/webpack.html

17.vue的生命周期，以及ajax请求在哪个周期发送

第一点：能更快获取到服务端数据，减少页面 loading 时间；
第二点：放在 created 中有助于一致性，因为ssr 不支持 beforeMount 、mounted 钩子函数。

beforeCreate（创建前）: 在数据观测和初始化事件还未开始,data、watcher、methods都还不存在，但是$route已存在，可以根据路由信息进行重定向等操作。

created(创建后)：在实例创建之后被调用，该阶段可以访问data，使用watcher、events、methods，也就是说数据观测(data observer) 和event/watcher 事件配置已完成。但是此时dom还没有被挂载。该阶段允许执行http请求操作。