鲁南快报在 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》
大家日常开发都是用编辑器或是 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 中缓存相关的问题。
面试问题的准备以实际工作过的项目梳理为主，简历中罗列的项目应突出重点，不宜过多。下面首先重点说说项目梳理需要注意的问题。
说明主要功能、业务类型：不同业务类型的侧重点会有很大不同。
介绍用户群体：To B / To C / 公司内部;一般To B 产品逻辑功能较复杂，To C 产品性能要求较高，内部使用的产品技术相对新颖、前卫。
2) 介绍项目用到的主要技术。
形态：PC / 移动端/小程序，框架：Vue / React。简介和技术要重点突出所面试岗位的过往项目经验，以及项目匹配度。
3)介绍技术难点。
最简单的就是回顾项目代码的提交记录，总结当时出现问题的原因并分析，找出多种解决方法和每种方法的优缺点，以免再次掉入相同的「坑」。
另外，建议大家制作一张知识图谱，对自己的专业技能进行评估。
最后，作为一个经常帮助团队筛选前端候选人的面试官，我再啰嗦几句面试需要注意的问题。
1) 深度优先。
技术深度比技术广度更占优势。无法通过面试评估的，通常都是因为技术深度不够。所以在专业技能方面要扬长避短。与其打鸡血补短板，不如深耕自己的优势。
举个例子，甲同学 Vue 的技术深度 80 分，React 基本没用过;乙同学 Vue 技术深度 50 分，React 技术深度 50 分。在求职中遇到一个 Vue 要求的岗位，甲更有优势。
2) 有备无患。
简历中的内容，无论是项目还是技术点，务必准备充分。不要将自己不擅长的项目写到简历里，因为一旦出现简历与实际不符，容易引发诚信质疑，难以通过。
3) 温故知新。
面试结束后应尽快对笔试、面试的内容做自我总结，避免在一个地方跌倒两次。
2迅速融入新环境，适应新岗位
有一种说法：入职后的第一个月往往是职场人最想离职的阶段。每个人进入新环境都难免会有不适应的地方，或是公司制度，或是团队氛围、工作流程的差异。那么，作为新人，如何尽快熟悉陌生的职场环境呢?
首先，尽快熟悉团队里的规则。有的规则是显性的，有些是隐性的，通常隐性规则比显性规则多。
显性规则：比如公司内的各种明文规定的制度，团队使用的工具，包括版本控制系统、项目管理系统、知识管理系统、缺陷管理系统等。
隐性规则：多与人沟通，自己梳理总结，包括：团队的核心项目有哪些?主要的技术栈和技术文档是什么?项目参与人员的水平和状况如何?项目潜在哪些问题?
比如上线系统有个歧义操作，老员工普遍都知道，但是如果没有做梳理总结，就容易产生误解、踩雷。
其次，心态上求同存异，切忌自以为是。认真阅读工作相关的文档、邮件，及时总结。刚进入新团队容易出现两种心态：从BAT大厂进入中小型团队的同学容易有优越感，不屑于问;从小团队进入大厂的同学容易怯懦，不好意思问，缺少沟通很容易出问题。因此应当保持谦逊，降低姿态，多与人交流沟通，从而快速了解和适应整个环境。
我在下图中总结了公司的常规需求开发流程，供大家参考。在日常开发工作中，请大家务必注意几个常见问题。
1) 理解产品需求。
开发前不清晰的地方需要沟通，切莫自以为是，投入了人力时间却最终与产品预期南辕北辙。
2) 与后端先约定数据接口再开发。
数据接口就跟数据结构一样，如果设计不好，再好的逻辑和算法也难以挽救。很多前端同学习惯拿到UI和交互就开发页面，数据接口没有和后端做好协商，最后花大力气适配「不合脚」的数据接口，以致经常出现联调时间超出开发时间的问题。同时，在数据接口的设计上，一定要考虑临界情况，比如空数组、空对象、超长字符串等。
3) 自测通过。
很多同学经常程序都跑不起来就提测，导致测试同学苦不堪言。
4) 线上回归。
上完线一定记得线上回归，因为线上环境跟测试环境总是有差异。这个看起来简单，却是大家常犯的低级错误。
3工欲善其事必先利其器：
高效工具推荐
01沟通效率提升工具
日常工作中，前端同学需要与产品、设计、交互、后端、客户端、测试、运维等多种角色协作。个人的沟通能力对于效率提升非常重要。下面介绍三种可以有效提升沟通效率的工具：
1)线框图
用纸笔画线框交互图，可以很好地与产品、设计和交互团队沟通。
2)流程图
可把复杂的逻辑画成流程图，方便与后端、客户端同学交流逻辑细节，避免理解错误。
3)序列图
序列图可以说是日常沟通的万金油，跟任何一个角色沟通都非常好用。
02日常开发常用工具
1) 抓包软件
花些时间熟悉 Charles 或 Fiddler 等工具的使用：如何本地代理、重写、节流、断点，可以快速定位线上问题，方便与后端、客户端、测试沟通定位问题。
2) 项目管理软件
高级以上的工程师可能涉及带项目，对于任务、资源、时间要有清晰的认识。如 OminiPlan 或 Project 等工具，可以方便快速进行人力和时间分配，追踪进度。
