在 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） 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的项目实战的学习资料都有整理，送给每一位前端小伙伴。最新技术，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!
点击：前端学习圈
原文地址：https://blog.51cto.com/14284898/2389393