2024年Web前端最新2024 前端面试题总结大全 及 答案_青矩技术前端面试题，前端客户端开发面试题目

总结

我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

解决方式：

1、CORS跨域资源共享 后端需要设置Access–Control-Allow-Credentials:true

2、jsonp实现跨域：动态创建script，利用src属性进行跨域

3、 nginx代理跨域

4、nodejs中间件代理跨域

5、WebSokect协跨域

6、window.name+ifram跨域

### 5、vuex：Vue.js应用程序的状态管理模式+库。

1、state

保存vuex中的数据源，通过this.$store.state获取

2、getters

用于监听state中的值的变化，返回计算后的结果。getter的返回值会根据它的依赖被缓存起来

3、mutations

是修改store中的值得唯一方式

4、action

官方建议提交一个actions，在actions中提交mutations再去修改状态值。 this.$store.dispatch(‘add’)

//this.$store.commit(‘add’)

5、modules 模块化

### 6、vue的生命周期

Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程，就是生命周期。

beforeCreate: vue元素的挂载元素el和数据都为undefined，还未初始化；

created：vue实例的数据对象data有了，el还没有；

beforeMount：vue实例的$el和data都初始化了，但是还挂载在之前的虚拟dom节点上，data.message还未替换；

mounted：vue实例挂载完成，data.message成功渲染。

更新前后：data变化时会触发beforeUpdate和updated方法；

销毁前后：beforeDestory和destoryed，在执行destoryed方法后，对data的改变不会触发周期函数，说明vue实例已经解除了事件监听以及dom绑定，但是dom结构依然存在；

vue生命周期的作用：

他的生命周期中有多个事件钩子，让我们控制整个vue实例的过程时更容易形成良好的逻辑。

生命周期钩子的一些使用方法：

beforeCreate：loading事件，在加载实例时触发。

created：初始化完成事件，异步请求。

mounted：挂载元素，获取dom节点

uptaded：对数据统一处理

beforeDestory：确认事件停止。

nextTick：更新数据后立即操作dom。

### 7、computed和watch的区别

computed

计算结果并返回，只有当被计算的属性发生改变时才会触发（即：计算属性的结果会被缓存，除非依赖的响应属性变化才会重新及孙）

watch
监听某一个值，当被监听的值发生变化时，执行相关操作。（与computed的区别是，watch更加适用于监听某一个值得变化，并做对应操作，比如请求后太接口等。而computed适用于计算已有的值并返回结果。）

监听简单数据类型：
data(){
return{
‘first’:2
}
},
watch:{
first(){
console.log(this.first)
}
},

### 8、json和xml数据的区别

1、数据体积方面：xml是重量级的，json是轻量级的，传递的速度更快些。。

2、数据传输方面：xml在传输过程中比较占带宽，json占带宽少，易于压缩。

3、数据交互方面：json与javascript的交互更加方便，更容易解析处理，更好的进行数据交互

4、数据描述方面：json对数据的描述性比xml较差

5、xml和json都用在项目交互下，xml多用于做配置文件，json用于数据交互。

### 9、http和https的区别

Http：超文本传输协议（Http，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。设计Http最初的目的是为了提供一种发布和接收HTML页面的方法。它可以使浏览器更加高效。Http协议是以明文方式发送信息的，如果黑客截取了Web浏览器和服务器之间的传输报文，就可以直接获得其中的信息。

Https：是以安全为目标的Http通道，是Http的安全版。Https的安全基础是SSL。SSL协议位于TCP/IP协议与各种应用层协议之间，为数据通讯提供安全支持。SSL协议可分为两层：SSL记录协议（SSL Record Protocol），它建立在可靠的传输协议（如TCP）之上，为高层协议提供数据封装、压缩、加密等基本功能的支持。SSL握手协议（SSL Handshake Protocol），它建立在SSL记录协议之上，用于在实际的数据传输开始前，通讯双方进行身份认证、协商加密算法、交换加密密钥等。

HTTP与HTTPS的区别

1、HTTP是超文本传输协议，信息是明文传输，HTTPS是具有安全性的SSL加密传输协议。

2、HTTPS协议需要ca申请证书，一般免费证书少，因而需要一定费用。

3、HTTP和HTTPS使用的是完全不同的连接方式，用的端口也不一样。前者是80，后者是443。

4、HTTP连接是无状态的，HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，安全性高于HTTP协议。

https的优点

尽管HTTPS并非绝对安全，掌握根证书的机构、掌握加密算法的组织同样可以进行中间人形式的攻击，但HTTPS仍是现行架构下最安全的解决方案，主要有以下几个好处：

1）使用HTTPS协议可认证用户和服务器，确保数据发送到正确的客户机和服务器；

2）HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全，可防止数据在传输过程中不被窃取、改变，确保数据的完整性。

3）HTTPS是现行架构下最安全的解决方案，虽然不是绝对安全，但它大幅增加了中间人攻击的成本。

4）谷歌曾在2014年8月份调整搜索引擎算法，并称“比起同等HTTP网站，采用HTTPS加密的网站在搜索结果中的排名将会更高”。

Https的缺点

1）Https协议握手阶段比较费时，会使页面的加载时间延长近。

2）Https连接缓存不如Http高效，会增加数据开销，甚至已有的安全措施也会因此而受到影响；

3）SSL证书通常需要绑定IP，不能在同一IP上绑定多个域名，IPv4资源不可能支撑这个消耗。

4）Https协议的加密范围也比较有限。最关键的，SSL证书的信用链体系并不安全，特别是在某些国家可以控制CA根证书的情况下，中间人攻击一样可行。

### 10、vue router 跳转方式


**1、this.$router.push()**

跳转到不同的url，但这个方法会向history栈添加一个记录，点击后退会返回到上一个页面。
this.KaTeX parse error: Expected '}', got 'EOF' at end of input: … 获取参数 {{this.route.query.userId}}
this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …}) 获取参数：{{this.route.params.userId}}
ps:

##### 数据结构与算法

 这一块在笔试、面试的代码题中考核较多，其中常考的数据结构主要有：**数组、链表、队列、栈、Set、Map、哈希表等**，不同数据结构有不同的方法以及储存原理，这些算是技术岗的必备知识。**算法部分主要分为两大块，排序算法与一些其他算法题**。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

排序算法根据考频高低主要有：快速排序、归并排序、堆排序、冒泡排序、插入排序、选择排序、希尔排序、桶排序、基数排序、Timsort这十种，这类考核点要么是算法的时间、空间复杂度、稳定度，要么是直接手写代码，故在理解算法原理的同时，对JS语言版的排序算法代码也要加强记忆。

- 二叉树层序遍历
- B 树的特性，B 树和 B+树的区别
- 尾递归
- 如何写一个大数阶乘？递归的方法会出现什么问题？
- 把多维数组变成一维数组的方法
- 知道的排序算法 说一下冒泡快排的原理
- Heap 排序方法的原理？复杂度？
- 几种常见的排序算法，手写
- 数组的去重，尽可能写出多个方法
- 如果有一个大的数组，都是整型，怎么找出最大的前 10 个数
- 知道数据结构里面的常见的数据结构
- 找出数组中第 k 大的数组出现多少次，比如数组【1，2， 4，4，3，5】第二大的数字是 4，出现两次，所以返回 2
- 合并两个有序数组
- 给一个数，去一个已经排好序的数组中寻找这个数的位 置（通过快速查找，二分查找）

![](https://img-blog.csdnimg.cn/img_convert/e6dddcfba6c92fe83b272f1b14dbaf84.webp?x-oss-process=image/format,png)



尽可能写出多个方法
- 如果有一个大的数组，都是整型，怎么找出最大的前 10 个数
- 知道数据结构里面的常见的数据结构
- 找出数组中第 k 大的数组出现多少次，比如数组【1，2， 4，4，3，5】第二大的数字是 4，出现两次，所以返回 2
- 合并两个有序数组
- 给一个数，去一个已经排好序的数组中寻找这个数的位 置（通过快速查找，二分查找）

[外链图片转存中...(img-V7Ug3jw3-1714851359193)]