逆襲進大廠：程式員究竟該如何學好前端？

之前發了一個文章關于自己的成長經曆，有一些JR問我，如何學好前端，我尚不是一名優秀的前端工程師，但也算入門前端，是以今天分享一些自己的經驗。

【Why】

先來點真實的，我是誰？為什麼這麼做？未來還會做什麼？

​『我是誰』​ 樓主大學就讀于山東某二本院校，專業物聯網工程，碩士就讀于北京某211高校，專業計算機技術。大學軟體硬體都有涉獵，學過C、資料結構、Java等基礎課程，除此之外就基本沒有學習過相關軟體的課程了。自己讀研後開始廣泛學習計算機程式設計技術，前端、C#、Java、Python、Node、Go、各種架構我都有學習，因為導師有一個Web項目，是以前端學習的更多也更紮實，是以在找工作的過程中自己選擇了前端方向，但因為自己也有後端開發和Node開發的經驗，是以最後找到的工作是全棧開發。

​『為什麼這麼做』​ 正如我上一篇文章所說，我淋過雨，是以我希望可以為更多人撐起一把傘。網上的大部分程式設計入門教程，都不太适合初學者，我是研一開始自學Web開發的，自己在學習的路上遇到過很多問題，也知道自學的困難，我知道相比于知識的傳授，啟蒙或許是更重要的，我不是授課老師，我不會告訴你具體看什麼什麼課程，但是我自我感覺現在已經初步入門前端，我知道需要學什麼，也知道如何學習避免走一些彎路，而我也樂意分享給大家，希望你在學習的過程中可以參考我的路線，更快地入門前端。

​『未來會做什麼』​ 我會整理建立ShowMeTheCode專欄，裡面包括學習路線、經驗分享，秋招經驗分享，如何制作優秀的履歷，分享我在學習程式設計的過程中讀的書籍。争取在畢業前會做出自己的個人網站，自己的東西都會遷移到上面。再後面就是做前端的分享，做一些開源的教程，也歡迎大家可以持續關注。

【What】

許多學習前端的同學說起自己的技術棧，可能會說HTML、JavaScript、CSS，React/Vue，然後就不知道該說什麼了。說起前端，一些同學的第一印象還是前端隻是寫寫界面，把界面做的漂亮一些就可以了，比如之前Java web興盛的時候，前端隻需要做好界面把靜态界面交給後端人員，後端人員再用模闆引擎去處理界面，但随着大前端的興起，Vue、React等架構的高速發展，前後端分離架構的出現，Node語言、架構（Express、Koa）的不斷發展，建構工具（Webpa·ck、Vite）的不斷完善，前端不再是單純的寫界面了，前端工程化越來越強大，越來越多的工作可以由前端來做。而除了單純的開發，前端人員也需要将精力放在性能優化與安全上，畢竟使用者是直接通過你做的東西與軟體進行互動的，如何在保證使用者資訊安全的前提下讓使用者擁有更好的體驗感，成為前端工程師的又一任務。

大部分初學者對前端沒有整體的了解，在學習的過程中可能也是被動的灌輸式學習，隻是老師告訴你該學這個就去學這個，我覺得學習前端同樣需要有自己的知識體系，或者說自己對前端技術棧的了解。在我看來，前端除了要做好普通的開發，還需要了解浏覽器架構、Web網絡、事件循環機制、V8、浏覽器渲染、Web安全、建構工具等等。有時候很多技術其實學起來并不難，難的是不知道該按照什麼順序去學，如果抛開技術棧底層棧的内容去了解上層内容，那麼就有可能陷入知識盲區，像一隻無頭蒼蠅一樣亂撞。

很多同學在學習一門程式設計語言的時候不知道該按照什麼順序學，我做了一份關于前端的思維導圖，然後帶了一點自己的經驗，給大家參考，因為我讀研後算是從零基礎開始學的，是以自己的學習路線可能更适合沒有經驗的同學，不一定适用于所有人，大家可以根據自己的實際情況做自己的調整，有自己的規劃。

​其中需要注意的三點​

1. 裡面用數字标注了我認為對應知識點的重要性，在我看來，學會1是成為入門前端的基礎，學會2可以為你錦上添花，學會3可以進一步豐富你的技術棧，更好的程式設計。
2. 不同的同學學習速度不同，是以我不會告訴你需要花多長時間把這些學完，你隻需要盡自己的最大努力，在求職或獨立完成某項工作前，把這些學完就可以。
3. 我在每個子產品下寫了一些我認為比較重要的知識點，但不意味着這個子產品你隻需要學習這麼多。

​〖基礎篇〗​

最重要也是最基礎的，HTML+JavaScript+CSS三大基礎，雖然現在各大架構盛行，很少再使用原生的語言進行開發，但是不要忘記，架構的底層還是這些東西，隻有将這些内容學好了，才能更好的學習後面的知識。

同時，你可以适當的了解一些标準，比如W3C标準，可以讓你更好的寫代碼。

​〖進階篇〗​

基礎學習完後我認為首先要對一些架構進行學習，一方面可以繼續鞏固基礎，另一方面優秀的架構在應用、源碼等多方面都值得深入了解。

在學習Vue、React之前，如果你有足夠的時間，建議你學習一下Bootstrap、JQuery。Bootstrap可以稱之為最早的UI架構，JQuery雖然現在不再流行，但還是很有必要學習一下的，可以讓你了解以前的開發模式，甚至可以閱讀以下源碼，學習其中優秀的設計模式和代碼風格。

Vue/React我覺得最少要學習一個，而且不僅僅是會使用還要閱讀源碼，了解實作原理。

最後需要學習浏覽器原理、Web安全。學習浏覽器原理可以讓你更好的知道自己的代碼是如何在浏覽器運作的，界面究竟是如何渲染的等諸多你之前從未關注過的知識。浏覽器通過網絡進行資料傳輸，浏覽器又是如何保證資料、隐私安全的，這同樣值得關注。

​〖進階篇〗​

JS擁有不同的引擎，Chrome浏覽器的V8引擎是很有必要好好學習一下的，學習完後，你可以對JS的有更加深層次的了解。

項目工程化、性能優化都是在做項目的重點，如果你希望涉獵一些後端知識，你同樣可以學習Node、資料庫，如果你學有餘力，甚至可以學習Java（Spring）、Python（Django）等，如果能掌握跨端開發和Nginx的使用，那就更好了。

〖計算機基礎〗

網絡是前端與後端通信的橋梁，隻有學好了網絡，才能更好的了解這之間的過程。例如：經典的面試題——“在浏覽器URL輸入一個位址，到傳回界面，這之間都發生了什麼？”

或許前端與作業系統關聯并不是很大，但如今的浏覽器，似乎逐漸成為了作業系統之上的“作業系統”（例如ChromeOS），而浏覽器的底層架構也逐漸向作業系統架構方向發展，了解一些作業系統的知識，可以幫助自己更好的了解浏覽器。

算法可以幫助程式員寫出更高效的代碼，設計模式可以幫助程式員寫出更高品質的代碼。前端雖然對算法的要求沒有那麼高，但優秀的算法能力不僅可以讓你在面試中一路暢通，也可以讓你在開發中更加得心應手，而學好設計模式，同樣可以幫助你寫出更加優雅的代碼。多

少了解一些編譯原理的相關知識，可以讓你對JavaScript語言的編譯、執行過程更加了解，讓你了解AST等相關知識，讓你寫出更快速的JS代碼，讓你對JS更加了解。

【How】

僅僅了解學什麼是不夠的，如何學習是也是非常重要的。我覺得整體的學習路線應該是 視訊入門 + 上手練習 + 源碼學習 + 讀書鞏固。

〖視訊入門〗

對于沒有基礎的同學來說上來就讀書學習是比較枯燥的，而且可能不知道該如何操作，容易一上來就産生抵觸心理，放棄學習，是以我覺得對于新手來說看視訊是更好的入門方式。一方面大多數授課老師會提煉比較重要的部分來給學生講，另一方面可以跟着老師實際動手操作，接受起來會比較快。

〖上手練習〗

前端不像Java等後端，搭建伺服器相對複雜，不論是從剛開始的靜态界面，或是到後面的Vue等架構，操作相對簡單，比較容易複現。是以在有了一定基礎後，需要進行不斷的做項目練習。項目的選取是比較多樣的，一般每個教學視訊課程的後面都會跟一個項目練習，剛開始可以跟着老師敲，把老師講的都弄明白、了解，後面可以自己找一些開源項目來做。

〖讀書鞏固〗

僅有入門和練習我覺得是不夠的，師父領進門，修行在個人，很多課程在講解的時候，基本隻會講基礎的應用，一些原理性的并不會講的很透徹，是以在掌握好基礎後需要去閱讀書籍來了解一些底層的東西，比如我在學習JavaScript的時候，看的課程老師講的事件循環比較簡單，基本是草草了事，自己也不是特别明白，但剛開始不明白這個是不影響做項目的，但是在找工作的時候，确實經常容易被問到，後來讀了《你不知道的JavaScript》，才徹底明白了事件循環是怎麼回事。

〖源碼學習〗

源碼的學習有兩個作用，一個是幫助我們了解架構實作原理，可以更好的使用，另一方面優秀的源碼往往有着比較好的代碼風格、使用了一些優秀的設計模式，我們可以從中學習到很多有用程式設計技巧。

一點碎碎念。

因為自己現在剛來實習，然後mentor又給了一個比較緊急的任務，需要我在兩周内做完，是以可能更新、回複的都會慢一些，後面我會把自己的校招筆記整理一下，釋出出來，然後陸續整理一些自己在學習不同知識時候看的視訊和看的書開源出來，希望大家可以持續關注。

學習是枯燥的，是需要互相協作互相幫助的。大家可以加我的微信 ，我會拉大家程序式設計學習讨論交流群，大家可以在裡面進行提問，互相幫助，一起進步。也可以找我聊天，分享你的故事，或者你有什麼問題，前後端程式設計學習、考研、求職方面的問題，都可以問我。

希望可以幫助你更好的入門前端。

希望可以在你學習的路上給你一點幫助。