前端工程师面试利器！助你在前端求职竞争中脱颖而出

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

与你分享前端工程师的面试、岗位适应、晋级成长三大话题和完整职业成长历程。既有提纲挈领的方法论，也会推荐一些实用的学习资料、工具和方法，让你读完就能实践落地。

这些面试利器，助你在前端求职竞争中脱颖而出

1. 面试流程

下面是一份常规的面试流程，不一样的公司和团队会有所差别。

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

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

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

面试淘汰率最高的每每是技术一面和二面 。因此必定要作基础复习和项目整理，准备充分。

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

最后是HR面 ，考察候选人的换工做动机、诚信度，固然最主要仍是薪资预期。你们在换工做时必定要合理预期，总想薪资Double是不现实的。

2. 如何准备笔试？

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

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

1. 如何梳理我的经历和知识体系，游刃有余地应对面试？

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

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） 温故知新。

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

迅速融入新环境，适应新岗位
有一种说法：入职后的第一个月每每是职场人最想离职的阶段。每一个人进入新环境都不免会有不适应的地方，或是公司制度，或是团队氛围、工做流程的差别。那么， 做为新人，如何尽快熟悉陌生的职场环境呢？

首先，尽快熟悉团队里的规则。 有的规则是显性的，有些是隐性的，一般隐性规则比显性规则多。

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

隐性规则： 多与人沟通，本身梳理总结，包括：团队的核心项目有哪些？主要的技术栈和技术文档是什么？项目参与人员的水平和情况如何？项目潜在哪些问题？

好比上线系统有个歧义操做，老员工广泛都知道，可是若是没有作梳理总结，就容易产生误解、踩雷。

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

工欲善其事必先利其器：高效工具推荐

1. 沟通效率提高工具

平常工做中，前端同窗须要与产品、设计、交互、后端、客户端、测试、运维等多种角色协做。我的的沟通能力对于效率提高很是重要。下面介绍三种能够有效提高沟通效率的工具：

1）线框图

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

2）流程图

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

3）序列图

序列图能够说是平常沟通的万金油，跟任何一个角色沟通都很是好用。

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

2. 平常开发经常使用工具

1） 抓包软件

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

2） 项目管理软件

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

这里推荐一下个人前端学习交流群：767273102，里面都是学习前端的从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴

点击：前端学习圈