前端工程师如何高效准备面试,融入新环境?|前端进阶指南(上)

来自:100offer(微信号:im100offer),作者:李丁辉

在 ECMScript 的标准化演进和开源社区的蓬勃发展中,作为一名前端工程师,如何从越来越饱和的求职市场竞争中脱颖而出?如何融入环境胜任新的岗位?又该如何晋级成长,完成角色转型?


为了帮助前端工程师们寻找这些问题的答案, 100offer 邀请到了 58 同城的高级技术经理李丁辉。他将基于丰富的团队实践及经验,与你分享前端工程师的面试、岗位适应、晋级成长三大话题和完整职业成长历程。既有提纲挈领的方法论,也会推荐一些实用的学习资料、工具和方法,让你读完就能实践落地。


这份《前端工程师进阶指南》分为上下两篇推出。在今天的上篇里我们将分享前端面试准备的注意事项,以及如何快速融入新团队的实用建议。


作者简介:


李丁辉,58 同城用户增长部高级技术经理,负责 58 同城用户增长部前端团队的研发和管理工作。长期参与集团校园招聘和职级评审。2010年参加工作,曾就职于百度、创新工场,从事前端开发工作。


1

这些面试利器,

助你在前端求职竞争中脱颖而出


01

面试流程


下面是一份常规的面试流程,不同的公司和团队会有所差异。



面试的第一关一般是笔试。每个公司和团队使用的技术栈差别比较大,为了有效筛选候选人,笔试普遍以考察基础知识为主,重点是 JavaScript、CSS和 HTTP 基础。形式上纸笔笔试更多些,机试较少,时间大概有 20~40 分钟。除非你的答题特别差,笔试通常不会刷人。


接下来是技术一面。面试官主要是一线开发的领头羊,他会针对你的笔试和简历进行延伸考察,包括以往项目的具体细节,重点技术栈的使用经验和技术深度等。如果你在笔试中的某道题答得有欠缺,他也可能会给你一些提示,看你能否纠正。


技术二面的面试官通常是组长,工作经验丰富,涉及的技术面更广。团队里涉及的项目很多,因此组长对团队的各个技术方向掌握会更全面,所以可能会考察一些比较发散性的问题,重点是观察你的技术功底和潜力。


面试淘汰率最高的往往是技术一面和二面。所以一定要做基础复习和项目整理,准备充分。


然后是管理面试,由团队负责人或更高层次的管理者进行,考核候选人的沟通和应变能力,保证候选人在沟通协作上能与团队匹配,提高团队整体效率。


最后是HR面,考察候选人的换工作动机、诚信度,当然最主要还是薪资预期。大家在换工作时一定要合理预期,总想薪资Double是不现实的。


02

如何准备笔试?


首先,建议通过快速翻阅基础类的书籍做思维导图、系统性地复习,以保证知识体系的连贯性。比起网上的碎片化文章,书籍更有助于搭建整个知识体系的初步结构。下面推荐一些前端基础类书籍:


JavaScript 类书籍:作者:尼古拉斯·扎卡斯

《JavaScript 高级程序设计》

《深入理解 ES6》


CSS 类书籍:

《精通 CSS 高级 Web 标准解决方案》

《CSS 揭秘》


HTTP 类书籍:

《图解 HTTP》



其次,建议大家针对性地多做一些纸笔练习,以避免由于基本功不扎实或者粗心大意,在纸笔笔试环节漏洞百出,错失了 offer。


大家日常开发都是用编辑器或是 IDE,有语法高亮和自动提示,但是实际笔试往往都是写字,许多候选人在答笔试时表现得很生涩。以下纸笔笔试的常见错误,供你自行查漏补缺,提前防范:


1) 没有过滤 hash 值


存在两种原因:一种是对整个 URL 的组成缺乏足够的了解,原理知识相对欠缺;一种是没有把 hash 值考虑进去,太轻敌。

 

2) 使用字符串函数截断处理


实现对字符串的解析,可以通过 split 拆分,也可以通过 slice、substring 函数处理。但问题在于大家的理解有偏差,经常弄错这些函数的参数含义。

 

3) 没有 decodeComponent

URL 里的信息是已经编码的,解析时需要 decode,但这方面经常被忽视。

 

4) 没有 return


03

如何梳理个人经历和知识体系,

游刃有余地应对面试?


前端面试常见的考察点主要有:


1) CSS的Flex布局。


2) Promise:把一个回调函数 Promise 化。候选人常在 Promise 的构造函数上出问题,经常以为它是两个参数。


3) 跨域:跨域的原因是 CORS 的常见问题。


4) HTTP 中缓存相关的问题。

 

面试问题的准备以实际工作过的项目梳理为主,简历中罗列的项目应突出重点,不宜过多。下面首先重点说说项目梳理需要注意的问题。



1) 非业内著名的项目务必添加简介。

说明主要功能、业务类型:不同业务类型的侧重点会有很大不同。


介绍用户群体:To B / To C / 公司内部;一般To B 产品逻辑功能较复杂,To C 产品性能要求较高,内部使用的产品技术相对新颖、前卫。


2) 介绍项目用到的主要技术。


形态:PC / 移动端/小程序,框架:Vue / React。简介和技术要重点突出所面试岗位的过往项目经验,以及项目匹配度。


3)介绍技术难点。


最简单的就是回顾项目代码的提交记录,总结当时出现问题的原因并分析,找出多种解决方法和每种方法的优缺点,以免再次掉入相同的「坑」。

 

另外,建议大家制作一张知识图谱,对自己的专业技能进行评估。



上图是一些建议罗列的技能点。前端工程师的必备技能点有两个:前端基础 + 熟悉一个 Web 框架。Vue 和 React 在国内都很流行,专注将其中一个框架做深入即可。



最后,作为一个经常帮助团队筛选前端候选人的面试官,我再啰嗦几句面试需要注意的问题。


1) 深度优先。


技术深度比技术广度更占优势。无法通过面试评估的,通常都是因为技术深度不够。所以在专业技能方面要扬长避短。与其打鸡血补短板,不如深耕自己的优势。


举个例子,甲同学 Vue 的技术深度 80 分,React 基本没用过;乙同学 Vue 技术深度 50 分,React 技术深度 50 分。在求职中遇到一个 Vue 要求的岗位,甲更有优势。


2) 有备无患。

简历中的内容,无论是项目还是技术点,务必准备充分。不要将自己不擅长的项目写到简历里,因为一旦出现简历与实际不符,容易引发诚信质疑,难以通过。


3) 温故知新。


面试结束后应尽快对笔试、面试的内容做自我总结,避免在一个地方跌倒两次。


2

迅速融入新环境,适应新岗位


有一种说法:入职后的第一个月往往是职场人最想离职的阶段。每个人进入新环境都难免会有不适应的地方,或是公司制度,或是团队氛围、工作流程的差异。那么,作为新人,如何尽快熟悉陌生的职场环境呢?

 

首先,尽快熟悉团队里的规则。有的规则是显性的,有些是隐性的,通常隐性规则比显性规则多。


显性规则:比如公司内的各种明文规定的制度,团队使用的工具,包括版本控制系统、项目管理系统、知识管理系统、缺陷管理系统等。


隐性规则:多与人沟通,自己梳理总结,包括:团队的核心项目有哪些?主要的技术栈和技术文档是什么?项目参与人员的水平和状况如何?项目潜在哪些问题?


比如上线系统有个歧义操作,老员工普遍都知道,但是如果没有做梳理总结,就容易产生误解、踩雷。


其次,心态上求同存异,切忌自以为是。认真阅读工作相关的文档、邮件,及时总结。刚进入新团队容易出现两种心态:从BAT大厂进入中小型团队的同学容易有优越感,不屑于问;从小团队进入大厂的同学容易怯懦,不好意思问,缺少沟通很容易出问题。因此应当保持谦逊,降低姿态,多与人交流沟通,从而快速了解和适应整个环境。

 


我在下图中总结了公司的常规需求开发流程,供大家参考。在日常开发工作中,请大家务必注意几个常见问题



1) 理解产品需求。

开发前不清晰的地方需要沟通,切莫自以为是,投入了人力时间却最终与产品预期南辕北辙。


2) 与后端先约定数据接口再开发。

数据接口就跟数据结构一样,如果设计不好,再好的逻辑和算法也难以挽救。很多前端同学习惯拿到UI和交互就开发页面,数据接口没有和后端做好协商,最后花大力气适配「不合脚」的数据接口,以致经常出现联调时间超出开发时间的问题。同时,在数据接口的设计上,一定要考虑临界情况,比如空数组、空对象、超长字符串等。


3) 自测通过。

很多同学经常程序都跑不起来就提测,导致测试同学苦不堪言。


4) 线上回归。

上完线一定记得线上回归,因为线上环境跟测试环境总是有差异。这个看起来简单,却是大家常犯的低级错误。


3

工欲善其事必先利其器:

高效工具推荐


01

沟通效率提升工具


日常工作中,前端同学需要与产品、设计、交互、后端、客户端、测试、运维等多种角色协作。个人的沟通能力对于效率提升非常重要。下面介绍三种可以有效提升沟通效率的工具:


1)线框图


用纸笔画线框交互图,可以很好地与产品、设计和交互团队沟通。


2)流程图


可把复杂的逻辑画成流程图,方便与后端、客户端同学交流逻辑细节,避免理解错误。


3)序列图


序列图可以说是日常沟通的万金油,跟任何一个角色沟通都非常好用。

 



序列图由两部分组成:生命线和消息,按照时间或交互顺序维度联动。与各个角色沟通遇到歧义或是理解偏差时,序列图可以很好地统一大家的思路,达成最终方案。除了纸笔和白板,也可以用 Visual Paradigm 或 OmniGraffle 等软件制作序列图文档。


02

日常开发常用工具


1) 抓包软件


花些时间熟悉 Charles 或 Fiddler 等工具的使用:如何本地代理、重写、节流、断点,可以快速定位线上问题,方便与后端、客户端、测试沟通定位问题。


2) 项目管理软件

    

高级以上的工程师可能涉及带项目,对于任务、资源、时间要有清晰的认识。如 OminiPlan 或 Project 等工具,可以方便快速进行人力和时间分配,追踪进度。




(上篇完)



想收听完整版前端程序员进阶干货?点击这里,移步由李丁辉主讲的《前端工程师职业进阶指南》知乎 live!


下篇预告


说完了面试以及融入新环境的实用技巧,下周 100offer 将会推送《前端进阶指南》下篇:从中级到资深前端的职场晋级路线与学习建议



推荐↓↓↓
前端开发
上一篇:拿下前端面试,就刷这套题! 下一篇:从中级到资深,前端工程师的职场华丽升级|前端进阶指南(下)