阅读 21682

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 哈~

一 目录

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

目录
一 目录
二 前言
三 早上 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

返回目录

  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 的定位作用。”
  • 前端小姐姐:“这四种脱离文档流的有哪些,不脱离的有哪些?”
  • :“absolutefixed 脱离了文档流,而 staticrelative 没有脱离文档流。”
  • 前端小姐姐:“H5 和 CSS3 用得多么?”
  • :“H5 用来写活动页,CSS3 的话,不是很多。”
  • 前端小姐姐:“那你讲讲 CSS3 属性你用哪些比较多?”
  • :“rgba、圆角、渐变等……”
  • 前端小姐姐:“渐变的话,假如有一个长方体,上面一种颜色,下面一种颜色,你会怎么做?”
  • :“不好意思,因为一般都是做右边和下边的渐变,写得也是比较少,所以不清楚。

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

  • 前端小姐姐:“好的,动画有使用过么?”
  • :“抱歉,没用过,毕竟业务逻辑比较简单,不过之前大三的时候,学过一段时间 CSS3,但是因为不常用,忘了。”
  • 前端小姐姐:“那 H5 的呢?”
  • :“H5 的话,比如 <audio><video><canvas><canvas> 的话也是简单了解,比如刮奖游戏,用到了蒙层,就是用 <canvas> 写的。”
  • 前端小姐姐:“知道 H5 有个可拖拽属性吗?”
  • :(胡言乱语)
  • 前端小姐姐:“就是将一个东西,从一个位置拖拽到另一个位置。”
  • :“没有。”
  • 前端小姐姐:“好的,了解过缓存这些吗?”
  • :“cookiessessionLocalStorageSessionStorage。”
  • 前端小姐姐:“什么场景使用那些技术?”
  • :“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 语法你用过吗?比如 letvar 以及 const
  • :“let 的话就是局部使用,例如使用 for 之类的,因为它不会污染全局变量;var 的话就是全局变量,可以在一个大的局域内进行调用;最后 const 一般都是在调用接口的时候,用 const 来防止接口返回的数据被修改。”
  • 前端小姐姐:“那你知道哪个被定义声明变量后,再定义声明变量的话,会报错?”
  • :“let 吧!"
  • 前端小姐姐:“好的,框架上的话,VueReactAngular 哪个用的比较多?”
  • :“Vue 用得比较多,好比我的毕设,好比 ECharts 报表,以及最近的管理平台。”
  • 前端小姐姐:“好的,路由方面能说说么?”
  • :“噼里啪啦扯话题……”
  • ……听了下录音,我扯到模块化去了,这里就不爆丑了……
  • 前端小姐姐:“能讲下 v-ifv-show 的区别吗?”
  • :“v-if 的话,是往 DOM 树上添加或者删除元素;v-show 的话,使用 display: none 这些来控制显示元素。”
  • 前端小姐姐:“v-for 你使用过程中,有遇到什么问题或者关注点吗?”
  • :“避免将 v-ifv-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… 处获得。

关注下面的标签,发现更多相似文章
评论