【前端面试题】web前端面试全流程模拟（一面技术面）

根据自身面试经历以及网上资料，整理出了一套面试流程模拟

适用于二线城市中小厂，应届生，以vue为主的web前端岗位

以下题目查阅自网络，包含一些个人理解，理性阅读，有问题欢迎指出！

---

正文 

第一部分：自我介绍

可以按照 姓名 -> 籍贯（现居地） -> 毕业大学+专业 -> 所学技术 -> 本次应聘岗位 -> 获奖经验（要和应聘岗位相关，不要把优秀干部什么的搬出来） -> 项目经历（有完整项目的优先，没有的可以讲一下demo项目或者小组项目）

---

第二部分：项目经验

有项目就简述一下项目内容，所用的技术栈，个人负责工作，以及最终上线的成果，

没有就跳过本部分

---

第三部分：针对性问答（根据你用的框架，针对的问，这里是vue）

1.为什么选择vue.js？它解决了什么问题？

分析：考vue框架的优点

参考回答：

①vue学习简单，容易上手，熟悉基础的html、css、Js知识后，即可快速上手；

②学习环境好，网上有什么有关vue的优质文章，同时官网也有完善的中文文档

③响应式布局，便于开发，组件化，易管理

④轻量高效，20KB运行大小，超快的虚拟dom

⑤国人研发，天生有好感

2.对Vue生命周期的理解

分析：Vue最常见的题目，简单说一下流程就行

参考回答：

概念：Vue中实例或者组件从创建到消灭中间经过的一系列过程

简单过程：beforeCreate -> created -> beforeMount -> mounted -> beforeUpdate -> updated -> beforeDestroy -> destroy ed

可能的追加问题：mounted和created的区别

参考回答：

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

简单来说，created在前，此时HTML还未渲染处理，用来初始化一些属性，渲染成视图，mounted在后，完成初始化页面后，可以对dom节点进行操作，进行数据绑定

3.v-if和v-show有什么区别

分析：Vue常见的考题，用一句话说明即可

参考回答：

v-if是通过DOM的添加和删除来实现效果，而且有v-else可以配合使用，但是更加消耗性能，v-show只是简单操作css

4.Vue.js中组件之间是如何通信的？

分析：举例题，一般说几个关键的方式即可

参考回答：

最常见的方法是：props/$emit

父组件向子组件传递数据，v-bind绑定一个变量，通过props传递；子组件向父组件传递数据，是通过$emit触发事件来做到的

还有其他方法

方法②：$emit/$on

方法③：$attrs/$listeners

方法④：provide/inject

方法⑤：$parent / $children与 ref

方法⑥：Vuex

5.Vue中双向数据绑定的理解

分析：主要靠怎么实现，思路

参考回答：

采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调

可能的追加提问：如果用原生js，怎么实现双向数据绑定？简单谈谈思路

参考回答：
 

javaScript怎么实现双向数据绑定_柠檬_小强的博客-CSDN博客_js双向数据绑定

6.MVVM的理解，和MVC有什么区别？

分析：考模型理解

参考回答：

MVVM是Model-View-ViewModel的简写，即模型-视图-视图模型。

MVC是Model-View- Controller的简写，即模型-视图-控制器。

MVVM是双向数据绑定，MVC是单向数据绑定

mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验

7.keep-alive是什么作用？

分析：主要考作用

参考回答：

keep-alive是Vue.js的一个内置组件，它能够把不活动的组件实例保存在内存中，而不是直接将其销毁。

---

第四部分：基础知识问答

JS部分

1.js中的 == 和 === 有什么区别

分析：基础题，一句话概括

参考回答：

== 是判断值等，=== 是判断值和类型全部相等

2.Js中的浅拷贝与深拷贝有什么区别？

分析：概念题，两个都解释一下

参考回答：

浅拷贝只复制指向某个对象的指针而不复制对象本身，新旧对象还是共享同一块内存。

深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。

可能的追加提问：如何实现一个深拷贝，谈谈简单思路

参考回答：

用JSON转换、用递归函数

3.对原型、构造函数以及实例的理解

分析：

参考回答：

原型：构造函数在创建的过程中，系统自动创建出来与构造函数相关联的一个空的对象

构造函数：自己定义的一个函数，用来在创建对象时初始化对象，通常配合new使用来新建一个对象

实例：通过构造函数和new创造出来的对象

三者关系：用构造函数和new创造出实例对象，同时也会创建出一个原型对象，实例对象的_proto_对象指向其原型

4."闭包"的理解

分析：一个较复杂的内容，各种文章的讲解不一，很难简单解释，建议自己多查查

参考回答：

（简单回答）一个内部函数可以访问到外部函数作用域的变量，这个内部函数就是闭包

可能的追加提问：闭包解决了什么问题？会导致什么问题？（闭包有哪些优点和缺点？）

参考回答：

可以读取函数内部的变量，可以避免全局污染，会导致变量不会被垃圾回收机制所清除，会大量消耗内存，并可能导致内存泄漏问题

5.如何理解Js中的this关键词

分析：一个大知识点，可能考概念，各种情况，已经改变this的方法

参考回答：

普通函数中的this：谁调用了函数或者方法，那么这个函数或者对象中的this就指向谁

匿名函数中的this：匿名函数的执行具有全局性，则匿名函数中的this指向是window，而不是调用该匿名函数的对象

函数内部的this可以通过 call appy bind改变

可能的追加提问： call appy bind的作用和区别

参考回答

作用：都可以改变函数内部的this指向。

区别点：

1. call 和 apply 会调用函数，并且改变函数内部this指向。
2. call 和 apply 传递的参数不一样，call 传递参数arg1,arg2...形式 apply 必须数组形式[arg]
3. bind 不会调用函数，可以改变函数内部this指向。

6.const、let、var的区别

分析：经典考题，主要从几个点说区别

参考回答：

const 定义的变量不可以修改，而且必须初始化

var 定义的变量属于函数作用域，可以修改，如果不初始化会输出undefined，不会报错，可以重复声明，存在变量提升现象

let 是块级作用域，函数内部使用let定义后，对函数外部无影响，不能重新声明

7.undefined和null对比

分析：经典考题，考概念和区别

参考回答：

undefined——表示变量声明过但并未赋过值，它是所有未赋值变量默认值

null——表示什么都没有，不指向任何地址

它们是两个不同的数据类型，如果用typeof方法，得出undefined是undefined对象，null是object对象

典型例子：undefined 转化为数字类型为NaN（Not-a-Number 非数字值），而null转化为数字类型，结果为0

8.ES6新增了哪些新元素？说几个关键的就行

分析：笼统考题，可以只说内容，不说作用

参考回答：

新增变量定义方法：let和const 

新增数据类型：symbol和bigint

字符串扩展方法：includes，startsWith，endsWith

箭头函数

对象的函数属性简写

map和reduce方法

异步方法promise

模块化export和import

对象扩展：keys，values，entries，assign

数组扩展：find，findindex，includes

9.js都有哪些数据类型？

分析：

参考回答：

基本数据类型：Number，String，Boolean，null，undefined，symbol，bigint

引用数据类型：object，function

可能的追加提问：两种数据类型有什么区别？

参考回答：

基本数据类型是直接存储在栈中的简单数据段，占据空间小、大小固定，运行速度快，属于被频繁使用的数据

引用数据类型是存储在堆内存中，占据空间大、大小不固定，运行速度更慢。

10.简述一下Set、Map、WeakSet 和 WeakMap 的区别

分析：分析区别题，四种类型介绍一遍

参考回答：

Set

1. 成员不能重复；
2. 只有键值，没有键名，类似于数组；
3. 可以遍历，

WeakSet

1. 成员都是对象（引用）；
2. 弱引用，随时可以消失。可以用来保存 DOM 节点，不容易造成内存泄露；
3. 不能遍历

Map

1. 本质上是键值对的集合，类似集合；
2. 可以遍历，方法很多，可以跟各种数据格式转换；

WeakMap

1. 只接收对象为键名（null 除外），不接受其他类型的值作为键名；
2. 键名指向的对象，不计入垃圾回收机制；
3. 不能遍历，方法同get、set、has、delete；

11.简述一下你对promise的理解

分析：经典问题，promise很复杂，很难简单解释，建议多看看相关文章

参考回答：

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大，简单地说，Promise好比容器，里面存放着一些未来才会执行完毕（异步）的事件的结果，而这些结果一旦生成是无法改变的。

promise的构造函数需要接收一个函数作为参数，而且需要给这个函数传入两个参数

• resolve ：异步操作执行成功后的回调函数
• reject：异步操作执行失败后的回调函数

promise还有then和catch方法，用来指定resolve和reject的回调

可能的追加提问：promise和async await有什么区别

参考回答：

promise是ES6写法，属于链式写法，复杂场景时语法不够美观

async await是ES7写法，写法更加简洁美观，看起来像同步代码，async await是基于Promise实现的，返回的是一个Promise对象，且不能用于普通的回调函数

CSS部分

1.对CSS盒子模型的理解

分析：经典题，先介绍概念，后分着说两种模型

参考回答：

盒模型封装了周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性

分类上分为：W3C盒子模型，即标准盒模型；和 IE盒子模型，即怪异盒模型

可能的追加提问：标准模型和IE模型的区别

参考回答：计算宽度和高度的不同，标准盒模型的width和height只包括内容高度，不包含padding和border的值，而IE盒模型的width和height是包含padding和border值的

2.如何实现水平居中（或者垂直居中）一个页面元素？

分析：方法题，针对回答，一般说出两种方法就可以了

参考回答：

水平居中：

行内元素的话，可以通过设置text-align: center; 

块级元素的话，可以通过设置margin: 0 auto；或者使用flex布局display: flex; justify-content: center;

垂直居中：

行内元素的话，可以通过设置display:table-cell;和vertical-align: middle

块级元素的话，可以使用flex布局display: flex; align-items: center;

3.清除浮动的方式有哪些？

分析：方法题，掌握四大方法即可

参考回答：

① 额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签

②父级添加overflow方法

③使用after伪元素清除浮动

④使用before和after双伪元素清除浮动

4. 行内元素和块级元素什么区别，怎么相互转换？

分析：概念题，介绍即可，区别说display的三种即可

参考回答：

块级元素

①总是从新的一行开始，即各个块级元素独占一行，默认垂直向下排列；

②高度、宽度、margin及padding都是可控的，设置有效，有边距效果；

③宽度没有设置时，默认为100%；

④块级元素中可以包含块级元素和行内元素。

行内元素

①和其他元素都在一行，即行内元素和其他行内元素都会在一条水平线上排列；

②高度、宽度是不可控的，设置无效，由内容决定。

③根据标签语义化的理念，行内元素最好只包含行内元素，不包含块级元素。

如何转换

使用display属性：

①display:inline;转换为行内元素；

②display:block;转换为块状元素；

③display:inline-block;转换为行内块状元素。

5.重绘和回流是什么？它们有什么区别？

分析：概念题，介绍一遍，然后说区别

参考回答：

重绘: 当页面中元素样式的改变并不影响它在文档流中的位置时，也就是说布局没有发生改变时(比如只是改变元素的颜色)。

回流：当渲染树(Render Tree)中的部分（或全部）元素的尺寸、结构、显示隐藏等发生改变时，浏览器重新渲染的过程称为回流

区别：重绘只改变自身样式，不会影响到其他元素；而回流的元素大小或者位置发生改变（当页面布局发生改变的时候），会触发重新布局导致渲染树重新计算布局和渲染，回流一定会触发重绘，而重绘不一定会触发回流

浏览器/服务器/HTTP协议相关

1.考几个HTTP响应码

分析：

参考答案（高频提问）：

20X：请求成功，很少会考具体

30X：请求被重定向

400：错误请求

401：未授权

403：禁止

404：未找到

500：服务器内部错误

502：错误网关

503：服务不可用

504：网关超时

2.cookies，sessionStorage和localStorage的共同点和不同点

分析：概念题，抓住不同方面说明

参考回答：

共同点：三者都是保存在浏览器端，且是同源的。

区别：

①保存方式不同

cookies始终在同源http请求中携带，即在浏览器和服务器间来回传递，而sessionstorage和localstorage不会自动把数据发给服务器，仅在本地保存

②存储大小的限制不同

cookie保存的数据很小，不能超过4k，而sessionstorage和localstorage保存的数据大，可达到5M

③数据的有效期不同

cookie在设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭。sessionstorage仅在浏览器窗口关闭之前有效。localstorage始终有效，窗口和浏览器关闭也一直保存，用作长久数据保存

④作用域不同

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

3.简单介绍一下同步和异步

分析：同步和异步知识很深，如果要问只能简单回答一下

参考回答：

同步是指在主线程上排队执行的任务，只有前一个任务执行完毕，才能继续执行下一个任务。

异步是指不进入主线程，而进入 任务队列的任务，只有任务队列通知主线程，某个异步任务可以执行了，该任务才会进入主线程。

可能的追加提问：怎么实现异步（Js）

参考回答：

回调函数（Callback）、事件监听、发布订阅、Promise/A+、生成器Generators/ yield、async/await

4.GET和POST请求有什么区别？

分析：经典考题，比较基础

参考回答：

get是通过拼接url进行传递参数，所以其参数url可见，同时get请求可以缓存，回退时不影响，get的传输数据大小一般为有限的；而post是通过请求体的body传递参数，其url参数是不可见的，post请求不可以缓存，在页面回退时会重新提交请求，能传输的数据可以无限大，而且post理论上比get更安全

5.跨域问题怎么解决？介绍几种方法

分析：介绍几种常用的即可

参考回答：

①第三方模块CORS

②jsonp（有局限性）

③webSocket

④webpack的devServer配置代理

---

第五部分：综合能力

一般都是了解一下学习能力，项目开发的能力，对面试的影响就不大了

1.你平时都是怎么学习前端知识？

参考回答：菜鸟教程、w3cschool，博客园、CSDN论坛、网站的授课视频，牛客网刷题等等

2.遇到不会的问题，你会怎么办？

参考回答：首先分析这个问题的具体细节，如果是基础知识的问题就去复习知识，如果是没见过的回去搜索引擎或者论坛查阅，如果无法线上找到资料的，会求助身边的程序员朋友

3.对未来职业有什么规划？

参考回答：一边工作，一边学习，往后端发展，或者成为全栈工程师（个人回答）

4.谈谈你对企业级开发的个人理解

参考回答：无标准答案

---

以上题目和答案资料来源自网络，整理不易，如果可以请点个赞吧(･ω･)ﾉ

祝大家都能收到满意的offer！