前端最努力的同學都是如何學習的？
大家好，我是二哥呀！
先說一下我個人對前端職業(yè)發(fā)展前景的看法，希望對那些站在前端學習起點，或者已經(jīng)在路上，但又有點猶豫和迷茫的小伙伴一點點啟發(fā)和幫助。
我畢業(yè)那會，也就是大概 10 年前，如果你在學校的時候做過類似于“圖書管理系統(tǒng)”這樣的項目，就可以拿到淘寶的 offer，那發(fā)展到現(xiàn)在，能做到這一點的候選人實在是太多了！
但前端發(fā)展到現(xiàn)在，要求也越來越高了。比如說天貓的消費者前端導購頁面，為了提高購買的轉(zhuǎn)化率，用戶體驗做了非常多系統(tǒng)化的優(yōu)化升級，復雜度很高。
一、通用學習方法
前端開發(fā)上手快，又容易得到反饋，頁面效果即時可見，所以我推薦的學習方法是：
學一點內(nèi)容就快速實戰(zhàn)，從實戰(zhàn)中找到成就感，發(fā)現(xiàn)問題，再帶著問題回去系統(tǒng)化的學習，如此往復。
二、基礎
1）HTML+CSS
這部分的學習建議到 W3School 上學習，邊學邊練，學習的過程中可以打開瀏覽器的開發(fā)者模式，方便查看和調(diào)整。
2）JavaScript
這部分的學習內(nèi)容非常多，從初級到高級，有很多內(nèi)容需要學習。如果沒有其他編程語言基礎的話，學習起來就需要多一點點耐心。
先看一下阮一峰老師的 JavaScript 入門教程，內(nèi)容從最簡單的開始講，循序漸進、由淺入深，并配合了大量的代碼實例，非常適合初學者。
https://wangdoc.com/javascript/
之后建議看一看《JavaScript 語言精粹》這本書，這本書能夠幫你確認 JavaScript 中哪些是精華，哪些是糟粕。
像JavaScript 中變量的作用域、變量傳遞方式、函數(shù)的定義環(huán)境和執(zhí)行環(huán)境、閉包、函數(shù)的四種調(diào)用方式（一般函數(shù)、對象的方法、apply、call）這些內(nèi)容在這本書中都有詳細的講解。
就目前來說，市場比較缺的是高級前端，所以如果想要進階的話，必須要學一下數(shù)據(jù)結(jié)構(gòu)與算法。
為什么要學數(shù)據(jù)結(jié)構(gòu)與算法呢？
因為這是解決復雜問題的必備武器，比如說，如何把一個多級嵌套的數(shù)據(jù)對象，轉(zhuǎn)換成扁平的 Map 結(jié)構(gòu)再提交到服務器。
更為關鍵的是，數(shù)據(jù)結(jié)構(gòu)與算法是計算機的思維方式，比如說分治算法的思想，對模塊設計以及系統(tǒng)設計都有著較大的影響。
三、初級
有了基礎以后，就可以進行一般的靜態(tài)網(wǎng)頁設計了，如果想要進階的話，還需要學習更多的知識。
1）CSS
CSS 的學習可以分為三塊：基礎概念、CSS 2.1 規(guī)范、CSS 3 規(guī)范。
建議到 GitHub 上看一下這份通用 CSS 筆記、建議與指導，第一部分探討了 CSS 的語法、格式，并且分析了 CSS 的結(jié)構(gòu)；第二部分圍繞方法論、思維框架以及編寫規(guī)劃展開了對 CSS 的討論。
https://github.com/chadluo/CSS-Guidelines
2）JavaScript
為了能勝任 JavaScript 編程，你必須在之前的基礎之上進一步學習，像三個前端框架：React、Vue、Angular，可以挑選其一進行深入學習。
Vue.js 官方文檔，講真，學習一門新技術的時候，官方文檔肯定是首選。我推薦的策略是以理解為主，難以理解的內(nèi)容可以暫時跳過，因為死磕的東西可能一時半會用不上。快速把文章看一遍，擴充自己對這門技術的認知，對以后掌握它會很有幫助。
https://cn.vuejs.org/v2/guide/index.html
Vue.js 技術揭秘，這份開源教程的目標是全方位地解析 Vue.js 的實現(xiàn)原理，對源碼層面有著很深入的剖析。
https://github.com/ustbhuangyi/vue-analysis
Angular 入門教程，這份官方教程會通過構(gòu)建一個電子商務網(wǎng)站，介紹 Angular 的基本知識。
https://angular.cn/start
React 入門教程，這份教程更適合喜歡邊學邊做的開發(fā)者。
https://zh-hans.reactjs.org/tutorial/tutorial.html
之后，要學習一下 DOM 編程，這個也是前端工程師的核心技能之一，《DOM 編程藝術》這本書是必讀的。
還有網(wǎng)絡編程，這部分主要學習一下 fetch，websocket，jsonp，cors，formData 這些關鍵字。
四、中級
初級的目標是寫出可以運行的頁面，中級的目標是以更快的速度寫出體驗更好的頁面。
如果說數(shù)據(jù)結(jié)構(gòu)與算法會是初級到高級的第一道門檻，能否寫出高內(nèi)聚、低耦合的代碼，則是第二道門檻。
內(nèi)聚什么？解耦什么？
從變化的角度來說，未來可能變化和不太可能變化的代碼需要解耦；對應的原則包括：開放—封閉原則（OCP）、Liskov替換原則（LSP）、依賴倒置原則（DIP）、接口隔離原則（ISP）
從功能的角度來說，不同職能的代碼必須解耦；對應的原則包括：單一責任原則（SRP）。
在渲染引擎 webkit 和 v8 引擎出現(xiàn)之后，瀏覽器的性能得到了很大提升，以至于在多數(shù)場景下前端工程師都不會面臨的什么性能問題。
這其實是從初級到中級的一道隱形的門檻，很多工作多年，由于工作場景的限制，接觸不到什么問題，自己也沒主動學習，導致在性能優(yōu)化維度一片空白。
《高性能javascript》依然是這個領域的經(jīng)典，第五章字符串和數(shù)組相關操作、第九章構(gòu)建部分、第十章工具這部分可以忽略。
前端頁面的極致用戶體驗主要圍繞著：加載體驗、渲染體驗、操作體驗這三方面。千萬不可以只知道優(yōu)化加載體驗，5G時代即將來臨，網(wǎng)絡速度會得到進一步提升，但CPU處理速度，貌似還沒看到突破性進展，未來的用戶體驗問題，會更加聚焦到渲染體驗和操作體驗。
前端項目同樣面臨著軟件生命周期的各個環(huán)節(jié)：
代碼管理必須要學會使用 Git 代碼構(gòu)建要學會使用 webpack
五、高級
從初級到中級，可以根據(jù)教程來快速達到目的，但進入高級后，就只能靠你自己了。這里提供一個前端的知識結(jié)構(gòu)：
https://github.com/JacksonTian/fks
里面的內(nèi)容就需要你自己去花時間花精力好好消化一下了。
參考鏈接：https://www.zhihu.com/question/19834302
沒有什么使我停留——除了目的，縱然岸旁有玫瑰、有綠蔭、有寧靜的港灣，我是不系之舟。
推薦閱讀：