為什么轉行

因為混得不好。

在成為程序員之前，我干過很多工作。由于學歷的問題（高中），我的工作基本上都是體力活。包括但不限于：工廠普工、銷售（沒有干銷售的才能）、搬運工、擺地攤等，轉行前最后一份工作是修電腦。這么多年，月薪沒高過 3300...

后來偶然一個機會我發現了知乎這個網站，在上面了解到程序員的各種優點。于是，我下定決心轉行（2016 年，當時 28 了），辭職在家自學編程。并且也得到了媳婦的支持，感謝我的媳婦。

轉行準備

轉行選擇前端也是在知乎上看網友分析的，比后端好入門。

如何選擇教程？

最好在網上多查查資料，找評價高的或者去豆瓣上找評分高的書。

我在網上查了很多資料，最終確定 HTML、CSS 在?w3cschool^[1]?學習。JavaScript 則選擇了JavaScript 高級程序設計第三版^[2]（俗稱紅寶書，現在已經有第四版了）。

光看不練是學不好編程的，我非常幸運的遇到了百度前端技術學院^[3]。它從易到難設置了 52 個任務，共分為四個階段。任務難度循序漸進，每一個任務都有清晰的講解和學習參考資料。它還怕你不會做，允許你查看其他人上傳的任務答案。

我先學習了 HTML、CSS，做完了第一階段任務。再看完紅寶書前十三章，做完了第二階段任務。然后把紅寶石剩下的全看完，做到第三階段的任務四十五。后面的任務對于當時的我來說實在太難了，就沒往下做。在 1 月的時候，又學習了 ajax，了解了前后端如何相互通信。

我從 16 年 11 月開始自學前端，一直到 17 年 2 月。歷時 3 個月，平均每天學習 3-4 個小時。中間有好幾次因為太難想過放棄，不過最后還是堅持下來了。

找工作的過程非常艱難，我在網上各大招聘平臺投了很多簡歷，但由于沒學歷、沒經驗，所以一個回復都沒有。最后還是我媳婦工作的公司在招前端，給了我一個內推的機會，才有了第一次面試。并且第一次面試也很順利，居然過了，這是我沒想到的。直到多年后我和面試官又在一個公司的時候，才知道原因。他的意思是：看在我這么努力自學編程的份上，愿意給我一個機會。

雖然人生很艱難，但很有可能，遇到一個愿意給你機會的人，就能改變你的命運。

正式工作

第一年

在正式的項目中寫代碼和在學習時寫代碼是不一樣的。你必須得考慮這樣寫安不安全，會不會引起 BUG，會不會引起性能問題。在工作的第一年，寫業務代碼對我的提升非常大。

第一年的主要任務，就是提升前端基礎能力。因此我看了很多 JavaScript 的書籍來提升自己的水平：

1.JavaScript高級程序設計（第三版）^[4]2.高性能JavaScript^[5]3.JavaScript語言精粹^[6]4.你不知道的JavaScript^[7]（上中下三卷）5.ES6標準入門^[8]6.深入淺出Node.js^[9]

這些書都是非常經典的書籍，有幾本我還看了好幾篇。

除了看書外，我還做了百度前端技術學院 2017 年^[10]的任務，它比 2016 年的任務（轉行時做的是 2016 年的任務）更有難度和深度，非常適合進階。

另外還學習了 jquery 和 nodejs。jquery 是工作中要用，nodejs 則是出于興趣學習的，沒有多深入。

第二年

到了第二年，寫業務代碼對于我來說，已經提升不大了，就像一個熟練工一樣。而且感覺前端方面掌握的知識已經足夠把工作做好了。于是我就想，為了成為一名頂尖的程序員，還需要做什么。我在網上查了很多資料，看了很多前輩的回答，最后決定自學計算機專業。

我制定了一個自學計算機專業的計劃，并且減少花在前端上的時間。因為說到底，基礎是地基。基礎打好了，樓才能建得高。

計算機系統要素

計算機系統要素^[11]是我制訂計劃后開始學習的第一本書。它主要講解了計算機原理（1-5章）、編譯原理（6-11章）、操作系統相關知識（12章）。不要看內容這么多，其實這本書的內容非常通俗易懂，翻譯也很給力。每一章后面都有相關的實驗，需要你手寫代碼去完成，堪稱理論與實踐結合的經典。

這里引用一下書里的簡介，大家可以感受一下：

本書通過展現簡單但功能強大的計算機系統之構建過程，為讀者呈現了一幅完整、嚴格的計算機應用科學大圖景。本書作者認為，理解計算機工作原理的最好方法就是親自動手，從零開始構建計算機系統。

通過12個章節和項目來引領讀者從頭開始，本書逐步地構建一個基本的硬件平臺和現代軟件階層體系。在這個過程中，讀者能夠獲得關于硬件體系結構、操作系統、編程語言、編譯器、數據結構、算法以及軟件工程的詳實知識。通過這種逐步構造的方法，本書揭示了計算機科學知識中的重要成分，并展示其它課程中所介紹的理論和應用技術如何融入這幅全局大圖景當中去。

全書基于“先抽象再實現”的闡述模式，每一章都介紹一個關鍵的硬件或軟件抽象，一種實現方式以及一個實際的項目。完成這些項目所必要的計算機科學知識在本書中都有涵蓋，只要求讀者具備程序設計經驗。本書配套的支持網站提供了書中描述的用于構建所有硬件和軟件系統所必需的工具和資料，以及用于12個項目的200個測試程序。

全書內容廣泛、涉獵全面，適合計算機及相關專業本科生、研究生、技術開發人員、教師以及技術愛好者參考和學習。

做完這些實驗，讓我有了一個質的提升。以前感覺計算機就是一個黑盒，但現在不一樣了。我開始了解計算機內部是如何運作的。明白了自己寫的代碼是怎么經過編譯變成指令，最后在 CPU 中執行的。也明白了指令、數據怎么在 CPU 和內存之間流轉的。

這本書所有實驗的答案我都放在了?github^[12]?上，有興趣不妨了解一下。

Vue

這一年還學會了 Vue。除了熟讀文檔外，還為了研究源碼而模仿 Vue1.0 版本寫了一個?mini-vue^[13]。不過學習源碼對于我寫業務代碼并沒有什么幫助。如果不是出于興趣去研究源碼，最好不要去學，熟讀文檔就能完全應付工作了。如果是為了面試，那也不需要閱讀源碼。只需要在網上找一些質量高的源碼分析文章看一看，作一下筆記就 OK 了。

為什么我不建議閱讀源碼？因為閱讀源碼效率太低，而且相對于你的付出，收益并不大。到后面 Vue 出了 3.0 版本時，我也是有選擇地閱讀部分源碼。

第三年

第三年有大半年的時間浪費在王者榮耀上，那會天天只想著沖榮耀，根本沒心思學習。后來終于醒悟過來了，王者榮耀是我成為頂級程序員的阻礙。于是痛定思痛，給戒掉了。

由于打王者的原因，第三年沒學習多少新知識。基本上只做了三件事：

1.寫了幾個 Vue 相關的插件和項目。2.將過去所學的前端知識，整理了一下放在 github 上，有空就復習一下。3.學習數據結構與算法。

數據結構與算法

數據結構和算法有什么用？學了算法后，我覺得至少會懂得去分析程序的性能問題。

一個程序的性能有問題，需要你去優化。如果學過數據結構和算法，你會從時間復雜度和空間復雜度去分析代碼，然后解決問題。如果沒學過，你只能靠猜、碰運氣來解決問題。

理論知識上，我主要看的是算法^[14]這本書，課后習題沒做，改成用刷 leetcode 代替。目前已經刷了 300+ 道題，還在繼續刷。不過由于數學差，稍微復雜一點的算法知識都看不懂，效果不是很好。

第四年

第四年，也就是今年（2020），是我重新奮斗的一年。今年比以往的任何一年都要努力，每天保證 3 小時以上的學習時間。如果實在太忙了，達不到要求，那就改天把時間補上。附上我今年的學習時長圖（記錄軟件為 Now Then）：

今年我做了非常多的事情：

1.研究前端工程化。2.學習操作系統。3.學習計算機網絡。4.學習軟件工程。5.學習 C++。6.學英語。

前端工程化

研究前端工程化的目的，就是為了提高團隊的開發效率。為此我看了很多書和資料：

?高性能網站建設指南^[15]?高性能網站建設進階指南^[16]?Web性能權威指南^[17]?Chrome DevTools^[18]?...

研究了一年的時間，寫了一篇質量較高的入門教程——手把手帶你入門前端工程化——超詳細教程^[19]。除此之外，還有其他工程化相關的一系列文章：

?前端性能和錯誤監控^[20]?前端項目自動化部署——超詳細教程（Jenkins、Github Actions）^[21]?ESlint + stylelint + VSCode自動格式化代碼(2020)^[22]?前端性能優化 24 條建議（2020）^[23]

操作系統

操作系統是管理計算機硬件與軟件資源的計算機程序。通常情況下，程序是運行在操作系統上的，而不是直接和硬件交互。一個程序如果想和硬件交互就得通過操作系統。

如果你掌握了操作系統的知識，你就知道程序是怎么和硬件交互的。

例如你知道申請內存，釋放內存的內部過程是怎樣的；當你按下 k 鍵，你也知道 k 是怎么出現在屏幕上的；知道文件是怎么讀出、寫入的。

對于操作系統，我主要學習了以下書籍：

1.x86匯編語言:從實模式到保護模式^[24]2.xv6-chinese^[25]3.操作系統導論^[26]

然后做?MIT6.828^[27]?的實驗，實現了一個簡單的操作系統內核。

計算機網絡

計算機網絡的作用主要是解決計算機之間如何通信的問題。

例如 A 地區和 B 地區的的計算機怎么通信？同一局域網的兩臺電腦又如何通信？學習計算機網絡知識就是了解它們是怎么通信的以及怎么將它們聯通起來。

對于計算機網絡，我主要學習了以下書籍：

1.計算機網絡--自頂向下^[28]2.計算機網絡^[29]3.HTTP權威指南^[30]4.HTTP/2基礎教程^[31]

并且做了計算機網絡--自頂向下^[32]的實驗。

軟件工程

軟件工程是一門研究用工程化方法構建和維護有效的、實用的和高質量的軟件的學科。它涉及程序設計語言、數據庫、軟件開發工具、系統平臺、標準、設計模式等方面。

學習以下書籍：

1.代碼大全（第2版）^[33]2.重構（第2版）^[34]3.軟件工程^[35]

軟件工程是一門非常龐大的學科，我只學習了一點皮毛。主要學習的是關于代碼怎么寫得更好、結構組織更合理的知識，這需要一邊學習一邊在工作中運用。

C++

學習 C++ 其實是為了研究 nodejs 源碼用的，看的這本書C++ Primer 中文版（第 5 版）^[36]。

英語

我從轉行開始就一直在學習英語，不過今年花的時間比較多。

英語對于程序員的好處非常非常多，就我知道的有：

1.可以用 google 和 stackoverflow 來解決問題。2.知道怎么給變量、函數起一個好的命名。3.很多流行的軟件都是國外程序員寫的，有問題你可以直接看文檔以及和別人交流。

在我轉行前英語詞匯量只有幾百，三年多過去了，現在詞匯量有 6000（都是用百詞斬測的）。

寫作

寫作的好處是非常多的，越早寫越好。我還記得第一篇文章是 2017 年 2 月發表的，是我工作后的第 13 天，發表在 CSDN 上。

個人認為寫作的好處有三點：

1.鍛煉你的寫作能力。一般情況下，寫得越多，寫作能力越好。這個好，不是說你的文章遣詞造句有多好，而是指文章條理清晰，通俗易懂，容易讓人理解。2.寫作其實是費曼學習法^[37]的運用，幫助自己加深理解所學的知識。有沒有試過，學完一個知識點后，覺得自己懂了。但讓你向別人講述這個知識點時，反而吞吞吐吐不知道怎么講。其實這是沒理解透才會這樣的，要讓別人明白你在表達什么，首先你得非常熟悉這個知識點。一知半解是不可能把它講明白的，所以寫作也是在幫你梳理知識。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任務^[38]2.百度前端技術學院2017任務^[39]

學歷提升

我從 18 年開始，已經報考了成人高考大專，19 年報了自考本科。大專明年 1 月就能畢業，自考本科比較難，可能 2021 年或 2022 年才能考下來。

寫在最后

從轉行到現在，已經過去 3 年多了。不得不說轉行當程序員給了我人生第二次機會，我也很喜歡這個職業。不過這幾年一直都是在小公司，導致自己的技術和視野得不到很大的提升。所以現在的目標除了學習計算機專業外，就是進大廠，希望有一天能實現。

雖然今年已經 32 了，但我對未來仍然充滿希望。努力地學習，努力地提升自己，為了成為一名頂尖的程序員而努力。

References

[1]?w3cschool:?https://www.w3school.com.cn/
[2]?JavaScript 高級程序設計第三版:?https://book.douban.com/subject/10546125/
[3]?百度前端技術學院:?http://ife.baidu.com/2016/task/all
[4]?JavaScript高級程序設計（第三版）:?https://book.douban.com/subject/10546125/
[5]?高性能JavaScript:?https://book.douban.com/subject/26599677/
[6]?JavaScript語言精粹:?https://book.douban.com/subject/11874748/
[7]?你不知道的JavaScript:?https://book.douban.com/subject/26351021/
[8]?ES6標準入門:?https://es6.ruanyifeng.com/
[9]?深入淺出Node.js:?https://book.douban.com/subject/25768396/
[10]?百度前端技術學院 2017 年:?http://ife.baidu.com/2017
[11]?計算機系統要素:?https://book.douban.com/subject/1998341/
[12]?github:?https://github.com/woai3c/nand2tetris
[13]?mini-vue:?https://github.com/woai3c/mini-vue
[14]?算法:?https://book.douban.com/subject/19952400/
[15]?高性能網站建設指南:?https://book.douban.com/subject/26411563/
[16]?高性能網站建設進階指南:?https://book.douban.com/subject/26410870/
[17]?Web性能權威指南:?https://book.douban.com/subject/25856314/
[18]?Chrome DevTools:?https://developers.google.com/web/tools/chrome-devtools
[19]?手把手帶你入門前端工程化——超詳細教程:?https://juejin.im/post/6892003555818143752
[20]?前端性能和錯誤監控:?https://juejin.im/post/6844903998412029959
[21]?前端項目自動化部署——超詳細教程（Jenkins、Github Actions）:?https://juejin.im/post/6887751398499287054
[22]?ESlint + stylelint + VSCode自動格式化代碼(2020):?https://juejin.im/post/6892000216020189198
[23]?前端性能優化 24 條建議（2020）:?https://juejin.im/post/6892994632968306702
[24]?x86匯編語言:從實模式到保護模式:?https://github.com/woai3c/recommended-books/blob/master/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80/x86%E6%B1%87%E7%BC%96%E8%AF%AD%E8%A8%80%20%20%E4%BB%8E%E5%AE%9E%E6%A8%A1%E5%BC%8F%E5%88%B0%E4%BF%9D%E6%8A%A4%E6%A8%A1%E5%BC%8F%E5%AE%8C%E6%95%B4%E7%89%88.pdf
[25]?xv6-chinese:?https://github.com/woai3c/recommended-books/blob/master/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/xv6-chinese.pdf
[26]?操作系統導論:?https://book.douban.com/subject/33463930/
[27]?MIT6.828:?https://github.com/woai3c/MIT6.828
[28]?計算機網絡--自頂向下:?https://book.douban.com/subject/30280001/
[29]?計算機網絡:?https://book.douban.com/subject/26960678/
[30]?HTTP權威指南:?https://book.douban.com/subject/10746113/
[31]?HTTP/2基礎教程:?https://book.douban.com/subject/27665112/
[32]?計算機網絡--自頂向下:?https://github.com/woai3c/Computer-Networking-Lab
[33]?代碼大全（第2版）:?https://book.douban.com/subject/1477390/
[34]?重構（第2版）:?https://book.douban.com/subject/30468597/
[35]?軟件工程:?https://book.douban.com/subject/6047742/
[36]?C++ Primer 中文版（第 5 版）:?https://book.douban.com/subject/25708312/
[37]?費曼學習法:?https://baike.baidu.com/item/%E8%B4%B9%E6%9B%BC%E5%AD%A6%E4%B9%A0%E6%B3%95/50895393?fr=aladdin
[38]?百度前端技術學院2016任務:?https://github.com/woai3c/2016ife-task
[39]?百度前端技術學院2017任務:?https://github.com/woai3c/2017ife-task

推薦閱讀

若川知乎高贊：有哪些必看的 JS庫？
我在阿里招前端，我該怎么幫你？（現在還可以加模擬面試群）
如何拿下阿里巴巴 P6 的前端 Offer
如何準備阿里P6/P7前端面試--項目經歷準備篇
大廠面試官常問的亮點，該如何做出？
如何從初級到專家(P4-P7)打破成長瓶頸和有效突破
若川知乎問答：2年前端經驗，做的項目沒什么技術含量，怎么辦？

末尾

你好，我是若川，江湖人稱菜如若川，歷時一年只寫了一個學習源碼整體架構系列~(點擊藍字了解我)

1. 關注若川視野，回復"pdf" 領取優質前端書籍pdf，回復"1"，可加群長期交流學習

2. 我的博客地址：https://lxchuan12.gitee.io?歡迎收藏

3. 覺得文章不錯，可以點個在看呀^_^另外歡迎留言交流～

精選前端好文，伴你不斷成長

若川原創文章精選!可點擊

小提醒：若川視野公眾號面試、源碼等文章合集在菜單欄中間【源碼精選】按鈕，歡迎點擊閱讀，也可以星標我的公眾號，便于查找