web面试必知宝典

一、个人简历模版

https://a.lmongo.com/offer/resume.html

二、自我介绍话术

您好，我叫 xxx ，今年 xxx 岁，老家 xxx 。做前端开发已经 xxx 年了，期间换过 xxx 家公司，第一家是一个

xxxx 类型公司，叫 xxxxx ；上一家家叫 xxxx ，上一家公司是自己公司或外包公司，做自己的产品或者做

别人的产品，在上一家公司呆了 xxx( 多长时间 ) ，上一家公司一共 xxx 人，开发团队 xxx 人，一共 xxx 个小

组，我们小组 xxx 人，前端 xxx 人，后端 xxx 人，大概做了 xxx 个项目，上一家公司前端主要是用 xxx 技

术，后端是用 xxx 技术，从上一家公司离职主要是因为 xxx

三、面试官问题

1. 你从上一家公司离职的原因是什么?

家里有人生病 , 回家需要照顾 为什么不请假呢 ? 因为请的时间比较久 , 所以选择了离职

因为有家人或者女朋友 / 男朋友在这边 , 所以选择来这边发展

公司资金链出现问题 , 你坚持了 3 个月还没有发工资 , 由于经济原因实在撑不住了 , 所以选择离职

2. 你上一家公司在那里?

找自己简历上面写的公司的地址

3. 那你现在住在那里?

北京 - 昌平区 - 天通苑 北京 - 昌平区 - 沙河地铁站附近

4. 你到你上一家公司需要多久,坐什么车,需要走多久,到那个地方下车?

自己去查

5. 你上一家是做什么的?

自己在网上查

6. 上一家公司多少人?或者你们公司技术团队多少人？ 前端几个人，后端几个人？

公司具体多少人我记不清了 , 刚好钉钉群或者微信群离职的时候给退了 , 所以现在具体多少人我也不

太清楚 , 但是我们那个开发小组大概个 5 人 ,1 个前端 ,2 个后端 ,1 个产品 ,1 个测试

7. 上一家公司给你的薪资是多少?

根据自己的需求

8. 你是那个学校毕业的?

你简历上写的学历

9. 你是什么学历?

本科

10. 你的学历是公办还是民办?

我上的这个学校是一个民办的学校

11. 你学的是那个专业?

根据自己办的学历的内容去说

12. 这个专业你都学过哪些课程或者你上大学都学过计算机哪些课程?你学的这些知识你还记得多少?你们的校训是什么?

我们的课程分为专业课和非专业课

非专业课 : 马克思主义 大学英语 高等数学

专业课 : 计算机基础 软件工程 数据库原理 c 语音 java asp c#

时间太久很多东西都忘了

校训在网上查一 下

13. 你为什么选择前端或者你是怎么接触到前端的 ?

我们公司当时也有开发部门 , 当时我和开发部门的领导关系比较好 , 他说让我自学一些技术 , 而且

技术部门的工资比较高 , 所以我当时就转技术了

我家里的亲人或者你哥你姐是做技术的 , 而且工资比较高 , 后来过年在一块的时候 , 他们就让我去

跟着他们学技术 , 然后平时他们会让我帮忙做一些东西 , 后台他们觉得我感觉做的东西还行 , 就帮

忙给我推荐了一家公司

我大学就是计算机专业的 , 所以大学毕业后就做的是开发

从培训机构

14. 你有没有在培训机构培训过 ?

没有

有 , 我大概两年前在培训机构培训过 , 现在已经工作三年了

15. 你找工作找了多久了 ?

错误回答 : 1 个月 或者 2 几个月

正确回答 : 刚开始找 , 咱们公司是我第一面试的 , 我已经面了两三家 , 目前已经收到了 1 家 offer

16. 你感觉你的优点是什么 ? 缺点是什么 ?

努力 , 学习能力强 , 有毅力 , 做事比较大气

我还真的没有去思考过这个问题

17. 谈谈你对前端的看法 ?

自己在网上搜相关的资料 , 自己去总结一套话术

18. 你上一家公司用的什么技术 ?

你擅长什么技术就说什么技术

19. 你感觉那一个项目是你最满意的项目 ? 你为什么觉得她是你最满意的项目 ?

我觉得我里面写的项目都挺满意的

可以选一个刚开始用 vue 做的项目 可以选一个最近做的一个项目

20. 那你对我们公司有没有了解 ?

没有 , 您能不能给我介绍一下

有 , 我在来咱们公司之前 , 我在网上搜索过咱们公司的一些内容

21. 你上一家公司什么类型公司 ? 是外包呢还是自己公司的产品 ?

自己简历上写的公司自己去查

22. 你的项目有没有上线地址 ?

结合实际情况去说 , 有

23. 你感觉你上家公司怎么样 ?

公司团队氛围好 , 领导对你特别好 , 不管是在技术或者在其他生活方面都可以给你带来很多的帮助

24. 你在你上家公司的收获是什么 ?

收获了技术和同事 , 领导

四、项目介绍

项目背景

您好 , 我给您说一下最近这个公司做的项目。我去这家公司的时候公司项目刚起步 ( 或者项目已

经开发了一部分了 ), 我去了之后主要是负责项目的切页面以及功能的开发 . 我当时的这个项目小组 ,

前端就我一个人或者两个人 , 后端 3 个人 , 产品和测试各 1 人 . 我当时做的这个项目的名字叫 x x x, 这是

一个什么样的项目 ( 项目概述 )

项目所使用的技术

在这个项目开发的时候 , 主要用到了 ( 项目所使用的技术栈 )

负责的内容

我在写这个项目的时候主要负责哪些模块 ( 简历上负责模块 )

项目功能

这个项目都有哪些功能 ( 可以是简历上写的功能 , 也可以是简历上没写的功能 , 但是说到的功能必须自

己会 , 并且能说出这个功能的思路 )

项目难点

我在写这个项目的时候主要遇到了哪些难点 ( 自己去总结 )

解决方案

这些难点的解决方式是 ( 自己去总结 )

项目总结

做完这个项目之后 , 我的收获是 ( 自己总结 )

五、面试官问题

1. 你们公司前端几个人 ? 后端几个人 ?

自己去说 , 一般是 1 比 2 或者 1 比 3 的一个比例

2. 后端用的语言 ?

Java php python node

3. 你这个项目是前后端分离吗 ?

是

4. 什么是前后端分离 ? 说说你对前后端分离的理解 ? 什么是前后端分离 ?

什么是前后端不分离 ?

传统开发 ( 前后端不分离 ) 的缺点

前后端分离的优点

5. 你们的接口规范是什么 ? 你知道 RESTFUL 吗 ?

自己去查

6. 那你说一下你和后台是如何交互的 ? 或者说你和后台交互的方式有哪些

原生的 ajax

jquery 的 ajax

axios

fetch

websocket

7. ajax 的通信原理是什么或者 axios 的原理是什么 ?

自己去查

8. axios 或者 ajax 或者 vue 中跨域是什么解决的 , 都有哪些方案 ?

为什么要有跨域 ?

跨域限制是服务端的一个行为，当开启对某些域名的访问限制后，只有同域或指定域

下的页面可以调用，这样相对来说更安全，图片也可以防盗链 跨域限制一般只在浏

览器端存在，对于服务端或 OS Android 等客户端是不存在的。

什么时候跨域 ? 介绍同源策略

跨域的方式有哪几种 ?

jsonp

vue 中通过 config.js 在里面的 proxy( 代理 ) 里面进行配置

iframe

node 写一个代理

Cros( 后端允许跨域 )

在项目开发中一般都用那种方式 ?

自己总结

9. 请你说一下 jsonp 的原理 ?

自己查

10. 请你说一下 iframe 是如何跨域的 ?

自己查

11. 你项目的难点是什么 ?

自己去总结

12. 你是怎么解决这些难点的 ?

自己去总结

13. 你这个项目是 H5 还是 app?

根据自己简历写的项目去回答

14. 如果是 app 的话 , 请问你们的这个 app 是那种 app? 是原生 app? 还是混合 app? 还是 webapp?

根据自己找的项目来回答

15. 什么是原生 app?

自己去查

16. 什么是混合 app? 自己去查

17. 什么是 webapp?

自己去查

18. app 是如何打包的 ?

将写好的 vue 项目通过 npm run build 命令进行打包 , 但是打包之前我们需要将路由配置 hash,

将 vu e.config.js 里面的 publicPath 配置为 ./

打开 hbuilderx, 创建 5+app 项目

保留 manifest.json 文件和 unpackaged.json 文件

将 vue 打包后的 dist 目录的内容放到 5+app 目录里面

在 manifest.json 文件里面可以配置打包的一些配置

点击发行 -> 选择云打包 -> 最后生成打包后的链接或者 .apk 这样的一个文件

19. 你们项目是如何开发的 ?

需求 - 原型图 - 流程图 - 设计图 - 接口文档

项目开发前的准备工作

项目使用什么技术开发

先开发的什么 , 后开发的什么

开发完成之后做什么

在公司里面一天

20. 什么是模块化开发 ?

自己去查

21. 项目里都用到了哪些插件 ?

自己总结

22. 项目都用到了哪些技术点 ?

自己去总结

23. 请你说一下你项目当中具体的某几个功能是怎么实现的 ?

自己去总结

24. 你是如何完成第三方登录 ? 或者说一下微信登录和 qq 登录的思路 ?

自己去总结

25. 项目如何上线 ?

不是你负责的 , 公司的项目上线是运维负责的 , 但是你知道项目大概怎么上线的

购买域名以及购买服务器 ( 域名需要认证 , 将近 1 个月的时间 )

购买的服务器上面搭建 nginx 服务器

通过 ftp 工具将我们的项目上传到 nginx 服务器就可以 ( 配置 nginx 跨域 / 代理 )

26. 项目开发了多久 ?

按项目的开发周期

27. 项目开发了几期 ? 每一期都有哪些功能或者优化了哪些部分 ?

自己去总结

28. 你对后端了解多少 ?

使用过 , 但很久了 , 很多东西已经忘了 , 但是可以快速上手

29. 你们项目开发的时候有没有什么代码规范 ? 如果有的话你们的规范是什么 ?

30. 你们这个项目都有了哪些框架 ?

自己总结 31. 你们为什么用 vue 开发 ? 为什么不用 react?

学习成本

踩坑成本

32. 在你写的项目中 , 你有没有封装过哪些模块或者组件 ? 你是如何进行封装的 ?

自己总结

33. 你是如何进行组件话开发的 ? 或者说一下你对最简化开发的理解 ?

自己总结

34. 说一下你在项目中是如何封装组件的 ? 有没有什么需要注意的 ?

自己总结

35. 我们开发组件应该尊重什么原则 ?

你对组件开发的理解以及官方的描述 :

开放性

封闭性

粒度

36. 你觉你这个项目的亮点是什么 ?

代码层面

37. 你最近写的项目写完之后你的收获是什么 ?

自己总结

38. 你一共做过多少个项目 ? 这些项目都有哪些类型的

自己总结

39. 最近做的这个项目 ?

自己根据自己简历写的项目去说

40. 你写的这个项目是 h5 还是 app, 还是 pc 端 , 还是安卓 , 还是 ios?

自己总结

41. 为什么公司要做这个项目 ?

我刚去的时候项目都已经开始了 , 所以我也不太了解

42. 项目的开发周期多久 ?

自己总结

43. 项目的开始时间以及项目的结束时间 ?

自己根据简历上写的内容去总结

44. 项目一共分为多少期 ?

自己总结

45. 这几期每一期做到什么程度 ? 每一期之间的区别是什么 ? 或者描述一些每一期都做了耐饿功能和优

化 ?

自己总结

46. 项目一共有多少个功能 ? 那个功能你觉得最难 ? 为什么 ? 你是怎么解决的 ?

自己总结

47. 项目的开发流程 ?

开会讨论需求 -> 出原型图 - 》流程图 - 〉设计图 - 》编码 - 〉测试 - 》上线

48. 项目是几个人开发的 ?

自己总结 49. 项目各自的分工是什么 ? 你们是怎么划分任务的 ?

我都负责了哪些模块的开发

领导划分任务

50. 公司的版本控制工具用的什么 ?

git svn - 》 gitlab

51. 你们是如何进行多人协同开发的 ?

自己总结

52. 项目开发的前期你都在干什么 ?

自己总结

53. 如果让你重新再做这个项目 , 你觉的哪些 地方还可以再优化 ?

代码层面去分析

54. 你在做这个项目的时候 , 你是如何去排查 bug?

自己总结

55. 你们这个项目前后端是怎么交互的 ?

ajax axios fetch ifrmae

56. 项目是如何上线的 ? 项目上线流程是什么 ?

不是我负责的 , 但是我知道大概的流程

六、 vue 面试题

6.1 . MVC 、 MVP 与 MVVM 模式

MVC ：

MVC 是应用最广泛的软件架构之一，一般 MVC 分为：

Model （

模型 ） 、 Controller （

控制器 ） 、 View （

视图 ） 。

这主要是基于分层的目的，让彼此的职责分开。 View 一般通过 Controller 来和 Model 进行联系。

Controller 是 Model 和 View 的协调者， View 和 Model 不直接联系。基本联系都是单向的。 1 、 View 传送指令到 Controller

2 、 Controller 完成业务逻辑后，要求 Model 改变状态

3 、 Model 将新的数据发送到 View ，用户得到反馈

MVP ：

MVP 模式将 Controller 改名为 Presenter ，同时改变了通信方向。

1 、各部分之间的通信，都是双向的。

2 、 View 与 Model 不发生联系，都通过 Presenter 传递。

3 、 View 非常薄，不部署任何业务逻辑，称为 " 被动视图 " （ Passive View ），即没有任何主动性，

而 Presenter 非常厚，所有逻辑都部署在那里。

MVVM

MVVM 是把 MVC 的 Controller 和 MVP 的 Presenter 改成了 ViewModel 。 View 的变化会自动更新到 ViewModel ， ViewModel 的变化也会自动同步到 View 上显示。这种自动

同步是因为 ViewModel 中的属性实现了 Observer ，当属性变更时都能触发对应的操作。

6.2 MVVM 模式的优点以及与 MVC 模式的区别

MVVM 模式的优点：

1 、低耦合： 视图（ View ）可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同

的 "View" 上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。

2 、可重用性： 你可以把一些视图逻辑放在一个 ViewModel 里面，让很多 view 重用这段视图逻辑。

3 、独立开发： 开发人员可以专注于业务逻辑和数据的开发（ ViewModel ），设计人员可以专注于页面设

计。

4 、可测试： 界面素来是比较难于测试的，而现在测试可以针对 ViewModel 来写。 MVVM 和 MVC 的区别：

mvc 和 mvvm 其实区别并不大。都是一种设计思想。

主要区别

mvc 中 Controller 演变成 mvvm 中的 viewModel ，

mvvm 通过数据来显示视图层而不是节点操作。

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

6.3 常见的实现 MVVM 数据绑定的做法有哪些？

实现数据绑定的做法有大致如下几种：

发布者 - 订阅者模式（ backbone.js ）

脏值检查（ angular.js ）

数据劫持（ vue.js ）

1 、发布者 - 订阅者模式 :

一般通过 sub , pub 的方式实现数据和视图的绑定监听，

更新数据方式通常做法是 vm.set('property', value) 。

这种方式现在毕竟太 low 了，我们更希望通过 vm.property = value 这种方式更新数据，同时自动更

新视图，于是有了下面两种方式。

2 、脏值检查 :

angular.js 是通过脏值检测的方式比对数据是否有变更，来决定是否更新视图，

最简单的方式就是通过 setInterval() 定时轮询检测数据变动，

angular 只有在指定的事件触发时进入脏值检测，大致如下：

3 、数据劫持 :

vue.js 则是采用 数据劫持 结合 发布者 - 订阅者 模式的方式，

通过 Object.defineProperty() 来劫持各个属性的 setter ， getter ，

在数据变动时发布消息给订阅者，触发相应的监听回调。

1 、 DOM 事件，譬如用户输入文本，点击按钮等。 ( ng-click )

2 、 XHR 响应事件 ( $http )

3 、浏览器 Location 变更事件 ( $location )

4 、 Timer 事件 ( $timeout , $interval )

5 、执行 $digest() 或 $apply() 6.4 Object.defineProperty() 方法的作用是什么？

Object.defineProperty() 方法 会直接在一个对象上定义一个新属性，或者修改一个对象的现

有属性， 并返回这个对象。

语法：

参数说明：

返回值：

针对属性，我们可以给这个属性设置一些特性，比如是否只读不可以写；是否可以被 for..in 或

Object.keys() 遍历。

给对象的属性添加特性描述，目前提供两种形式：数据描述和存取器描述。

6.5 vue.js 的两个核心是什么？

1 、数据驱动，也叫双向数据绑定。

Vue.js 数据观测原理在技术实现上，利用的是 ES5Object.defineProperty 和存储器属性 : getter 和

setter （所以只兼容 IE9 及以上版本），可称为基于依赖收集的观测机制。核心是 VM ，即

ViewModel ，保证数据和视图的一致性。

2 、组件系统。

.vue 组件的核心选项 :

1 、模板（ template ）：模板声明了数据和最终展现给用户的 DOM 之间的映射关系。

2 、初始数据（ data ）：一个组件的初始数据状态。对于可复用的组件来说，这通常是私有的状

态。

3 、接受的外部参数 (props) ：组件之间通过参数来进行数据的传递和共享。

4 、方法（ methods ）：对数据的改动操作一般都在组件的方法内进行。

5 、生命周期钩子函数（ lifecycle hooks ）：一个组件会触发多个生命周期钩子函数，最新 2.0 版本

对于生命周期函数名称改动很大。

6 、私有资源（ assets ）： Vue.js 当中将用户自定义的指令、过滤器、组件等统称为资源。一个组

件可以声明自己的私有资源。私有资源只有该组件和它的子组件可以调用。

等等。

6.6 请详细说下你对 vue 生命周期的理解？

6.6.1 什么是 vue 生命周期？

Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载 Dom 、渲染 → 更新

→ 渲染、销毁等一系列过程，我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程，就

是生命周期。

Object.defineProperty(obj, prop, descriptor)

obj ：必需。目标对象

prop ：必需。需定义或修改的属性的名字

descriptor ：必需。目标属性所拥有的特性

传入函数的对象。即第一个参数 obj 6.6.2 vue 生命周期钩子函数都有哪些？分别是什么意思？

组件通过 new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行 beforeCreate 钩子函

数，这个时候，数据还没有挂载呢，只是一个空壳，无法访问到数据和真实的 dom ，一般不做操作

挂载数据，绑定事件等等，然后执行 created 函数，这个时候已经可以使用到数据，也可以更改数

据 , 在这里更改数据不会触发 updated 函数，在这里可以在渲染前倒数第二次更改数据的机会，不会

触发其他的钩子函数，一般可以在这里做初始数据的获取

接下来开始找实例或者组件对应的模板，编译模板为虚拟 dom 放入到 render 函数中准备渲染，然

后执行 beforeMount 钩子函数，在这个函数中虚拟 dom 已经创建完成，马上就要渲染 , 在这里也可

以更改数据，不会触发 updated ，在这里可以在渲染前最后一次更改数据的机会，不会触发其他的

钩子函数，一般可以在这里做初始数据的获取下来开始 render ，渲染出真实 dom ，然后执行

mounted 钩子函数，此时，组件已经出现在页面中，数据、真实 dom 都已经处理好了 , 事件都已经

挂载好了，可以在这里操作真实 dom 等事情 ...

当组件或实例的数据更改之后，会立即执行 beforeUpdate ，然后 vue 的虚拟 dom 机制会重新构建

虚拟 dom 与上一次的虚拟 dom 树利用 diff 算法进行对比之后重新渲染，一般不做什么事儿

当更新完成后，执行 updated ，数据已经更改完成， dom 也重新 render 完成，可以操作更新后的虚

拟 dom

经过某种途