关于前端:而立之年回顾我的前端转行之路

为什么转行

因为混得不好。

在成为程序员之前，我干过很多工作。因为学历的问题（高中），我的工作基本上都是体力活。包含但不限于：工厂普工、销售（没有干销售的能力）、搬运工、摆地摊等，转行前最初一份工作是修电脑。这么多年，月薪没高过 3300…

起初偶尔一个机会我发现了知乎这个网站，在下面理解到程序员的各种长处。于是，我下定决心转行（2016 年，过后 28 了），辞职在家自学编程。并且也失去了媳妇的反对，感激我的媳妇。

转行筹备

转行抉择前端也是在知乎上看网友剖析的，比后端好入门。

如何抉择教程？

最好在网上多查查材料，找评估高的或者去豆瓣上找评分高的书。

我在网上查了很多材料，最终确定 HTML、CSS 在 w3cschool 学习。JavaScript 则抉择了 JavaScript 高级程序设计第三版（俗称红宝书，当初曾经有第四版了）。

光看不练是学不好编程的，我十分侥幸的遇到了百度前端技术学院。它从易到难设置了 52 个工作，共分为四个阶段。工作难度循序渐进，每一个工作都有清晰的解说和学习参考资料。它还怕你不会做，容许你查看其他人上传的工作答案。

我先学习了 HTML、CSS，做完了第一阶段工作。再看完红宝书前十三章，做完了第二阶段工作。而后把红宝石剩下的全看完，做到第三阶段的工作四十五。前面的工作对于过后的我来说切实太难了，就没往下做。在 1 月的时候，又学习了 ajax，理解了前后端如何互相通信。

我从 16 年 11 月开始自学前端，始终到 17 年 2 月。历时 3 个月，均匀每天学习 3-4 个小时。两头有好几次因为太难想过放弃，不过最初还是保持下来了。

找工作的过程十分艰巨，我在网上各大招聘平台投了很多简历，但因为没学历、没教训，所以一个回复都没有。最初还是我媳妇工作的公司在招前端，给了我一个内推的机会，才有了第一次面试。并且第一次面试也很顺利，竟然过了，这是我没想到的。直到多年后我和面试官又在一个公司的时候，才晓得起因。他的意思是：看在我这么致力自学编程的份上，违心给我一个机会。

尽管人生很艰巨，但很有可能，遇到一个违心给你机会的人，就能扭转你的命运。

正式工作

第一年

在正式的我的项目中写代码和在学习时写代码是不一样的。你必须得思考这样写安不平安，会不会引起 BUG，会不会引起性能问题。在工作的第一年，写业务代码对我的晋升十分大。

第一年的次要工作，就是晋升前端根底能力。因而我看了很多 JavaScript 的书籍来晋升本人的程度：

1. JavaScript 高级程序设计（第三版）
2. 高性能 JavaScript
3. JavaScript 语言精粹
4. 你不晓得的 JavaScript（上中下三卷）
5. ES6 规范入门
6. 深入浅出 Node.js

这些书都是十分经典的书籍，有几本我还看了好几篇。

除了看书外，我还做了百度前端技术学院 2017 年的工作，它比 2016 年的工作（转行时做的是 2016 年的工作）更有难度和深度，非常适合进阶。

另外还学习了 jquery 和 nodejs。jquery 是工作中要用，nodejs 则是出于趣味学习的，没有多深刻。

第二年

到了第二年，写业务代码对于我来说，曾经晋升不大了，就像一个熟练工一样。而且感觉前端方面把握的常识曾经足够把工作做好了。于是我就想，为了成为一名顶尖的程序员，还须要做什么。我在网上查了很多材料，看了很多前辈的答复，最初决定自学计算机专业。

我制订了一个自学计算机专业的打算，并且缩小花在前端上的工夫。因为说到底，根底是地基。根底打好了，楼能力建得高。

计算机系统因素

计算机系统因素是我制订打算后开始学习的第一本书。它次要解说了计算机原理（1- 5 章）、编译原理（6-11 章）、操作系统相干常识（12 章）。不要看内容这么多，其实这本书的内容十分通俗易懂，翻译也很给力。每一章前面都有相干的试验，须要你手写代码去实现，堪称实践与实际联合的经典。

这里援用一下书里的简介，大家能够感受一下：

本书通过展示简略但功能强大的计算机系统之构建过程，为读者出现了一幅残缺、严格的计算机应用科学大图景。本书作者认为，了解计算机工作原理的最好办法就是亲自动手，从零开始构建计算机系统。

通过 12 个章节和我的项目来引领读者从头开始，本书逐渐地构建一个根本的硬件平台和古代软件阶层体系。在这个过程中，读者可能取得对于硬件体系结构、操作系统、编程语言、编译器、数据结构、算法以及软件工程的详实常识。通过这种逐渐结构的办法，本书揭示了计算机科学常识中的重要成分，并展现其它课程中所介绍的实践和利用技术如何融入这幅全局大图景当中去。

全书基于“先形象再实现”的论述模式，每一章都介绍一个要害的硬件或软件形象，一种实现形式以及一个理论的我的项目。实现这些我的项目所必要的计算机科学常识在本书中都有涵盖，只要求读者具备程序设计教训。本书配套的反对网站提供了书中形容的用于构建所有硬件和软件系统所必须的工具和材料，以及用于 12 个我的项目的 200 个测试程序。

全书内容宽泛、涉猎全面，适宜计算机及相干业余本科生、研究生、技术开发人员、老师以及技术爱好者参考和学习。

做完这些试验，让我有了一个质的晋升。以前感觉计算机就是一个黑盒，但当初不一样了。我开始理解计算机外部是如何运作的。明确了本人写的代码是怎么通过编译变成指令，最初在 CPU 中执行的。也明确了指令、数据怎么在 CPU 和内存之间流转的。

这本书所有试验的答案我都放在了 github 上，有趣味无妨理解一下。

Vue

这一年还学会了 Vue。除了熟读文档外，还为了钻研源码而模拟 Vue1.0 版本写了一个 mini-vue。不过学习源码对于我写业务代码并没有什么帮忙。如果不是出于趣味去钻研源码，最好不要去学，熟读文档就能齐全应酬工作了。如果是为了面试，那也不须要浏览源码。只须要在网上找一些品质高的源码剖析文章看一看，作一下笔记就 OK 了。

为什么我不倡议浏览源码？因为浏览源码效率太低，而且绝对于你的付出，收益并不大。到前面 Vue 出了 3.0 版本时，我也是有选择地浏览局部源码。

第三年

第三年有大半年的工夫节约在王者光荣上，那会天天只想着冲光荣，基本没心理学习。起初终于觉悟过去了，王者光荣是我成为顶级程序员的妨碍。于是痛定思痛，给戒掉了。

因为打王者的起因，第三年没学习多少新常识。基本上只做了三件事：

1. 写了几个 Vue 相干的插件和我的项目。
2. 将过来所学的前端常识，整顿了一下放在 github 上，有空就温习一下。
3. 学习数据结构与算法。

数据结构与算法

数据结构和算法有什么用？学了算法后，我感觉至多会懂得去分析程序的性能问题。

一个程序的性能有问题，须要你去优化。如果学过数据结构和算法，你会从工夫复杂度和空间复杂度去剖析代码，而后解决问题。如果没学过，你只能靠猜、碰运气来解决问题。

理论知识上，我次要看的是算法这本书，课后习题没做，改成用刷 leetcode 代替。目前曾经刷了 300+ 道题，还在持续刷。不过因为数学差，略微简单一点的算法常识都看不懂，成果不是很好。

第四年

第四年，也就是往年（2020），是我从新奋斗的一年。往年比以往的任何一年都要致力，每天保障 3 小时以上的学习工夫。如果切实太忙了，达不到要求，那就改天把工夫补上。附上我往年的学习时长图（记录软件为 Now Then）：

往年我做了十分多的事件：

1. 钻研前端工程化。
2. 学习操作系统。
3. 学习计算机网络。
4. 学习软件工程。
5. 学习 C++。
6. 学英语。

前端工程化

钻研前端工程化的目标，就是为了进步团队的开发效率。为此我看了很多书和材料：

• 高性能网站建设指南
• 高性能网站建设进阶指南
• Web 性能权威指南
• Chrome DevTools

…

钻研了一年的工夫，写了一篇品质较高的入门教程——手把手带你入门前端工程化——超具体教程。除此之外，还有其余工程化相干的一系列文章：

• 前端性能和谬误监控
• 前端我的项目自动化部署——超具体教程（Jenkins、Github Actions）
• ESlint + stylelint + VSCode 主动格式化代码 (2020)
• 前端性能优化 24 条倡议（2020）

操作系统

操作系统是治理计算机硬件与软件资源的计算机程序。通常状况下，程序是运行在操作系统上的，而不是间接和硬件交互。一个程序如果想和硬件交互就得通过操作系统。

如果你把握了操作系统的常识，你就晓得程序是怎么和硬件交互的。

例如你晓得申请内存，开释内存的外部过程是怎么的；当你按下 k 键，你也晓得 k 是怎么呈现在屏幕上的；晓得文件是怎么读出、写入的。

对于操作系统，我次要学习了以下书籍：

1. x86 汇编语言: 从实模式到保护模式
2. xv6-chinese
3. 操作系统导论

而后做 MIT6.828 的试验，实现了一个简略的操作系统内核。

计算机网络

计算机网络的作用次要是解决计算机之间如何通信的问题。

例如 A 地区和 B 地区的的计算机怎么通信？同一局域网的两台电脑又如何通信？学习计算机网络常识就是理解它们是怎么通信的以及怎么将它们联通起来。

对于计算机网络，我次要学习了以下书籍：

1. 计算机网络 – 自顶向下
2. 计算机网络
3. HTTP 权威指南
4. HTTP/ 2 基础教程

并且做了计算机网络 – 自顶向下的试验。

软件工程

软件工程是一门钻研用工程化办法构建和保护无效的、实用的和高质量的软件的学科。它波及程序设计语言、数据库、软件开发工具、零碎平台、规范、设计模式等方面。

学习以下书籍：

1. 代码大全（第 2 版）
2. 重构（第 2 版）
3. 软件工程

软件工程是一门十分宏大的学科，我只学习了一点皮毛。次要学习的是对于代码怎么写得更好、构造组织更正当的常识，这须要一边学习一边在工作中使用。

C++

学习 C++ 其实是为了钻研 nodejs 源码用的，看的这本书 C ++ Primer 中文版（第 5 版）。

英语

我从转行开始就始终在学习英语，不过往年花的工夫比拟多。

英语对于程序员的益处十分十分多，就我晓得的有：

1. 能够用 google 和 stackoverflow 来解决问题。
2. 晓得怎么给变量、函数起一个好的命名。
3. 很多风行的软件都是国外程序员写的，有问题你能够间接看文档以及和他人交换。

在我转行前英语词汇量只有几百，三年多过来了，当初词汇量有 6000（都是用百词斩测的）。

写作

写作的益处是十分多的，越早写越好。我还记得第一篇文章是 2017 年 2 月发表的，是我工作后的第 13 天，发表在 CSDN 上。

集体认为写作的益处有三点：

1. 锤炼你的写作能力。个别状况下，写得越多，写作能力越好。这个好，不是说你的文章遣词造句有多好，而是指文章条理清晰，通俗易懂，容易让人了解。
2. 写作其实是费曼学习法的使用，帮忙本人加深了解所学的常识。有没有试过，学完一个知识点后，感觉本人懂了。但让你向他人讲述这个知识点时，反而结结巴巴不晓得怎么讲。其实这是没了解透才会这样的，要让他人明确你在表白什么，首先你得十分相熟这个知识点。只知其一; 不知其二是不可能把它讲明确的，所以写作也是在帮你梳理常识。
3. 减少本人的曝光度。在我三年多的程序员生涯中，一共写了 50 多篇文章，因而在一些平台上也播种了不少赞和粉丝。因为我写的某些文章品质还行，不少大厂的程序员找过我，给我内推。不过因为集体学历问题，基本上都没下文 …

总之一句话，写作对你只有益处，没有害处。

学习

有抉择的学习

我感觉学习肯定要有十分清晰的指标，晓得你要学什么，怎么学。对于前端来说，我认为很多框架和库都是不必学的。例如前端三大框架，没有必要三个都学，把你工作中要用的那个把握好就行。

比方你公司用的是 Vue，就深刻学习 Vue，如果要看源码就只看重点局部的源码。例如模板编译、Diff 算法、Vue 原生组件实现、指令实现等等。

剩下的两个框架 React、Angular 做个 DEMO 相熟一下就行，毕竟原理都是相通的。等你公司要上这两个再深刻学习，不过也不倡议浏览源码了，太累。看他人写的现成的源码剖析文章就好。

其余的，像 easyui、Backbone.js、各种小程序 … 用不到的坚定不学，浪费时间。用的时候看文档就行了，当然，如果有趣味理解如何实现也是能够的。

学习办法

我感觉好的学习办法十分重要，对我比拟有用的两个是：

1. 费曼学习法。
2. 学习一个知识点，最好把它吃透。

费曼学习法在《写作》一节中曾经说过了，这里着重说说第二个。

你有没有过这种感觉：感觉本人会的货色很多，但其实把握的常识很多都停留在表面上，他人要是往深一问，就懵逼了。

我以前就有过这种感觉，次要问题出在对常识的学习仅停留在浅尝即止的状态。就是学习新常识，能写个 DEMO，就感觉本人学得差不多了。这种学习办法是很无害的，首先常识存留度不高，其次是浪费时间，因为很快就会忘掉。

起初我尝试改过这种状态，在学习新的知识点时，时常问本人三个问题：

1. 这是什么？
2. 为什么要这样？能够不这样吗？
3. 有没有更好的形式？

当然，不是所有问题都能实用灵魂三问，但它实用大多数状况。

举个例子 ：看过性能优化相干文章的同学应该晓得有这么一条规定，要缩小页面上的 HTTP 申请。

这是什么？

先理解一下 HTTP 申请是啥，查资料发现原来是向服务器申请资源用的。

为什么要缩小 HTTP 申请？

查资料发现：HTTP 申请须要经验 DNS 查找，TCP 握手，SSL 握手（如果有的话）等一系列过程，能力真正收回这个申请。并且古代浏览器对于 TCP 并发数也是有限度的，超过 TCP 并发数的 HTTP 申请只能等后面的申请实现了能力持续发送。

咱们能够关上 chrome 开发者工具看一下一个 HTTP 申请所破费的具体工夫。

这是一个 HTTP 申请，申请的文件大小为 28.4KB。

名词解释：

1. Queueing: 在申请队列中的工夫。
2. Stalled: 从 TCP 连贯建设实现，到真正能够传输数据之间的时间差，此工夫包含代理协商工夫。
3. Proxy negotiation: 与代理服务器连贯进行协商所破费的工夫。
4. DNS Lookup: 执行 DNS 查找所破费的工夫，页面上的每个不同的域都须要进行 DNS 查找。
5. Initial Connection / Connecting: 建设连贯所破费的工夫，包含 TCP 握手 / 重试和协商 SSL。
6. SSL: 实现 SSL 握手所破费的工夫。
7. Request sent: 收回网络申请所破费的工夫，通常为一毫秒的工夫。
8. Waiting(TFFB): TFFB 是收回页面申请到接管到应答数据第一个字节的工夫总和，它蕴含了 DNS 解析工夫、TCP 连接时间、发送 HTTP 申请工夫和取得响应音讯第一个字节的工夫。
9. Content Download: 接管响应数据所破费的工夫。

从这个例子能够看出，真正下载数据的工夫占比为 13.05 / 204.16 = 6.39%。文件越小，这个比例越小，文件越大，比例就越高。这就是为什么要倡议将多个小文件合并为一个大文件，从而缩小 HTTP 申请次数的起因。

有没有更好的形式？

应用 HTTP2，所有的申请都能够放在一个 TCP 连贯上发送。HTTP2 还有好多货色要学，这里不深刻解说了。

通过灵魂三问后，是不是这条优化规定的前因后果全都理清了，并且在你查资料入手的过程中，常识会了解得更加粗浅。

把握了这种学习办法，并且时刻使用在学习中、工作中，冲破瓶颈只是工夫的问题 。

总结

上面提前答复一下可能会有的问题。

百度前端技术学院

百度前端技术学院 2017 年及往后的工作，如果没有报名，那就只能做局部工作。2016 年的工作则因为百度服务器的问题，很多题的示例图都裂了。这个其实是有解决方案的，那就是看他人的答案。把他人的源码下载下来，用浏览器关上 html 文件当示例图看。这两年的工作我都做了大部分，附上答案：

1. 百度前端技术学院 2016 工作
2. 百度前端技术学院 2017 工作

学历晋升

我从 18 年开始，曾经报考了成人高考大专，19 年报了自考本科。大专明年 1 月就能毕业，自考本科比拟难，可能 2021 年或 2022 年能力考下来。

写在最初

从转行到当初，曾经过来 3 年多了。不得不说转行当程序员给了我人生第二次机会，我也很喜爱这个职业。不过这几年始终都是在小公司，导致本人的技术和视线得不到很大的晋升。所以当初的指标除了学习计算机专业外，就是进大厂，心愿有一天能实现。

尽管往年曾经 32 了，但我对将来依然充满希望。致力地学习，致力地晋升本人，为了成为一名顶尖的程序员而致力。