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 哈~
一 目录
不折腾的前端，和咸鱼有什么区别
| 目录 |
|---|
| 一 目录 |
| 二 前言 |
| 三 早上 10:00 |
| 3.1 Job Description |
| 3.2 一面技术 - 前端架构师 |
| 3.3 二面技术 - 技术负责人 |
| 3.4 三面个人 - 人事小姐姐 |
| 3.5 四面个人 - 项目负责人 |
| 四 下午 16:00 |
| 4.1 Job Description |
| 4.2 技术一面 - 笔试题考查 |
| 4.3 技术二面 - 前端小姐姐 |
| 4.4 整体三面 - 项目负责人 |
| 五 总结 |
二 前言
返回目录
请时刻准备好自己的简历，不管是互联网经济不佳面临裁员，还是因为公司内部斗争严重想换份工作，还是因为厌倦了目前的一切……只有随时更新自己，把自己的简历准备好，你才知道哪一刻跑路是最佳选择。
- 时间：2019-2-27
- 地点：广州
- 年限：一年工作经验
- 薪酬要求：9K - 15K
- 场次：上午一场，下午一场
- 感想：非常疲惫，但是感觉很有动力，“没有一家解决不了的，如果有，那就再跑一家！”
三 早上 10:00
返回目录
- 公司规模：员工 5000 +
- 行业：电商
- 面试前：怕广州 3 号线塞车，又觉得这份工作应该不错，于是 7 点就出门，8 点到了这个公司附近，溜达了一圈，感觉附近饭馆比较多，并且离地铁站 5 分钟左右，还是挺不错的。溜达到 9:20，上楼跟前台小姐姐打招呼后，拿到了两份表：一份个人信息表，一个性格测试表（可能大点的公司都考虑你的性格，毕竟团队开发），印象深刻的是性格测试表还有错别字：“坚定” 写成了 “鉴定”。
可能我精神比较集中，一下子就看到了，但是 offer 没下来，就没敢跟人事小姐姐吐槽了，免得给人坏印象。 - 准备完毕：交表，等待面试。
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。
- 人事小姐姐：“然后你还有其他问题想确认或者了解吗？”
- 我：“加班换调休还是薪酬还是其他……”
- ……省略中间内容……
- 人事小姐姐：“好的，因为我们这边进行项目制，所以我叫项目负责人过来跟你聊聊最终项目以及薪酬方面的事。”
- 我：“好的，谢谢！”
总结：
首先，应该提提我的大忌，就是主动给自己降了薪资，因为人事小姐姐还没提到这个，但是我因为经过前两面，感觉自己表现有点糟，所以给自己给自己降了薪资，只表示我想进来。（还能安慰自己的是，这家公司真的比原先的大好多，平台大了薪资没要到一开始提的，尚能接受）
然后，如果到了人事面，你最好咨询下：
- 薪酬：最重要的吧，毕竟你跳槽的第一目的应该就是拿更高的工资……
- 加班：换调休还是薪酬，什么时候开始算加班等……
- 工作时间：早上几点到晚上几点，一周几天……
- 社保和五险一金：如果你之前有工作的，记得问清楚这个交接问题，中间需不需要自己续……
- 调薪机制：一年调几次，根据什么判断（我现在的公司根据 PPT 判断的！）……
- 请假：请假工资怎么算……
最后，态度和善点，我感觉前面两面，我心态有点差了，但是毕竟还要继续，所以尽量展现最好的给每一个面试官。
3.5 四面个人 - 项目负责人
返回目录
经过一段时间的等待，迎来了最终的项目负责人：
- 项目负责人：“先介绍下自己吧，个人以及工作经历。”
- 我：“个人的话，18 年 5 月开始正式实习，到 8 月的时候，感觉个人的前端知识体系比较乱，所以开始写我的文档库；然后 9 月到 10 月的时候，驻点电信做微信小程序，因为没经验，所以是边学边做；然后 11 月的时候，用 ECharts 做了数据报表；然后 12 月的时候，做了 Node 的项目；然后就到了现在。①”
①：个人比较喜欢用 然后 来连接话题，可能感觉能比较清晰表达我的逻辑吧！
- 项目负责人：“是毕业之后就在这个公司了是吧？”
- 我：“是的。”
- 项目负责人：“你离开平台是因为太小了？”
- 我：“是的，因为我觉得平台太小，个人提升有限，就好比现在一些简历上的，很多都是我自己折腾的。②”
②：关于离职原因，钱当然是个原因，但是你不能这么说，要不然你面试的公司会觉得你市侩。当然，我这里说平台小也是个原因，因为之前公司，不管是总部，还是驻点电信，都是一个人开发项目，这样子你代码写起来是随意了，但是总想和别人合作的，毕竟大的项目，都不是一人搞定的。
- 项目负责人：“那么，这里提到的提升，大多是个人方面的提升，例如更高的技术之类的。但是，在工作中，我们要尽可能的协调业务、支撑业务的，所以你这么看这个？”
- 我：“因为业务这东西的话，一开始可能这里做一下，那里做一下。但是，等你做到很熟练的时候，你会发现有些地方是有共同性的，所以我们可以抽取出来，然后在出来新需求的时候，如果有这个，我们就可以快速应用。所以说，业务和技术不能完全分开，因为业务好多东西需要技术支撑，然后技术上你的研究，最终还是可以应用到业务上的。③”
③：这个问题的回答，需要感谢下 @邵威儒 大佬，因为他平时写公司业务的时候，就是非常勤快，然后一些常用的，他会封装成组件，来了新的需求就复制粘贴拼接下就 OK 了，给我非常大的震撼。例如：n 个设计稿，公司排期一个月，他一周就解决了。
- 项目负责人：“在你接触代码这么久的时间中，你有没有感觉给你比较深刻印象的事情。”
- 我：“个人感觉就是有些地方还是需要提升自己。例如：算法。就好比第一位面试官跟我说的微信小程序的通讯录，就用到二分法。”
- ……继续扯了些其他杂七杂八话题……
- 项目负责人：“好的，你稍等下。”（离开）
- 我：“好的！”
- ……一段时间后……
- 项目负责人：“刚才跟你一面、二面面试官聊了一下，综合评估了下，你这边还是比较 OK 的，你最早什么时候入职。”
- 我：“4 月 1 日，你也知道，合同都会签的。”
- 项目负责人：“好的，这段时间我会让人事持续跟你沟通，offer 的话问题不大，然后薪资……（省略）具体事情我再让人事跟你沟通。最后你还有什么问题么？”
- ……中间继续扯了一些其他的……
- 我：“好的，就这些了，没了。”
- 项目负责人：“”
总结：
首先，到这里感觉整个人都很放松了，毕竟在人事面的时候知道这是最后一面了，也很累，毕竟坐了好久。
然后，如果能接触到项目负责人，最好多接触下，多聊聊，毕竟不出意外，这就是你的直系领导了。换工作的话，虽然平台也很重要，但是领导也是个非常重要的部分，像 jsliang 公司的领导层就比较乱，所以感觉还是希望有个好领导的。
最后，希望小伙伴们最好都能走到面试最后咯~上午的面试就到此了，当场允诺发 offer 还是很少见的。
四 下午 16:00
返回目录
- 公司规模：20 - 99人
- 行业：游戏
- 面试前：地处科大科技园那边，提前了一个钟到，不想提前上去（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 技术一面 - 笔试题考查
返回目录
- 描述一下渐进增强和优雅降级。
- CSS 中可以让文字垂直和水平方向上重叠的两个属性是什么？
- 如何解决使用 inline-block 引起的空白间隙的问题？
- 使用 CSS 创建一个三角形（一个箭头向右的三角图标）。
- 使用 CSS 实现三个 div 等比排列在一行，两列宽度固定中间自适应。
- 有一个长度为 100 的数组，请求出该数组的前 10 个元素之和。
- 写一个程序打印 1 到 100 这些数字，遇到数字为 3 的倍数，打印 “A” 替代该数字；遇到 5 的倍数，用 “B” 代替；遇到即是 3 的倍数又是 5 的倍数，打印 “AB”。
- 跨域通信有哪些方案，各有什么不同？
- 哪些常见操作会造成内存泄漏？
- 主流前端框架如 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 的话，比如
、、，的话也是简单了解，比如刮奖游戏，用到了蒙层，就是用写的。” - 前端小姐姐：“知道 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… 处获得。