贝壳找房前端实习一二三面面经

贝壳首先是要做一个线上的测评，我是5.20线下投递，5.28做完测评当天就给我打电话约了一面时间，效率很高的一家公司！一面完过了十分钟就给我打电话让我接着二面，二面完过了十分钟又给我打电话约了6.3的hr面（如果不是因为接下来我有事估计就是接着面了）。贝壳的面试官人都很好！！

6.1 贝壳找房前端一面 - 视频面30min

一面面试官是个口音有点重的小哥，好几次没听清楚他问我什么hhh，但也因此感觉特别接地气，很和蔼可亲。

自我介绍+项目

你的项目用过哪些页面布局？比如说flex
项目用的是vue哪个版本？vue的双向绑定原理了解过吗？用vue-cli创建的项目是吗？
编译工具是webpack是嘛，用vue-cli创建完后，webpack各种loader了解过吗？比如说样式构建使用css-loader、style-loader，图片的话用url-loader。
项目里前端和后端交互用的什么做的？异步请求？ajax？
你们的项目用了什么组件库？

前端知识+计网

了解HTML5吗？简单说一下HTML的语义化标签
说一下CSS里的单位，比如说px、em、rem
了解过BFC吗？
输入url到页面显示发生了什么？
说说客户端拿到服务器返回的HTML信息之后的重绘和渲染的区别是什么？
谈谈JS的闭包
JS的深拷贝和浅拷贝了解过吗？
JS的前端的缓存cookie，session storage和local storage的区别？
了解过浏览器的同源策略吗？比如说在请求的时候跨域了，怎么解决这个跨域？

git知识（简历上写了这个）

之前用过github？github里有自己写的项目吗还是只是用来收藏一些资料？
用过git命令吗？比如说克隆一个项目是用git clone还是用的工具？
比如说拉取一段代码，git pull然后后面是怎么写的？
了解过git pull和git rebase的区别吗？
git flow工作流了解过吗？比如说3-5人开发的项目里，创建分支怎么规范？

算法题

用JS写一个冒泡排序

反问

部门和业务？
点评面试表现？（这里又问了我一个根据什么来定义自己想从事前端这个岗位的？）
建议的前端的学习方法？

（我发现多面试的好处就是我把我不会说得更理直气壮了。（bushi）

6.1 贝壳找房前端二面 - 视频面50min

马上二面是我没有预料到的，因为我说了很多不会的，感觉在前端知识方面还有很多要学习。而且一面面试官最后特正式地说了一句“感谢你选择投递贝壳”，还以为这是暗示我已经凉了，没想到还有二面。

二面的面试官好会引导人思考，特别循循善诱！因为是科班出身，他问了我一些前端以外的软件开发过程的问题。我之前的面试都感觉面试官提问题都是东一榔头西一棒槌的，而这一面就感觉是把很多东西给串起来。我回答不出来的，他都会给我讲解引申一下，很有交流探讨的感觉。

开放性问题+聊项目

介绍一下学习经历包括一些在校期间参与的一些项目
对前端的理解

你对前端的理解？你觉得前端在一个公司里面主要应该扮演一个什么样的角色？（面向终端使用者，注重交互流畅、用户体验）前端分几个部分，第一个部分是可视化，另一个部分是数据方面的，一些非业务数据的，比如一个购物网站，我们可能并不关注用户下单之后的动作，我们可能会关注用户下单之前的动作，你能大概理解前端在一个项目开发过程中的意义吗？以你的项目为例，研发人员是分为多少个角色，他们是怎么互相协作的？
前后端合作

那前端和后端合作的过程中，你刚刚提到了前端先写好接口标准，给到后端开发，但你觉得这种合作方式有没有什么弊端呢？

一般的企业里，一个前端要对3-4个后端，接口如果是前端来定的话，要求前端对业务非常熟悉，但大多数项目中，基本都是后端先了解业务以后，将接口文档给到前端以后，前端做mock，然后才开始做开发。所以一般情况下，标准是后端开发来定的。
测试

你刚刚提到的衔接链里少了一个关键的部分是测试，那你对测试是怎么看呢？你觉得前端应该做哪些测试？QA了解吗？你觉得前端从代码和交互上都需要通过哪些测试以后才能上线？
单元测试

我们一般的测试分两种，其中一种是代码测试，代码测试可能就是一段单元测试，那你之前了解过单元测试吗？大概是什么东西？定义方面的就可以。

单元测试就是可能会去看某一个函数有没有成功，或看某一个页面有没有渲染成功。
自动化测试

单元测试以外，还有一种是自动化测试，自动化测试就是比如说，前端涉及到的点击事件，人工测点击事件需要功夫，所以我们就需要有自动化测试来模拟操作，那你之前有没有了解过这种UI模拟的测试？或者说让你来做的话，你有什么思路？说一下思路就可以。

因为咱们所有页面都是通过DOM结点组成的，你所有的操作实际上都是DOM结点，那我们既然要做一个自动化测试，就是一个模拟DOM操作的过程，那你觉得我们应该怎么模拟呢？比如现在一个表单提交，表单就是一个登录，有用户名有密码，然后再点击确定，这个操作作为一个测试单元，如果让你来做这个自动化测试的话你有什么思路？

一个前端产品的上线，除了你刚才说的要从需求到开发，还要有测试。不需要太专业，但还是希望对这个项目有一个整体的把握，各个环节点做的程度不一样但至少要做到。
webpack

我看你还写了基于webpack构建的项目环境，那你首先解释一下什么是webpack，你用它做什么？

webpack主要还是解决一个模块化编译的问题，比如处理一些css文件，一些静态文件，或者要把编译的东西进行拆包和打包。在webpack没有出现之前，JS是比较分散的。一般我们会把一堆JS打包成一个或多个，主要是为了一个编译的问题，webpack里面有很多loader，后续你可以了解一下。webpack里面有很多配置信息你们知道吧，你项目里面是拿过来直接用呢，还是加入了自己的一些自己配置信息？那你们webpack打出来的文件，是打成一个了还是打成多个了呢？

比如在开发工作中，从10到20个JS文件，最好打包成一个文件，你觉得这是好还是不好？

比如说一个系统，打成了一个JS和一个CSS，那么刚打开界面的时候就要把这个JS和CSS加载进来，如果说你把这个文件叫做1.js，你每一次打包都会产生一个1.js的文件，那它会产生一个什么样的不良问题？

这个问题可能和缓存有关。比如版本1打出一个1.js，版本2也打出一个1.js，这两个1.js内容不一样，但名字不一样，当我发到线上的时候，可能因为缓存发生什么样的问题？（有的用户因为手机或电脑设置不一样，发了第二个版本以后，他还处在第一个版本，就是根本没更新到上面）

所以webpack打包的时候就有一个设置，每一次打包的名字是不一样的，打一个和打多个的区别就出来了。如果一个项目特别大，就打出一个JS，它文件也会很大，这就涉及到前端加载效率的问题。如果打成多个呢，就有一个异步加载的过程，效率就比较平滑。
页面优化

刚才我说的所有都是一个页面优化的问题，那除了我说的这些，你知道哪些常用的页面优化的方法？（减少HTTP的请求）怎么减少？
HTTP状态码

HTTP请求需要的类型比较多，涉及到很多状态、很多请求方式，比如说web socket听说过吗？HTTP状态码200和401？（200是请求成功，401是没有权限，500是服务器错误）
node

后端不只支持一个部门，导致数据接口不能像我们要求的一样。比如说首页我们要访问十个数据源，后端给我们提供了十个接口，后端这十个接口可能别人也在用，所以他不可能给你变成一个，那这样的话作为前端有什么解决方案吗？一下子加载这十个接口肯定是不行的，效率太低下，产生错误的几率、用户打开的速度肯定都会受影响。那你有什么处理的思路？

如果后端能帮你解决这个问题，你要提一个什么方案？（变成一个）在后端没有办法完成的情况下，前端有一个工具可以实现，node或者dnode。node可以限制或者合并一些访问，推荐你看一些公众号上的关于node的实践。
vue

项目为什么用vue，怎么选的框架？在你之前没有学vue之前是怎么写的js？那你觉得vue解决了一个什么问题，为什么大多数人用vue这种框架写而不是用原生JS去写？

vue是数据驱动的，页面的改变和渲染是通过接口数据、返回数据不一样导致的。那你有没有思考过为什么是以数据驱动去做渲染，而不是事件驱动？

之前前端用的jQuery有了解过吗？它就是事件驱动的。

无论是vue还是react，里面都有一个子组件和父组件，你理解组件这个概念吗？

比如一个input输入框，有时候我希望输入的是纯数字，有时候必须是身份证号，有时候希望输入的是手机号，说明input就有很多的可能性。如果input具备了以上的所有属性，它的属性就变广了，那前端是怎么知道它有时候输入的是身份证号，有时候是手机号？就是把一个input输入框变得更有可能性，支持更多的业务，把它封装起来，它就可以称作组件。input是表单里面的一个组成部分，那表单就是父组件，input就是子组件。

你们这个项目里面，有涉及到表单验证的方面吧？如果要保证填入的是身份证号，应该怎么做？（正则表达式），正则表达式你了解多少？
项目中遇到过的最难的问题是什么，怎么解决的？