2019 面试实战 - 第一回合

Create by jsliang on 2019-2-27 18:51:26

Recently revised in 2019-3-3 14:42:54

Hello 小伙伴们，如果觉得本文还不错，记得给 jsliang 的文档库点个star， 你们的star是我学习折腾的动力！ GitHub 地址

并不是只有特定的季节才能跑路，只因为人跑得多了，这条路就定下来了。

金三银四跑路季， jsliang 也去尝试了一波，然后写下这篇文章。

接下来还会有第二回合以及最后的面试题总结，小伙伴们可以关注我掘金和 GitHub 哈~

一 目录

不折腾的前端，和咸鱼有什么区别

目录
3.2 一面技术 - 前端架构师
3.3 二面技术 - 技术负责人
3.4 三面个人 - 人事小姐姐
3.5 四面个人 - 项目负责人
4.2 技术一面 - 笔试题考查
4.3 技术二面 - 前端小姐姐
4.4 整体三面 - 项目负责人

二 前言

请时刻准备好自己的简历，不管是互联网经济不佳面临裁员，还是因为公司内部斗争严重想换份工作，还是因为厌倦了目前的一切……只有随时更新自己，把自己的简历准备好，你才知道哪一刻跑路是最佳选择。

• 时间 ：2019-2-27
• 地点 ：广州
• 年限 ：一年工作经验
• 薪酬要求 ：9K - 15K
• 场次 ：上午一场，下午一场
• 感想 ：非常疲惫，但是感觉很有动力，“没有一家解决不了的，如果有，那就再跑一家！”

三 早上 10:00

1. 公司规模 ：员工 5000 +
2. 行业 ：电商
3. 面试前 ：怕广州 3 号线塞车，又觉得这份工作应该不错，于是 7 点就出门，8 点到了这个公司附近，溜达了一圈，感觉附近饭馆比较多，并且离地铁站 5 分钟左右，还是挺不错的。溜达到 9:20，上楼跟前台小姐姐打招呼后，拿到了两份表：一份个人信息表，一个性格测试表（可能大点的公司都考虑你的性格，毕竟团队开发），印象深刻的是性格测试表还有错别字：“坚定” 写成了 “鉴定”。 可能我精神比较集中，一下子就看到了，但是 offer 没下来，就没敢跟人事小姐姐吐槽了，免得给人坏印象。
4. 准备完毕 ：交表，等待面试。

3.1 Job Description

薪酬：10K - 15K

岗位职责：
1、独立完成公司中后台项目的前端开发
2、与后端开发一起，确定接口协议
3、独立完成接口文档的编写并组织评审
4、深入解析代码, 提升代码执行效率, 加强代码兼容性
5、对用户交互有深刻理解，能帮助产品优化交互体验

任职要求：
1、有2年以上前端开发经验
2、对各种Web前端技术（JavaScript，CSS，语义化标签等等）有深刻理解；
3、熟悉服务器端Web应用结构，有服务器端脚本语言经验更佳
4、熟悉WEB应用的MVC，MVVM结构
5、英文4级以上

应具备的知识与技能：
1、精通HTML5、CSS3等网页制作技术，熟悉页面架构和Flex布局；
2、精通JavaScript、Ajax等Web开发技术
3、熟练使用ES6,有Reactjs的使用经验；
4、熟练使用Git,Webpack等工具；
5、熟悉W3C标准，对表现与数据分离、Web语义化等有较为深刻的理解；
6、思路清晰，具备良好的沟通能力和团队协作精神，善于学习、总结，乐于分享。
复制代码

3.2 一面技术 - 前端架构师

对话内容如下：

• 面试官 ：“你好，我是 ***。”
• 我 ：“你好。”
• 面试官 ：（翻简历）
• 面试官 ：“挺不错的嘛，还有个高 star 的项目？”
• 面试官 ：（打开手机）
• 面试官 ：“账号多少，我能看看么？”
• 我 ：“好的，账号 LiangJunrong ，你可以去瞅瞅，那个项目主要是我用来写我个人的前端知识体系的。”
• 面试官 ：“那你是如何让更多人知道你的？”
• 我 ：“我在掘金上有发表文章，然后如果觉得掘金上自己写的某篇文章还过得去的时候，也会在微信、QQ 上发下掘金的链接。”
• 面试官 ：“能介绍下这里面，你觉得最有印象的东西吗？”
• 我 ：“最有印象么？”
• 我 ：（思考）
• 我 ：“这里面最有印象的，一个是微信小程序，关于通讯录的做法。是我在 2018 年 10 月份的时候，驻点电信写微信小程序，其中有个联系人模块，因为微信小程序我是边看文档边查阅资料写的，所以那个联系人模块是完全没有其他插件，自己写的。工作上的功能实现是领导满意的，但是下班之余，觉得修改和新增可以更进一步优化 ① ，于是想了下，可以使用二分法来实现修改、新增后跳转到相应的位置。怎么说呢？就是你已经写好了列表后，按 ② ……”

①：关于修改、新增的操作，小伙伴可以打开自己的爪机，试试修改、新增完之后，是不是页面要滚动到操作之后的位置，然后想想如果是自己，会如何实现。

②：关于微信通讯录的做法，可参考文章 【微信小程序之奇技淫巧】 ，里面全程分析了简单做法和优化观点。

• ……该部分中 jsliang 和面试官还有一些探讨，太长了这里忽略不提……
• 面试官 ：“能介绍下这个侧边栏实现吗？”
• 我 ：“假设我需要跳转到 D 桶（前面 面试官 讲了下分桶），那么，我首先需要知道 A 桶、B 桶、C 桶各有多少条，然后将条数 * 每条高度，以及字母 A、B、C 的高度，最后想加起来获得需要滚动到的位置。并且我做了兼容，在 IPhone 6、IPhone X 上都能确却滚动到具体位置。 ③ ”

③：需要清楚的是，在 WXSS 中，你写的是 100rpx，在 IPhone 6、IPhone X 上表现的高度是不一致的，需要根据获取的设备比，从而获取到实际每条的高度。

• 面试官 ：“你是小程序做的比较多么？”
• 我 ：“小程序的话，我做了 2 个月。然后 Vue 的话，我是毕业设计的时候，用了 Vue + Node + MongoDB。然后在 11 月份的时候，用了 Vue + ECharts 做了报表，展示电信的运营数据。”
• 面试官 ：“你能介绍下关于 React 的经验么？”
• 我 ：（慌）（强行镇定）React 是那时候在公司总部，需要开发新项目，前端大哥说可以考虑换成 React 开发。但是做到一半的时候，我就被调到电信驻点去了， 所以 React 和 Angular 都是看了一点，想实现的时候，中断了。”
• 面试官 ：“那你是说单单使用过微信小程序和 Vue 么？”
• 我 ：“（慌）额(⊙o⊙)…我使用过 Vue、微信小程序、jQuery。 ④ ”

④：这个公司 JD 要求需要 React，并且日常开发也是使用 React 的。

• 面试官 ：“那你就是没实际工作用过 React。”
• 我 ：“对，是的。”
• 面试官 ：“那你介绍下对 Vue 的了解，并使用 Vue 做的事情吧。”
• 我 ：“个人感觉的话，在目前前端上，模块化、组件化比较多，有一些东西，例如：头部组件。当我们使用比较多的时候，我们就要抽离出来，组件化它。然后在需要使用的时候，去使用它。然后在 Vue 的使用上，感觉就是拼积木，把你需要的东西拼接起来。然后在 Vue 中，主要三大块：Vue、VueCli、VueRouter、Vuex 数据状态管理。噢，四大块了。”
• 面试官 ：“那你能介绍下 Vuex 吗？”
• 我 ：“不好意思，Vuex 介绍不了，毕竟现在最多就是写小程序，虽然之前有使用过，但是代码这些东西，您也知道，太久不使用都会忘了。”
• 面试官 ：“嗯，那好，你说使用微信小程序比较多，那你能讲讲热更新部分么？”
• 我 ：“不好意思，没了解过。”
• 面试官 ：“就是说，我小程序上出了非常严重的 bug，但是你知道，提交给微信审核，需要时间，那么我能不能在不提交审核的情况下进行更新。”
• 我 ：（思考）“enm...”
• 面试官 ：“那么假如就是这种情况了，你有什么想法吗？或者说依你对小程序的理解，尝试解决下这个 bug？”
• 我 ：（思考）（自言自语）不好意思真不知道。
• 面试官 ：（换话题）“对 ECharts 有什么介绍么？”
• 我 ：（微笑）“ECharts 这个的话，感觉就是非常好玩。当然，在数据操作的时候，你要注意一下。”
• 面试官 ：“比如？”
• 我 ：“比如说有一次在调取接口，做数据循环输出的时候，因为没注意，直接导致整个浏览器崩溃。”
• 面试官 ：“因为渲染次数太多了。”
• 我 ：“是的。”
• 面试官 ：（翻简历）（打开手机）
• 面试官 ：“能介绍你这个刮刮奖么？我觉得挺有意思的。 ⑤ ”

⑤：【幸运刮刮乐】 —— jsliang 屏蔽敏感部分，发来玩玩的手机页面。

• 我 ：“刮刮奖的话，是一次活动制作，然后我找了一个 Canvas 画图的插件做的。”
• 面试官 ：“那现在有个问题：我是如何知道它什么时候展开。”
• 我 ：“这个是通过面积计算它来展开的。”
• 面试官 ：“你是觉得如何实现的呢？”
• 我 ：“enm...不太情况。”
• 面试官 ：“当初使用的时候，没有看它源码么？”
• 我 ：“没有。”
• 面试官 ：“你觉得它是如何计算它刮开的面积？”
• 我 ：（尴尬）“计算刮开的面积……”
• 面试官 ：“你看，这样这样计算……”（提示）（教导）
• ……中间省略吧，太丑了……
• 面试官 ：“当初你应该看下它源码实现，因为这是个很经典的话题。”
• 我 ：“是的，当初我应该自己用原生 JS 去试试，而不是直接拿来用。或者拿来用的时候，去瞅瞅它的实现。”
• 面试官 ：（翻简历）
• 面试官 ：“我觉得你还是挺好的，简历上贴了这么多页面。”
• 我 ：“是，因为我个人比较喜欢折腾，然后将自己折腾的东西，通过部署服务器让大家也能看看。还有就是做些统计，比如这些页面里面都嵌入了百度统计代码，然后可以查看下都有哪些用户会点击。”
• 面试官 ：“那你平时是怎么使用这些数据呢？”
• 我 ：“enm...没想过。”
• 面试官 ：“就好比说，你通过查看这些数据，发现有些数据是 A 平台过去的，有些数据是 B 平台上去的，然后发现大部分是 A 平台的……”
• 我 ：“噢噢，是的，如果大部分是 A 平台的，我可以在 A 平台编写更多文章，然后看下是哪个话题比较多，从而知道该哪个部分投放精力。”
• 我 ：“这个还真没有想法，不过经你一说，发觉这个还是不错的，运营方面还真没想到。”
• 面试官 ：“是的，你知道怎么获取数据，那么这些数据的使用技巧你也可以去折腾下。毕竟像某个渠道的转化率比较高，你就可以投放该渠道……”
• 我 ：“是的是的，这个不错。”
• 面试官 ：“嗯，其实你这个也像运营了，毕竟你通过多个渠道去推广自己。”
• 面试官 ：“好的，我大致了解了。然后你知道我们这边主要做啥么？”
• 我 ：“不太清楚。”
• 面试官 ：“是这样的，我们主要使用 React 做后台管理系统。”
• 我 ：“enm...我觉得当你业务写到一定程度的时候，你会发现技术有很多是雷同的，在这些技术上可以做到灵活切换。如果是使用 React，我是可以接受的。”
• 面试官 ：“好的好的，那你先在这等会，我去跟上面沟通下。”
• 我 ：“好的，谢谢~”

总结：

首先，这么详细的对话，当然不是我记忆力好，隔了四天还能记得，而是我当初录了音，今儿整理出来的。（不知道这个录音属不属于禁忌，但是个人觉得，每一次面试就是扩展你的知识面，毕竟面试官能给你带来你不知道的新鲜观点和知识层面）

然后，听到其中一些点，现在也感觉到尴尬，同时感觉那时候应该可以做到更好发挥。

最后，就是这个面试官给人的感觉还是挺好的，至少当某些问题 jsliang 不会的时候，他还会给你讲讲他的观点，而不是直接跳过，让你感到心堵，从而给你更多的压力。

3.3 二面技术 - 技术负责人

经过一段时间的等待，迎来第二面面试官：

• 面试官 ：“我好，我叫 **”
• 我 ：“你好。”
• 面试官 ：（翻简历）
• 面试官 ：嗯，挺能折腾的嘛小伙子，喜欢写文章是吧？不过你的定位还是小了。来，我们都是程序员，日常接触最多的就是电脑，那么，你知道系统 32 位和 64 位的区别吗？”
• 我 ：“（触不及防）“enm...不好意思不记得了。 ① ”

①：讲真我不是电脑发烧友，当初购买自己手提的时候，也是看到哪个参数不懂就去查哪个，大学时代为了把妹精通各种系统重装啥的……别逗了！怎么可能在我身上发生！所以我真不知道，我就是这么菜。

• 面试官 ：“你看，是吧~为什么 64 位系统会跑得比 32 位系统快呢？首先我们应该知道计算机系统是由 0101 组成的，然后…… ② ”

②：扯不下去了，跟这位面试官的对话我并没有录音，现在就依稀记得一下关键点，所以记录的是关键部分。如果小伙伴觉得自己知道这些知识点最好，如果小伙伴觉得自己不懂，记得先 mark 到手机记事本啥的，可以去了解了解。

• 我 ：“嗯嗯，好的，学到了，我文章又来了个可以折腾的点。”
• 面试官 ：“好，既然说到这个存储，那么关于图片，你了解哪些形式，你觉得哪种场合用哪种？它们优劣如何？然后这些图片的应用场景能说说不？”
• 我 ：“jpg、png、gif，嗯，大致这三种。然后 gif 支持动画、png 拥有透明背景、jpg 应用比较广泛。通常情况下大小来说，gif 最大，再来是 png，最后是 jpg。”
• 面试官 ：“那你知道为什么这三者会存在这种差别么？”
• 我 ：（懵逼）“不清楚……”
• 面试官 ：“因为计算机对它们的压缩算法不同，还有，你有没考虑过矢量图。”
• 我 ：“噢噢，不好意思，刚才忘记说到这个，图片还可以按矢量图和位图来划分，矢量图的话，例如 svg，它不会因为你图片在不同场景的放大缩小而变得模糊。”
• 面试官 ：“嗯，你看，图片使用是不是我们工作中要面对的一个话题，这样你是不是应该可以根据这话题写一篇文章了（笑）。”
• 我 ：（感兴趣）“是的，我回头就去写一篇关于图片的文章。 ③ ”

③：这个真的不是要忽悠面试官，文章我已经开好坑了： 【2019 面试准备 - 图片】 ，写完这篇文章，下一篇就写完这个。

• 面试官 ：“很好，我们继续下一个话题，在电商中，商品排放总是有一定道理的。现在我有两种关于商品的 排序 方式，分别存放在 A 页面与 B 页面中。然后，在只有前端的情况下，如何让 50% 的用户访问到 A 页面，50% 的用户访问到 B 页面。”
• 我 ：“enm...不能使用后端，或者 Nginx 负载均衡轮询？”
• 面试官 ：“不行。”
• 我 ：（深思）（自言自语）“enm...不清楚。”
• 面试官 ：“其实你刚才也提到过使用随机数的设想（自言自语中提到了），那么，我们如何让页面访问的概率为 1/2 呢？我们可不可以将这个数尽可能放大，然后再划分？”
• 我 ：（恍然）“嗯，可以将它们 %2，这样，我们就只有两种情况，一个是 0，一个是 1。因为随机范围足够大了，所以用户访问的概率也分为一半一半了。”
• 面试官 ：“很好，既然你知道 50% 和 50% 是这样子搞了，那么，你能不能做到 25% 与 75% 的划分？”
• 我 ：（笨地捉急）
• 面试官 ：“不要急，你想想，当我们 %2 的时候，会获取到两种情况，那么，一个数 %3，会有几种情况？是的，三种，0 1 2，还是通过取余，所以，我们只需要将一个尽可能大的范围的数，将它 %4，这样就有 0 1 2 3 四种情况，我们是不是就可以划分 25% 和 75%了。”
• 我 ：（再度恍然）
• 面试官 ：“那你知道取余在工作中的用法吧？”
• 我 ：“不清楚……”
• 面试官 ：“你可以了解下视频缓存，我们能不能不能因为视频有多大，我们就开多大位置给它？不能是吧，那么，我们就要在一个位置，将它存下来…… ④ ”

④：由于没有录音佐证我的记忆是否真实，所以这里进行对话省略，免得看文章的小伙伴对面试官有误解，觉得面试官其实也不懂。按照我面试之后的想法，其实就是开辟一段内存，然后浏览器接受服务器传过来的数据，在内存中，进行 %n 的形式来存储数据（n 为开辟的内存大小），接着当我们需要读取视频数据的时候，我们只需要通过先进先出的形式，将最新存进内存的数据读取出来，这样就做到了视频的还原。

• 我 ：“是的，学到了！”
• ……记忆回放到这里，其他都是不太深刻的问题了……
• 面试官 ：“总体来说还是不错的，行，你等会，我叫人事过来跟你谈谈。”
• 我 ：“好的，谢谢！”

总结：

首先，一开始我以为面试官开头，也是“面试造火箭，工作拧螺丝”，但是后面说到图片以及图片排序方式，我觉得这个也是挺正常的，毕竟是电商企业。

然后，关于个人知识体系，当时跟面试官说了句：“现在程序员，一流通数学，二流通算法。我是比较想多点学习算法的。”（其实这话是刚好那天票圈在说 程序员 等级制，我当然是不入流啦！）当时面试官还给了下肯定。

最后，觉得还是心态放好来，毕竟如果好多问题你都不会，你应该想想能不能扯开到你熟悉的领域，因为你表现不好，心态又不好，面试官肯定印象极差。

3.4 三面个人 - 人事小姐姐

经过一段时间的等待，迎来了一开始的人事小姐姐：

• 人事小姐姐 ；（笑）“刚才聊得怎么样？”
• 我 ：“第一面还不错，第二面有点小紧张。”
• 人事小姐姐 ：“有点小紧张？”
• 我 ：“对！”
• 人事小姐姐 ：“然后对咱这边的项目及一些情况，有些了解没？”
• 我 ：“不太清楚。 ① ”

①：看过前面的小伙伴应该知道，一面面试官最后提到了，是的，我那 7 秒钟鱼的记忆！

• 人事小姐姐 ：“我们公司是个跨境电商，然后人数的话……（介绍公司一些情况，这里不多累述）”
• 人事小姐姐 ：“介绍就到这里，然后你还有什么问题想要跟我咨询下的？”
• 我 ：（瞎扯些话题）
• 人事小姐姐 ：“嗯，你这里写最迟要 4月1日 入职是吧？”
• 我 ：“是的，因为你也知道，一般合同都会签个离职一个月进行交接的，签合同的时候，标明正常离职需要 30 天，你也清楚，规矩还是不能说坏就坏的…… ② ”

②：关于入职时间，是个很令人烦恼的问题。如果你跟公司关系很好，可以申请快速办理离职手续，那就非常好；如果你跟公司关系不好，又有点钱，那么可以看看合同上写了什么，我这边合同上写的就是赔付一个月工资，不过这么做感觉不妥当；所以还是老老实实报个最稳当的时间吧，毕竟如果招聘你的公司真心想要你，肯定会为你考虑下，要不然那些希望你快速入职的，还真不好说。

• 人事小姐姐 ：“关于薪酬这块…… ③ ”

③：薪酬这个省略不能说了，毕竟收到了 offer。

• 人事小姐姐 ：“然后你还有其他问题想确认或者了解吗？”
• 我 ：“加班换调休还是薪酬还是其他……”
• ……省略中间内容……
• 人事小姐姐 ：“好的，因为我们这边进行项目制，所以我叫项目负责人过来跟你聊聊最终项目以及薪酬方面的事。”
• 我 ：“好的，谢谢！”

总结：

首先，应该提提我的大忌，就是主动给自己降了薪资，因为人事小姐姐还没提到这个，但是我因为经过前两面，感觉自己表现有点糟，所以给自己给自己降了薪资，只表示我想进来。（还能安慰自己的是，这家公司真的比原先的大好多，平台大了薪资没要到一开始提的，尚能接受）

然后，如果到了人事面，你最好咨询下：

1. 薪酬：最重要的吧，毕竟你跳槽的第一目的应该就是拿更高的工资……
2. 加班：换调休还是薪酬，什么时候开始算加班等……
3. 工作时间：早上几点到晚上几点，一周几天……
4. 社保和五险一金：如果你之前有工作的，记得问清楚这个交接问题，中间需不需要自己续……
5. 调薪机制：一年调几次，根据什么判断（我现在的公司根据 PPT 判断的！）……
6. 请假：请假工资怎么算……

最后，态度和善点，我感觉前面两面，我心态有点差了，但是毕竟还要继续，所以尽量展现最好的给每一个面试官。

3.5 四面个人 - 项目负责人

经过一段时间的等待，迎来了最终的项目负责人：

• 项目负责人 ：“先介绍下自己吧，个人以及工作经历。”
• 我 ：“个人的话，18 年 5 月开始正式实习，到 8 月的时候，感觉个人的前端知识体系比较乱，所以开始写我的文档库；然后 9 月到 10 月的时候，驻点电信做微信小程序，因为没经验，所以是边学边做；然后 11 月的时候，用 ECharts 做了数据报表；然后 12 月的时候，做了 Node 的项目；然后就到了现在。 ① ”

①：个人比较喜欢用 然后 来连接话题，可能感觉能比较清晰表达我的逻辑吧！

• 项目负责人 ：“是毕业之后就在这个公司了是吧？”
• 我 ：“是的。”
• 项目负责人 ：“你离开平台是因为太小了？”
• 我 ：“是的，因为我觉得平台太小，个人提升有限，就好比现在一些简历上的，很多都是我自己折腾的。 ② ”

②：关于离职原因，钱当然是个原因，但是你不能这么说，要不然你面试的公司会觉得你市侩。当然，我这里说平台小也是个原因，因为之前公司，不管是总部，还是驻点电信，都是一个人开发项目，这样子你代码写起来是随意了，但是总想和别人合作的，毕竟大的项目，都不是一人搞定的。

• 项目负责人 ：“那么，这里提到的提升，大多是个人方面的提升，例如更高的技术之类的。但是，在工作中，我们要尽可能的协调业务、支撑业务的，所以你这么看这个？”
• 我 ：“因为业务这东西的话，一开始可能这里做一下，那里做一下。但是，等你做到很熟练的时候，你会发现有些地方是有共同性的，所以我们可以抽取出来，然后在出来新需求的时候，如果有这个，我们就可以快速应用。所以说，业务和技术不能完全分开，因为业务好多东西需要技术支撑，然后技术上你的研究，最终还是可以应用到业务上的。 ③ ”

③：这个问题的回答，需要感谢下 @ 邵威儒 大佬，因为他平时写公司业务的时候，就是非常勤快，然后一些常用的，他会封装成组件，来了新的需求就复制粘贴拼接下就 OK 了，给我非常大的震撼。例如：n 个设计稿，公司排期一个月，他一周就解决了。

• 项目负责人 ：“在你接触代码这么久的时间中，你有没有感觉给你比较深刻印象的事情。”
• 我 ：“个人感觉就是有些地方还是需要提升自己。例如：算法。就好比第一位面试官跟我说的微信小程序的通讯录，就用到二分法。”
• ……继续扯了些其他杂七杂八话题……
• 项目负责人 ：“好的，你稍等下。”（离开）
• 我 ：“好的！”
• ……一段时间后……
• 项目负责人 ：“刚才跟你一面、二面面试官聊了一下，综合评估了下，你这边还是比较 OK 的，你最早什么时候入职。”
• 我 ：“4 月 1 日，你也知道，合同都会签的。”
• 项目负责人 ：“好的，这段时间我会让人事持续跟你沟通，offer 的话问题不大，然后薪资……（省略）具体事情我再让人事跟你沟通。最后你还有什么问题么？”
• ……中间继续扯了一些其他的……
• 我 ：“好的，就这些了，没了。”
• 项目负责人 ：“”

总结：

首先，到这里感觉整个人都很放松了，毕竟在人事面的时候知道这是最后一面了，也很累，毕竟坐了好久。

然后，如果能接触到项目负责人，最好多接触下，多聊聊，毕竟不出意外，这就是你的直系领导了。换工作的话，虽然平台也很重要，但是领导也是个非常重要的部分，像 jsliang 公司的领导层就比较乱，所以感觉还是希望有个好领导的。

最后，希望小伙伴们最好都能走到面试最后咯~上午的面试就到此了，当场允诺发 offer 还是很少见的。

四 下午 16:00

1. 公司规模 ：20 - 99人
2. 行业 ：游戏
3. 面试前 ：地处科大科技园那边，提前了一个钟到，不想提前上去（ jsliang 觉得有时候提前上去，万一前面面试的还没搞完，会尴尬，一般都是提前半个钟到），无聊，就坐马路前看看车水马龙。

4.1 Job Description

薪酬：10K - 20K

岗位职责：
1. 负责web前端开发框架的搭建；
2. 负责web前端研发（包括PC和Mobile）；

能力要求：
1. 扎实的html,js,css知识；
2. 熟悉vue等前端开发框架；
3. 熟悉bootstrap或elementui等前端UI库；
4. 熟悉响应式网页开发；
5. 能编写可维护性高的前端代码；
7. 2年以上专业岗位工作经验，有相关作品可展示优先。
复制代码

4.2 技术一面 - 笔试题考查

1. 描述一下渐进增强和优雅降级。
2. CSS 中可以让文字垂直和水平方向上重叠的两个属性是什么？
3. 如何解决使用 inline-block 引起的空白间隙的问题？
4. 使用 CSS 创建一个三角形（一个箭头向右的三角图标）。
5. 使用 CSS 实现三个 div 等比排列在一行，两列宽度固定中间自适应。
6. 有一个长度为 100 的数组，请求出该数组的前 10 个元素之和。
7. 写一个程序打印 1 到 100 这些数字，遇到数字为 3 的倍数，打印 “A” 替代该数字；遇到 5 的倍数，用 “B” 代替；遇到即是 3 的倍数又是 5 的倍数，打印 “AB”。
8. 跨域通信有哪些方案，各有什么不同？
9. 哪些常见操作会造成内存泄漏？
10. 主流前端框架如 Angular/React/Vue 等之间有哪些差异及特点，选取一个描述其组件生命周期。

这里 jsliang 还是冒着被寄刀片的危险，不给答案了！毕竟给了答案，小伙伴可能不会更深层次地了解这个问题。

4.3 技术二面 - 前端小姐姐

提交完笔试题答案后，来了位前端小姐姐，开始面试：

• 前端小姐姐 ：“你好，你先来个自我介绍吧~”
• 我 ：“你好，我叫梁峻荣，前端网名 jsliang ，日常活跃于 GitHub 和掘金。然后个人比较喜欢折腾，在去年 8 月的时候开始写自己文档库，在 9 月和 10 月做过小程序，11 月的时候做了 ECharts 报表，12 月的时候做了个原生 Node 仿企业网站，然后就到了现在。”
• 前端小姐姐 ：“你挑一个你的工作项目来讲讲。”
• 我 ：“那我讲讲微信小程序吧 ① ，当时大概 20 来张 PSD，就说了下小程序是做什么的，然后我就边看官方文档边写小程序了。大概一个半月后，期间修修改改，就把小程序搞出来了。其中最有挑战的就是联系人模块，就像我们手机的联系人，在新增和修改的时候，用到了二分法。”

①：是不是感觉跟上一家公司的面试过程好像，是的就是这么难受，毕竟经历的真不多！

• 前端小姐姐 ：“你工作主要用到的技术栈有哪些？”
• 我 ：“首先，刚才说了有微信小程序；然后，因为日常驻点于电信，所以 jQuery、H5 还是要懂的；最后，就是用 Vue 写的报表，以及最近要写的管理平台。”
• 前端小姐姐 ：“ECharts 报表的话，你是直接使用 API 的吗？有进行更改吗？”
• 我 ：“没有。”
• 前端小姐姐 ：“能讲讲可视化拖拽页面吗？”
• 我 ：“就是使用 jQueryUI 的 API，进行拖拽生成新的 div 块，然后运营可以配置这个 div 块的数据，最后将这些数据，生成到一个新的 HTML 页面上。”
• 前端小姐姐 ：“这个也是使用 jQueryUI 的 API，没有根据实际开发，对它 API 进行一些修改吗？”
• 我 ：（尴尬）“没有。”
• 前端小姐姐 ：“那你有自己开发的东西吗？”
• 我 ：“8 月份的时候，有自己折腾过 Webpack，然后自己搞了一份 Webpack 多页面配置，结合 VS Code 的 Live Share 和 本地局域网 进行小组开发。”
• 前端小姐姐 ：“讲下 CSS 选择器的优先级吧。”
• 我 ：“首先，就是 !important 这个；然后就是行内样式；再到 #id ，再到 .class ，再到标签，再到通配符 * ，最后还有一些，不记得了。
• 前端小姐姐 ：“嗯，好的，能讲讲 postion 定位吗？”
• 我 ：“首先， position 定位的话，默认是 static 。然后，如果 position: fixed 的时候，就是相对于根元素进行定位。然后，如果是 position: absolute 的时候，根据前面那个进行了 position: relative 的标记，进行相对定位。然后， positon: relative ，我常用的就是将它作为 positon: relative 的定位作用。”
• 前端小姐姐 ：“这四种脱离文档流的有哪些，不脱离的有哪些？”
• 我 ：“ absolute 和 fixed 脱离了文档流，而 static 和 relative 没有脱离文档流。”
• 前端小姐姐 ：“H5 和 CSS3 用得多么？”
• 我 ：“H5 用来写活动页，CSS3 的话，不是很多。”
• 前端小姐姐 ：“那你讲讲 CSS3 属性你用哪些比较多？”
• 我 ：“ rgba 、圆角、渐变等……”
• 前端小姐姐 ：“渐变的话，假如有一个长方体，上面一种颜色，下面一种颜色，你会怎么做？”
• 我 ：“不好意思，因为一般都是做右边和下边的渐变，写得也是比较少，所以不清楚。 ② ”

②：不是不清楚，是真不清楚，如果按钮有渐变，我肯定直接裁剪，用背景图来实现这个按钮！

• 前端小姐姐 ：“好的，动画有使用过么？”
• 我 ：“抱歉，没用过，毕竟业务逻辑比较简单，不过之前大三的时候，学过一段时间 CSS3，但是因为不常用，忘了。”
• 前端小姐姐 ：“那 H5 的呢？”
• 我 ：“H5 的话，比如 <audio> 、 <video> 、 <canvas> ， <canvas> 的话也是简单了解，比如刮奖游戏，用到了蒙层，就是用 <canvas> 写的。”
• 前端小姐姐 ：“知道 H5 有个可拖拽属性吗？”
• 我 ：（胡言乱语）
• 前端小姐姐 ：“就是将一个东西，从一个位置拖拽到另一个位置。”
• 我 ：“没有。”
• 前端小姐姐 ：“好的，了解过缓存这些吗？”
• 我 ：“ cookies 、 session 、 LocalStorage 、 SessionStorage 。”
• 前端小姐姐 ：“什么场景使用那些技术？”
• 我 ：“cookies 的话，在跟后端交互，例如登录啥的，比较常用 ③ 。然后 SessionStorage ，它会在浏览器关闭的时候清空掉。最后 LocalStorage ，它会在浏览器进行长期存储。“

③： cookies 我还真忘了，毕竟日常都用了 storage ，所以想知道的小伙伴可以百度/Google/必应一下，别听我瞎扯。

• 前端小姐姐 ：“那 LocalStorage 会根据时间清空吗？还是会一直存在浏览器上？”
• 我 ：“ LocalStorage 是不会主动删除的，但是我们可以设置它的过期时间。”
• 前端小姐姐 ：“然后，enm...能讲下什么是闭包吗？”
• 我 ：“简单来说，假如有两个函数 A 和 B，然后 B 函数在 A 函数内，同时 B 能使用函数 A 的变量，那么我们称函数 B 为闭包。 ④ 举个简单的，网上常用的例子： for 循环中定义了定时器 setTimeout ，里面就涉及闭包了。”

④：关于对话中的一些知识点，最终将会整理成一篇文章，最近还没完成，但是大致有了 1400 多行的文章了： 【jsliang 的 2019 面试准备】 ，刚兴趣的小伙伴可以关注我 GitHub 或者掘金账号，会持续更新哈~

• 前端小姐姐 ：“那为什么使用闭包呢？”
• 我 ：“其实，工作中我个人不太喜欢闭包，也不推荐闭包，因为它能把人整懵逼了。同时，现在 ES6 的块级定义也有利于减少闭包产生。所以，能不写闭包，就不写闭包。”
• 前端小姐姐 ：“那你不使用闭包的原因是什么？”
• 我 ：“1. 代码不好维护，不管是你自己，还是你的接手人。2. 闭包会产生内部变量，浏览器不会销毁，从而卡内存。”
• 前端小姐姐 ：“你使用 ES6 语法比较多吗？”
• 我 ：“学过，但是使用不多，例如箭头函数，例如 let 变量。”
• 前端小姐姐 ：“那你使用过 Promise 吗？”
• 我 ：“肯定得用，像微信小程序中，比如一个页面，要调用好几个接口，然后调用要有顺序，这时候就要写 Promise 了。”
• 前端小姐姐 ：“可以讲下 Promise 你的用法嘛？”
• 我 ：“可能我使用的比较简单，都是用那些简单的。”
• 前端小姐姐 ：“还有其他 ES6 语法你用过吗？比如 let 、 var 以及 const ”
• 我 ：“ let 的话就是局部使用，例如使用 for 之类的，因为它不会污染全局变量； var 的话就是全局变量，可以在一个大的局域内进行调用；最后 const 一般都是在调用接口的时候，用 const 来防止接口返回的数据被修改。”
• 前端小姐姐 ：“那你知道哪个被定义声明变量后，再定义声明变量的话，会报错？”
• 我 ：“ let 吧！"
• 前端小姐姐 ：“好的，框架上的话， Vue 、 React 、 Angular 哪个用的比较多？”
• 我 ：“ Vue 用得比较多，好比我的毕设，好比 ECharts 报表，以及最近的管理平台。”
• 前端小姐姐 ：“好的，路由方面能说说么？”
• 我 ：“噼里啪啦扯话题……”
• ……听了下录音，我扯到模块化去了，这里就不爆丑了……
• 前端小姐姐 ：“能讲下 v-if 与 v-show 的区别吗？”
• 我 ：“ v-if 的话，是往 DOM 树上添加或者删除元素； v-show 的话，使用 display: none 这些来控制显示元素。”
• 前端小姐姐 ：“ v-for 你使用过程中，有遇到什么问题或者关注点吗？”
• 我 ：“避免将 v-if 和 v-for 放在同一个元素上，因为 v-for 优先级比 v-if 更高。然后使用 v-for 的话，注意下 v-bind:key ，因为关系到一些代码优化了。”
• 前端小姐姐 ：“ v-bind:class 有使用过吗？有什么要注意的吗？”
• 我 ：“就是那个动态渲染 class 是吗？使用过，然后需要注意的话，尽量别写太复杂的判断在上面了，毕竟维护起来麻烦，然后接手的看起来也懵逼。”
• 前端小姐姐 ：“然后 ElementUI 里面的栅格化，加入说一行分成三列，中间列隐藏的时候，第三列往前挤，但是我希望布局不能动，有啥办法？”
• 我 ：“中间列使用两个块，一个有内容的，一个大的空块，然后根据判断来显示隐藏哪一块。”
• 前端小姐姐 ：“关于响应式，还有其他了解吗？”
• 我 ：“？？？”
• 前端小姐姐 ：“例如 rem？”
• 我 ：“噢噢，在做 H5 活动页的时候，使用 rem，但是这个有问题，就是不管在多少屏幕下看起来都一样，手机看起来好的，但是到了 PC 端，就不太好看了。”
• 前端小姐姐 ：“你有遇到什么兼容问题吗？”
• 我 ：“浏览器兼容的话，IE 10 以下不考虑，其他就是微信和 IPhone 的兼容，让人难受了。”
• 前端小姐姐 ：“然后，我看你简历有说到正则小游戏 ⑤ ，能聊聊这个么？”

⑤： jsliang 写的正则小游戏。

• 我 ：“一般来说，登录注册这些使用正则比较多，如果你让我写一个，我肯定要回去看看，毕竟很少用就忘了；但是如果你让我看看某个正则啥意思，还是能看出来的。”
• 前端小姐姐 ：“ token 失效问题遇到过么？”
• 我 ：“没有。”
• 前端小姐姐 ：“能讲下原型链么？”
• 我 ：“原型链涉及到面向对象，如果在一些比较赶的项目中，可能不会使用，因为一般直接用面向过程的方法来写，一般原型链都是涉及到继承方面的东东。 ⑥ ”

⑥：这是个大块，前端必考题，具体的可以查看我的文章 【jsliang 的 2019 面试准备】 ，当然现在还没写完， jsliang 介绍起来也结巴，所以感觉那时候回答的也不是非常好。

• 前端小姐姐 ：“好的。能聊聊 Ajax 的原理，以及你的使用方法吗？”
• 我 ：“不好意思，不太清楚，一般都是用 jQuery 封装好的，或者 Axios。”
• 前端小姐姐 ：“那你能讲下 get 和 post 请求吗？”
• 我 ：“get 的话会在浏览器的 url 上看到，post 的话相对于 get 安全点。当然，这个安全也是有限的，毕竟前端没有说特别安全的地方。然后就是 get 请求能传的比较少，post 请求能传的数据比较多。”
• 前端小姐姐 ：“好的，大致我就清楚了，请稍等回，我跟负责人说下。”
• 我 ：“好的，谢谢。”

总结：

首先，小姐姐考点，还是比较全的，从 HTML 到 CSS 再到 JS，最后到我简历的一些点，都能聊到。

然后，小姐姐的话题，个人感觉还是比较贴近她工作的，很多时候牵扯的知识点，在工作上应该都是她印象比较深刻的。

最后，感慨下：哇塞好厉害的小姐姐！

4.4 整体三面 - 项目负责人

几分钟后，项目负责人来了：

• 项目负责人 ：“你好。”
• 我 ：“你好。”
• 项目负责人 ：“毕业一年了，然后能聊聊为什么跳槽么？”
• 我 ：“因为我觉得平台太小，个人提升有限，就好比现在一些简历上的，很多都是我自己折腾的。”
• 项目负责人 ：“好的，咱说说薪酬方面……”
• 我 ：“……噼里啪啦……”
• ……省略中间部分，聊聊 jsliang 的技术栈，聊聊技术使用，聊聊个人技术提升……
• 项目负责人 ：“好的，大致清楚了。那今天面试就到这里了，你回去等通知吧。”
• 我 ：“好的，谢谢。”

总结：

首先，感觉中间跟项目负责人聊得有点尴尬，虽然最后聊到了薪酬和工作方面，但是关于薪资和平台方面的，回来听录音感觉还是有冲突。

然后，关于个人提升方面，要坚信你的提升是有自己理由的，不能说被否决的就觉得自己提升没用。

最后，只能遗憾到现在也没回复，可能已经凉凉了吧。

五 总结

写到这里， jsliang 的第一轮面试就完毕啦，特意抽取了一天来面试，收获多多，感慨几许：

首先，面试不一定造火箭，有可能是人家项目中真实存在这个情况，就好比上午二面的图片，好比下午前端小姐姐的 CSS3 和动画之类的。

然后，面试可以给你更多的 idea，从而根据面试过程中出现的一些点，去扩宽自己知识面。面试第一目的肯定是拿到 offer，但是每次面试请尝试记住面试过程及面试题目，面试后总结出来，针对自己的不足进行知识拓展。

最后， jsliang 在这里祝小伙伴们面试成功，在金三银四的季节找到更适合自己的职位！

jsliang广告推送：

也许小伙伴想了解下云服务器

或者小伙伴想买一台云服务器

或者小伙伴需要续费云服务器

欢迎点击 云服务器推广 查看！

jsliang 的文档库 由 梁峻荣 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议 进行许可。

基于 github.com/LiangJunron… 上的作品创作。

本许可协议授权之外的使用权限可以从 creativecommons.org/licenses/by… 处获得。