前端工程师修炼手册

前端工程师知识图谱

因为整张图太大了，这里只展开到2级节点， 具体请到前端工程师知识图谱v0.1——百度脑图(需要登录百度的账号， 后续考虑迁移一波)

写在前面

本文的内容主要基于作者的眼界、认识和知识量， 具有一定的局限性，如有不同意见，欢迎讨论。什么是前端工程师？首先是工程师，然后是前端工程师。也就是说，不能仅仅将视野局限在前端领域的知识（当然，这是前端工程师主要关注的领域）， 也要重视计算机基础知识、通用的能力素质等等。其次，前端工程师不是前端研究员，也就是说，切忌唯技术论，作为前端工程师也需要有良好的沟通表达能力、产品意识等等。 当然，这些技术之外的部分不在本文的讨论范围之类。 作为实习生/校招生只需要技术上过关， 沟通表达能力合格即可。
我理解的研发工程师，是一种解决问题的角色，后面我们可以发现所有技术的演化都是为了解决问题而存在的。由于老旧的浏览器存在很多浏览器兼容性问题，所以有了JQuery代替原生的Dom操作.由于页面日趋复杂， 频繁操作Dom带来的代码耦合和性能低下，于是有了以Vue、React为代表的MVVM框架又代替了JQuery。
认知决定了我们的上限，如果目标仅仅是做一个能跑的网页，那么甚至使用可视化工具Dreamware就可以了。 如果目标仅仅是做一个看起来丰富一些的网页， 那么学会菜鸟教程/w3school上的基础知识，再去找一些JS特效的源码拼拼凑凑就可以了。如果只是满足于自娱自乐，也不会去学习性能优化、浏览器兼容、安全的问题了。诸如此类，这是作者学习以来血的教训。
虽然本文是前端工程师的修炼手册，但是我认为突破这个scope是有必要的，因为前端业务的一些普遍性，很多复杂的问题都已经有成熟的框架和第三方库帮我们解决相应的问题， 所以大部分前端工程师会感觉不到一些底层知识的存在，形成一种认知：会用就行。我们应该注意到学习具有边际效应，会用可以解决80%的问题，在会用的基础上对使用的各种技术有更多使用和踩坑的经验，可以解决95%的问题，还有5%的问题可能是非常个性化的，现有的工具无法解决的，需要自己在原有工具上进行改进， 甚至自己造轮子， 所以我们才有必要去学习使用的各种框架和工具的实现原理等等。
最后，我理解研发工程师最重要的一个能力是学习能力，可能由于作者是自学的，所以其实不认同学习这个过程过于依赖外部的指导，学习应该是自主的，不断探索的。你不应该局限于任何一个参考的资源，官方文档、书籍、文章等等。如果本文对你帮助比较大，希望有一天你回头看时，会觉得不少地方讲的不够准确、不够深入，那时候说明你已超越写这篇文章时的我。

前端工程师能力层级划分

这部分的能力层次划分仅代表个人观点。因为作者的水平也只是前端工程师助理or前端工程师， 这里就不按市面上的高级/技术专家等等来划分了。

塑料前端切图仔

该阶段的同学还停留在上个时代的技术栈， 会简单使用JQuery + bootStrap来开发网页。 由于粗暴地使用bootStrap， 可能连CSS的各种布局都没有掌握。 该阶段的同学求职还是比较困难的， 使用这种老旧技术的公司肯定是没有什么前途…

黑铁前端工程师

该阶段的同学能完成一些页面，完成一个完整的项目还是比较吃力。由于基础知识不扎实，经验不足。开发的时候常常还会遇到一些问题， 开发的项目有一些浏览器兼容问题，对于页面适配、安全问题也没有重视。 代码的质量也比较低，代码里常常有一些重复或者极度相似的部分，不懂如何抽象。在虽然能力不够全面，但是对付课程设计、外包项目等等还是足够了。这部分的同学在求职的时候勉强能找到工作，但只能到外包公司等一些对技术要求不高的地方工作。
该阶段的同学，初步了解了HTML、CSS、JavaScript的知识，会用Vue、React、Angular中的一个及其全家桶（前端路由、前端状态管理等）。懂得AJAx，会使用Axios等。会使用简单的脚手架创建项目，简单的Npm、Yarn命令。会用Bootstrap+JQuery组件或者Antd、ElementUI这种组件库。不会搭建环境，但使用虚拟主机+FTP上传的方式，也能搭建一个网站。

青铜前端工程师

该阶段的同学做过的项目水平不高，诸如后台管理系统、简单的博客之类的，虽然能力不突出，但总是有一些项目经验了，了解常见的一些浏览器兼容问题。代码也懂得进行一定程度的抽象，比如懂得在Axios层对所有请求做统一的处理。更加懂得使用Devtools查看cookie、内存、网络等等。在这个阶段也意识到工程师能力的重要性，会使用简单的linux命令，能在ECS中搭建网站，初步学习了数据结构，能写一些leetcode的easy提。由于有一定踩坑经验，零零散散也加深了对于基础知识的理解，比如更加了解CSS选择器的优先级，不会滥用!important或者style属性。了解Script、Style元素放在不同的位置的区别等等。 也初步了解了CSRF、跨域、XSS攻击等问题。但仅仅是勉强使用工具解决问题。初步懂得webpack的配置。
该阶段的同学学习依然是不够全面，比如对于flex布局，没有注意溢出的时候shink的问题， 写代码考虑的边界case也不够。
该阶段的同学进入外包公司已经没有什么问题了，如果掌握更多的基础知识，或者在其他方面有亮点并认真准备面试，有望进入二三线互联网公司。

白银前端工程师

该阶段的同学对基础知识掌握已经比较好了， 对于面试高频的问题大部分能够回答上来。对于基础的网络知识、操作系统、数据结构知识都有比较不错的掌握。对于数据结构也更进一步， 比如经典的斐波那契数列问题， 不仅仅懂得使用递归和递推，还懂得使用矩阵乘法， 对于经典的排序算法，比如归并算法， 不仅掌握它本身还了解它的三个改进等等。 该阶段的特点是有意识的去对基础知识进行差缺补漏。
在框架方面， 理解框架的重要概念，生命周期。能熟练使用框架的一些高级特性， 比如React的Hook， Vue的计算属性， 有一些性能的意识， 比如使用计算属性的watch还是compute等等。 了解虚拟DOM实现的diff算法， 双向绑定的实现方式应付一些面试题也是足够了。
该阶段的同学的代码基本可以用于生产环境， 即使在比较严格的code review下， 也不需要大的修改， 积累一定的工作经验后， 能独立完成中等难度的中小需求。 对于前端的工程化掌握的比较片面， 不能从0到1去搭建一个标准比较高的前端项目。在求职方面， 只要再将所学知识好好复习， 获得大厂offer问题不大。

项目推荐

有一定基础的同学会觉得， 学了半天成为API工程师？ 这里推荐一些有挑战性的可做的项目。

脑图工具

学编程只会调api? 试试写一个脑图工具， 具有自动排版功能！ 一般脑图应该使用canvas来绘制， 可以研究一下其中的脏矩形优化等等， 仅仅是简单实现会很卡的哦。

learnGitBranching

https://learngitbranching.js.org/?locale=zh_CN
这里类似于脑图，要实现弹性的绘制节点树。 并且需要对输入的git命令还要实现解析模拟， 是不是非常有挑战性。

数据结构可视化演示

https://visualgo.net/en/list
不仅要对数据结构有非常透彻的理解， 而且交互也非常复杂， 要充分考虑演示面板和控制面板之间的耦合， 如何去设计通用的代码运行展示面板等等。

可视化建站

这个非常超纲了， 可以做好多年。

进阶书籍推荐

基本的入门书籍网上推荐已经太多了， 这里推荐一些大家普遍不是很重视， 在实际应用中实用性相对较低，但是对于工程师的思想素质非常必要的书籍。
《JavaScript设计模式与开发实践》——曾探
《白帽子讲Web安全》 ——吴翰清
《重构 改善既有代码的设计 Java语言版》 ——[美]Martin Fowler

尾声

后续还会对该文章进行迭代丰富， 对于更高阶的能力模型也会进行阐述。 如果需要内推字节跳动， 可以联系qq: 617976080。
字节跳动校招内推码: TGMAA94
投递链接: https://job.toutiao.com/s/JLJKXjY