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

ゞ浴缸里的玫瑰 2022-09-03 10:15 202阅读 0赞

## 前言 ##

毕业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点的样子更美。

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

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

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

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

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

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1Z28yMzM_size_16_color_FFFFFF_t_70 1]

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

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

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

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

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

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

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

![d74f8b42f4a63c76b18efc6a818147df.png][]

![6deb905d9655a3f0f54b8920686e1970.png][]

**前端面试题汇总**

![1471537bfd3f5a483690ca477fd3f2b9.png][]

**JavaScript**

![7796de226b373d068d8f5bef31e668ce.png][]

**性能**

![d7f6750332c78eb27cc606540cdce3b4.png][]

**linux**

![ed368cc25284edda453a4c6cb49916ef.png][]

**前端资料汇总**

![6e0ba223f65e063db5b1b4b6aa26129a.png][]

#### 完整版PDF资料免费分享，只需你点赞支持，[【动动手指点击此处就可免费领取了】][Link 1]。 ####

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1Z28yMzM_size_16_color_FFFFFF_t_70]: /images/20220829/0925dfbd174a4a479053f46a9715daa2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1Z28yMzM_size_16_color_FFFFFF_t_70 1]: /images/20220829/bdbf1379df194a608df78f0abafc064d.png
[d74f8b42f4a63c76b18efc6a818147df.png]: /images/20220829/b311b8e0619242f9886316db58c3f5c7.png
[6deb905d9655a3f0f54b8920686e1970.png]: /images/20220829/b3078624f95b4fbb94a62887efd9a0a4.png
[1471537bfd3f5a483690ca477fd3f2b9.png]: /images/20220829/1885cb0aa35040249b7dbc9ecc9d3610.png
[7796de226b373d068d8f5bef31e668ce.png]: /images/20220829/6187328d2be042a58ee687233b19a05d.png
[d7f6750332c78eb27cc606540cdce3b4.png]: /images/20220829/1c883ea884af48218c2ee0f6828c2426.png
[ed368cc25284edda453a4c6cb49916ef.png]: /images/20220829/b364e8e8b415446a959741eb4a6b9f34.png
[6e0ba223f65e063db5b1b4b6aa26129a.png]: /images/20220829/df99b4baef0c4ce99627936f5c8d4884.png
[Link 1]: https://jq.qq.com/?_wv=1027&k=NgZqxZAa