2022前端面试题汇总（更新中）

【HTML + CSS】

一、CSS实现元素水平垂直居中

① 绝对定位的居中实现

-- 已知宽高 --
 width:100px;
 height:100px;
 position:absolute;
 left:50%;
 top:50%;
 margin-left:-50px; /*宽度的一半*/
 margin-top:-50px; /*高度的一半*/

-- 未知宽高 --
 position:absolute;
 left:50%;
 top:50%;
 transform: translate(-50%,-50%);	 

② margin: auto; 实现绝对定位元素的居中

 position: absolute;
 left:0;
 right:0;
 top:0;
 bottom:0;
 margin:auto;

③ flex弹性布局

 display:flex;
 justify-content:center;
 align-items:center;

④ 水平居中+垂直居中+行高

 text-align:center;
 vertical-align:middle;
 line-height:与高度一致;

二、 什么是BFC? BFC可以解决哪些问题?

BFC是块级格式化上下文，可以把BFC理解为一个封闭的大盒子，内部的元素不会影响到外部。

BFC 特性及应用：
① 解决margin叠加的问题
比如：当页面上的两个div，一个设置了下边距，一个设置了上边距，这个时候由于两个div处于同一个BFC容器下，上下边距会发生重叠，取较大的值作为边距，这也是CSS的一种规范。如果想避免外边距折叠，可以将其放在不同的 BFC 容器中，并设置overflow:hidden;

② 可以阻止元素被浮动的元素覆盖（避免文字环绕）
比如：页面上两个div，给其中一个div设置浮动后会脱离标准文档流，这个时候第二个div有一部分会被浮动的div覆盖，如果想避免元素被覆盖就可以在第二个元素中加入 overflow: hidden;

③ 用于清除浮动
当给元素设置浮动后会脱离普通文档流，这个时候如果外部的元素没有设置高度，高度则为0，如果触发了容器的BFC，设置overflow:hidden;那么容器将会包裹浮动的元素

三、flex布局
flex布局教程-阮一峰

flex-grow：项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink：项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis: 项目占据的空间，默认值为auto，即项目的本来大小

场景1：左边固定 右边自适应 -> （左边设置固定宽度值，右边flex：1；）
场景2： flex布局实现有11个盒子，一行三个，最后一个左对齐-> （父容器添加伪元素，flex: auto; 或 flex-grow: 1;）

四、 重绘和重排
重绘就是重新绘制，不会影响页面布局的操作，比如更改颜色
重排就是页面的布局改变导致需要重新构建，比如改变元素的大小或位置

---

【JS + ES6】

一、 let、const、var的区别
① var是ES5提出的，let和const是ES6提出的
② const声明的是常量，必须赋值，而且声明后不能再修改。let和var声明的是变量，声明时可以不赋值，而且声明后可以修改
③ var允许重复声明变量，后面声明的变量会覆盖前面声明的变量。let和const在同一作用域不允许重复声明变量，否则会报错
④ var不存在块级作用域，let和const存在块级作用域
⑤ var声明的变量存在变量提升，即变量可以在声明之前调用，值为undefined。let和const不存在变量提升，所声明的变量一定在声明后才能使用不然会报错

二、 js的数据类型有哪些？如何检测数据类型？如何判断引用类型？

基本数据类型：Number、String、Boolean、Null、Undefined
引用类型： Object、Array、Function
typeof 常用于检测基本类型(值类型)，instanceof 常用于检测复杂类型(引用类型)
判断数据类型是数组：数组 instanceof Array 或者 数组.constructor === Array
判断数据类型是对象：对象 instanceof Object

三、null和undefined的区别
null表示声明一个变量，赋值为空值，undefined表示声明一个变量但没有赋值，会自动赋值undefined。
区别：
typeof undefined => undefined
typeof null => object
null == undefined => true
null === undefined => fasle

四、js操作数组的常用方法

1. 数组的增删

push() 在数组末尾添加一个或多个元素
shift() 在数组头部删除一个元素
pop() 在数组末尾删除一个元素
unshift() 在数组头部添加一个或多个元素

concat()连接数组，返回新数组
slice(start,end) 从原数组中返回选定元素，原数组不会改变
splice(index,count,item1,item2) 可以实现对数组元素的删除、插入、替换操作

一个参数，从该参数表示的索引位开始截取，直至数组结束，返回截取的数组，原数组改变；
两个参数，第一个参数表示开始截取的索引位，第二个参数表示截取的长度，返回截取的数组，原数组改变；
三个或者更多参数，第三个及以后的参数表示要从截取位插入的值。
-splice删除：color.splice(1,2) （删除color中的1、2两项）
-splice插入：color.splice(1,0,'brown','pink') （在color键值为1的元素前插入两个值）
-splice替换：color.splice(1,2,'brown','pink')  （在color中替换1、2元素）

2.数组的排序

sort() 对数组元素进行排序 
reverse() 反转数组中所有元素的顺序

3.ES5新方法

forEach() 从头到尾遍历数组，无return，会改变原数组
map() 遍历数组，有return，并返回一个新数组，不会改变原数组
filter()  过滤数组，返回一个满足条件的数组
every() 检测数组中是否所有的元素都符合指定的条件，返回一个布尔值，结果为true或false
some() 检测数组中是否含有某一个值，返回一个布尔值，如果数组中有任意一个元素满足给定的条件，则返回true否则为false 
es6 includes() 判断数组中是否包含某个元素

五、js数组去重
六、promise
七、深浅拷贝的区别及实现
八、ajax和axios的区别

九、箭头函数和普通函数的区别
① 箭头函数比普通函数写法更加简洁
② 箭头函数只能是匿名函数，普通函数可以有匿名函数和具名函数
③ 普通函数的this指向调用它的那个对象，箭头函数的this永远指向其上下文的this
④ 箭头函数不绑定arguments，要用rest参数解决
⑤ 箭头函数没有原型属性

十、js闭包
闭包就是在一个函数内部定义一个函数并且调用，就会形成闭包

优点： ① 可以访问和修改函数内部的私有变量 ② 延长变量的生命周期
缺点： 由于闭包会使函数中的变量都保存在内存中，内存消耗会很大，容易造成内存泄漏。因此建议在退出函数之前将不使用的函数变量删除，可以手动赋空标记来回收 fn = null

---

【浏览器及http】

1.cookies、sessionStorage和 localstorage区别
① 存储大小：cookie数据大小不超过4k，sessionStorage和localstorage一般为5MB左右
② 有效时间：localStorage存储持久数据，除非被手动删除，否则会永久保存； sessionStorage仅在当前会话下有效，数据会在当前浏览器窗口关闭后自动删除。cookie一般由服务器生成，可以设置失效时间，如果设置了cookie的过期时间，cookie在过期时间之前都会有效，即使关闭窗口或浏览器。
③ 与服务器通信：cookie数据会在服务器和浏览器之间来回传递，sessionStorage和localstorage不会把数据发送给服务器，仅在本地保存

---

【Vue】

一、 v-if和v-show的区别
① v-show是控制元素的display属性，当元素隐藏时，会在dom节点中把该元素css属性设置为display:none;元素依然保留在dom节点中，v-if是条件渲染，当元素隐藏时，会在dom节点中把该元素移除
② v-if有更高的切换开销，v-show有更高的初始化渲染开销。如果需要频繁的切换用v-show比较好，如果条件很少改变，则使用v-if较好

总结：v-if 和 v-show 都是动态的控制元素的显示与隐藏，不同之处在于v-if是条件渲染而v-show是使用display属性来控制元素的显示与隐藏，如果频繁的切换用v-show比较好，减少渲染带来的开销。如果条件很少改变，则使用v-if较好

二、vue双向数据绑定原理
vue实现双向数据绑定是采用数据劫持结合发布者-订阅者模式来实现数据的响应式，通过Object.defineProperty来劫持数据的setter和getter，在数据变动时发布消息给订阅者，订阅者收到消息后进行相应的处理，也就是说数据和视图同步变化，数据变化更新视图，视图变化更新数据。

实现过程：
1、实现一个监听器Observer，用来监听属性的变化并通知订阅者
2、实现一个订阅器Watcher，收到属性的变化通知并执行相应的函数，从而更新视图
3、实现一个解析器Compile， 解析指令、初始化模板、绑定订阅者

三、 vue的生命周期
vue的生命周期分为四个过程：
创建过程（beforeCreate、created）
挂载过程（beforeMount、mounted）
更新过程（beforeUpdate、updated）
销毁过程（beforeDestroy、destroyed）

① beforeCreate (创建前)：当前生命周期el和data尚未初始化，还不能访问data、methods、computed、watch上的方法和数据 【可以在这里加个loading加载事件】
② created (创建后)：当前生命周期data初始化完成，可以访问data、methods、computed、watch上的方法和数据，el初始化还没完成所以还不能访问【前后端数据交互，使用ajax请求数据】
③ beforeMount (挂载前)：在挂载开始之前被调用，挂载元素，获取到DOM节点
④ mounted (挂载后)：可以操作DOM节点 【第三方插件的初始化：视频播放器、地图等】
⑤ beforeUpdate (更新前)：页面数据更新前调用，监听数据的改变，并且可以获取到最新的数据，但是不会更新页面的数据
⑥ updated (更新后)：当前生命周期更新的数据与模板结合完毕
⑦ beforeDestroy (销毁前)：实例销毁之前调用
⑧ destroyed (销毁后)：实例销毁后调用 【可以做一些移除的操作：清除定时器，事件的解绑】

四、vue组件通信

五、vue常用修饰符

① 一般修饰符

.trim 去除内容首尾空格
.number 将用户输入的值转为Number类型
.lazy 只有标签的change事件执行后才会执行数据的双向绑定

② 事件修饰符

.stop 阻止冒泡（通俗的讲就是阻止事件向上级DOM元素传递）
.prevent 阻止默认事件的发生（比如点击超链接的时候会进行页面跳转、点击表单提交按钮时会重新加载页面等等）
.once 点击事件将只会触发一次
.capture 捕获冒泡，即有冒泡发生时，有该修饰符的元素会优先执行，如果有多个,从外到内依次执行，然后再按自然顺序执行触发的事件
.self 将事件绑定到自身，只有自身才能触发，通常用于避免冒泡事件的影响

③ 按键修饰符

.enter .esc .space .delete .up .down .left .right

六、vue路由的两种模式，hash与history的区别
① url显示：hash模式url带#号，history模式不带#号
② 回车刷新：history模式在刷新页面时会出现404错误，需要后端人员配合配置Apache或者nginx的url重定向，重定向到首页的路由
③ 支持版本：hash路由支持低版本的浏览器，而history路由是HTML5新增的API

七、vue中计算属性computed和监听属性watch的区别
计算属性computed 注重的是结果，设计的原因是解决模板过重，易于维护，它有缓存，必须return一个结果，并且只支持同步
监听属性watch 注重的是过程，它可以监听一个值的变化，不用返回值，支持异步和同步

八、vue的优点
① 简单易学
② 轻量级框架
③ 双向数据绑定
④ 组件化
⑤ 虚拟dom，操作速度更快

---

【前端性能优化方案】

css优化

• css放在头部保证用户看到页面时样式是对的，js放在body底部防止加载js阻塞页面
• 尽量避免行内样式
• 公用样式合并写
• 能够用css实现的效果，尽量不用js实现

图片优化

• 小图片可以使用精灵图
• 大图进行压缩或者放到服务器上
• 图片懒加载

加载优化

• 使用UI库时尽量按需加载
• 路由懒加载
• 增加loading或者骨架屏
• 列表页面可以使用分页，滚动加载
• 上线前删除无用代码
• 服务端开启gzip压缩