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

鸣涧

【前端面试题】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指向。

区别点：

call 和 apply 会调用函数，并且改变函数内部this指向。
call 和 apply 传递的参数不一样，call 传递参数arg1,arg2...形式 apply 必须数组形式[arg]
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

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

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

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

只接收对象为键名（null 除外），不接受其他类型的值作为键名；
键名指向的对象，不计入垃圾回收机制；
不能遍历，方法同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.谈谈你对企业级开发的个人理解

参考回答：无标准答案
————————————————
版权声明：本文为CSDN博主「迪士尼在逃程序猿」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/MisterVAN/article/details/123644148