五年时间，如何从前端小白蜕变为前端高级工程师？

前言

毕业3年, 工作5年多, 大部分的前端技术栈都研究和使用过, 从最早的 jquery, zepto, angular 到vue, react, 再到小程序, 混合app开发, 研究心路及其曲折和复杂.。不过经历了痛苦之后也有很多收获, 逐渐从一个职场小白到前端leader, 前几个月公司还给了期权，最后还是毅然离开，接下来就来分享一下我学习前端的心路历程。

一、从大学实习过渡到第一份前端工作(小白阶段)

在大学笔者就开始了职业选择, 先是在大一大二研究了设计, 把流行的设计软件ps, ai, sketch, cdr都研究了一遍, 本来以为自己未来会成为一名设计师, 结果大三出现了转折。在大三研究了几个月的前端之后成功的进入一家公司实习, 当时用的jquery开发官网, 因为当时jquery生态非常熟悉了, 交给我的工作又不是很难, 我也就成功度过了实习期, 觉得前端也就那样。

后面因为实习和在校有不错的经历, 笔者成功进入了员工达到3万+的所谓的“大公司”, 刚入职的一个月里由于公司用的vue和typescript, 这块自己又不是很熟悉,所以吃了很多苦头, 瞬间碰壁的感觉真是“爽歪歪”。那个时候我们主要做ERP系统，业务比较复杂, 需要有很强的技术功底和逻辑思维能力, 所以笔者也是哪里不会补哪里, 跟着自己的师傅从最基础的开始, 写页面. 这个阶段(也就是小白期)主要需要掌握的技术点如下:

js面向对象编程
js组件化设计思路
vue基本使用以及如何写好可复用的vue组件
js常用工具库如lodash, moment 基本使用
如何编写js插件(常用的jq插件编写, js原生插件写法)
如何做到html5的语义化结构化, 如何使用oocss(面向对象的css)编写css
git版本管理工具的使用和分支管理流程

由于实习期间都是用的jq和jq插件, 所以当时只能算个api调用工, 在第一份工作经历中让我学到了很多企业级产品的开发规范. 后面因为自己所在的事业部濒临倒闭, 自己手里又没什么活, 就主动辞职了。

二、真正的互联网公司(小白成长期)

后面去了一家纯互联网公司, 我主要参与的是游戏板块和小程序的开发, 也就是当时18年比较火的《贪吃蛇大作战》, 当时听说有3亿多用户, 心里很激动, 但是小程序当时只是了解了点皮毛, 所以又进入了一轮水生火热中. 在开发者游戏内的H5页面,过程中,确实让我学到了很多js和css3实现的动销效果, 因为游戏应用对交互和适配要求很高, 所以一方面我疯狂的补充css知识, 一方面思考js逻辑。

在做小程序的时候, 也是费劲了周折, 当时小程序对es的支持还不是很好, 所以代码里既有es6的语法,也有es5的, 记得之前涉及的技术点有 canvas画图, 支付接功能, 语音识别接口, 直播api等. 具体知识点总结如下:

css3 布局(flex, grid), 动画(transition, animation), 媒体查询(@media)
js实现页面适配和兼容方案
熟悉使用vue开发WEB工程
熟悉小程序基本开发流程和常用api使用
javasript实现H5游戏的基本思路和方案

虽然技术在飞速提升, 但是加班非常严重, 现在如果有人问我: 还记得武汉凌晨1点的样子 ?我会直接说: 4点的样子更美。

这段时间也积累的很多知识, 笔者也有总结, 还有很多总结至今还在我的草稿箱里。这是后来总结出来的一个入门学习的知识点，需要完整版的朋友可以在文末获取一下。

三、进阶中高级前端工程师(中高级成长之路)

由于之前的积累和对技术的追求, 我决定来上海看看. 后面也是花了几天找到一个还算不错的上市公司, 开始了技术之旅. 由于公司有很多产品, 有千万级用户的内容平台, 也有针对B端企业Saas系统。但是公司前端技术栈基本采用了React, 由于之前都是偏 vue 的, 所以又得重头学起, 但是我们主管对我印象还行, 给了我一周时间熟悉项目, 后面我发现 react 其实使用模式和 vue 很像, 而且之前对写js逻辑已经非常熟悉了, 所以学 react 的 jsx 非常顺利, 到接手内容平台只花了3天时间。

公司对技术要求还是非常高的, 因为要承载接近百万的日活, 所以对性能, 页面体积做很大的投入，后面还接了神策大数据, 阿里监控等, 当时感觉自己欠缺的东西还是太多了。

由于之前有H5开发经验, 我既参与内容平台的开发, 也负责公司混合app的开发, H5活动页的开发，当时自己心很大, 感觉啥都想学, 周六日也泡在公司, 从此慢慢建立起了一套时间管理体系(被自己折磨的). 虽然期间也发生过很多故事, 但是依然是在成长, 同样自己也做了很多总结以及知识点梳理，如下:

混合H5开发的一般模式, 与 native 的通信机制
react基本开发模式以及如何做优雅的组件开发
如何做WEB性能优化
如何使用神策埋点监控并分析你的app
如何使用ssr技术
如何做好前端工程化

这些知识点需要一定的时间去消化, 笔者先后也总结了很多, 如下:

在这里插入图片描述

四、高级前端工程师(独当一面阶段)

后面经历了很多事情之后(就当是技术天花板吧), 决定跳槽到一家做人工智能的小公司, 当时的leval为A2(每个公司评级不一样), 也就是高级工程师。在公司的3个月里, 从零搭建起了公司的前端体系,包括组件库, 前端工程, 工具库, 脚手架等, 由于成功开发出了公司中台项目的渲染引擎, 后面得到总监的认可把我直接提拔为公司的前端leader, 陆陆续续开始参与招聘,面试, 管理团队, 研发和攻克新技术等, 此时的我对技术生态有了更丰富和深入的认知。

技术人的一生还是很不容易的。我们最基本的任务就是解决公司项目中遇到的问题, 对于前端工程师来说, 任何问题都是可量化的, 也并不是所有问题都能被很好的解决。所以我们面对难以解决的问题时, 有时候需要做取舍和变通, 换一种形式, 说不定就解决了呢?

前端学习进阶之路任重道远，如果你选择了前端，那就要一鼓作气，不能半途而废。前端要学的东西也挺多的，但有兴趣才是坚持下去的动力，一起加油。

前端学习内容复杂、网上资料良莠不齐，想要靠自己梳理清楚确实不容易，为了帮助想要在这条路上一路走到黑的朋友，特别整理了《前端工程师学习进阶资料大全》。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。（本文资料适合0-2年）

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。