前端學起來特別吃力，新人入前端怎麼學？

最近知乎收到一些問題，問前端學起來吃力，連續更新幾回回答的比較全了。如今整理下分享給51![]的小夥伴們。

前端工做兩年多。大部分前端原理、框架都能徹底運用。工做中幾乎遇不到解決不了的問題（除了那些噁心沒法實現的需求）如今常常被安排去面試新人（被安排去面試，主要是工做能力比較突出的緣由，公司還有不少3年以上的員工）。

下面說說個人學習方法或許對你有用！

1、打好基礎不用說
HTML、CSS、JavaScript 三大件，徹底掌握。不懂得就直接查 MDN。
HTML重點掌握語義化。區分塊級和內聯標籤。其餘查文檔就行了。還有就是定義 head 裏面一些meta 瞭解下。
CSS。重點看盒子模型，定位，層級，過渡，動畫和 transform。知道原理和規則。大部分工做都是照着設計稿化。掌握上面幾個 99% 還原也不難。接下來重點學習幾種常見的佈局。完了以後去搞flex。最後搞下sass、less。基本就差很少了。
JavaScript。重點來了，紅寶書看一遍掌握基礎，進階去看《你不知道的 JavaScript》。就這兩套足夠了，別搞那麼多。
每一個知識點搞懂。ES6 基本沒啥問題。下面幾個問題優先搞懂，優先級以下：
this 用法，相關原理
原型/原型鏈
閉包
面向對象相關
同步異步/回調/promise/async、await
模塊化 CommonJS, AMD
先搞這懂這些比較難的概念，對你JS理解更加深刻。接下來在開始看框架方面：
2、框架方面
前期要會用，後期要懂原理。
新人先搞 Vue。Vue 算是上手容易的框架。照着官方文檔來問題不大。原理方面要提升本身認識。學習怎麼看源碼。github常去逛逛。
學習框架以前，我其實特別建議，新人先去了解 Babel 和 webpack 不只僅是使用。一些原理方面的東西工做中也會用到。babel 裏面會有教你如何編譯代碼。webpack 教你如和打包文件。本身手寫編譯器和打包工具也不是特別難。反正對以後看vue、react源碼幫助挺大。
搞完 Vue 全家桶，去了解下 React，React hooks 學習下新的理念。再回過頭來看Vue。你會發現他們是如此的類似去又不一樣。 多去實踐總結，對總體框架理解會愈來愈深入。
3、如何看源碼
新人剛開始看源碼，會陷入兩個困境中。一是無從下手。二是看了以後感受沒啥收穫。
這個也很正常。通常咱們熟知的框架都有個幾千甚至上萬個PR。太大細節會干擾你。掌握整個節奏和流程。學習原理也比較吃力。就連找個入口都像大海撈針同樣。
建議從下面幾個方面入手：
挑簡單的上手。別一開始就搞 vue、react、webpack。太難，會直接勸退新人。
不要爲了面試而去讀。反而效果很差，面試稍微問深刻一點就答不出來了。平時有興趣多琢磨琢磨。按照難易程度，函數庫 < 組件庫 < 框架 < 工程化 分別典型表明 lodash < vant < vue < webpack
手擼簡易模型。像vue, webpack, babel 都有簡易項目給你擼。有的創始人（尤哥）還直播手擼。國外的更多，youtube 一搜一大堆。就算不看源碼，照着寫出了簡易 demo 對原理和理解提高都是很大的。
調試開源項目。先把項目拉下來。在vscode裏面跑下，核心函數多打幾個斷點。看看裏面變量是怎麼diff的。 對理解更深入了。
看了源碼是別人的，學到了是本身的。學習時候邊記筆記，邊思考原理，總結經驗。下面來談談前端工程化怎麼弄。
4、前端工程化
如今最流行的打包工具 webpack 用起來。固然直接用 vue-cli二、vue-cli三、create-react 都是能夠的。可是 webpack 相關仍是得掌握。
首先重點搞下babel、webpack。
學習下編譯和打包的原理。
本身配置下 webpack。嘗試本身去寫下下 webpack 的 loader 和 plugin。
學習這些以前要懂一點 node.js， node.js 不須要所有學習。通常就平常用到讀寫文件fs接口，path 路徑接口。這些 api 都不難寫幾個 demo 就懂了。基本上webpack 裏面配置文件也沒用到多少 node 的東西。最後本身學會配置 webpack 的配置文件。
若是想深想去優化打包體積和速度，就須要去了解不少webpack插件。webpack 裏面最核心的就是插件了。
固然前端工程化不只僅是這些，CI/CD可持續集成, Umi 瞭解下。sh各類腳本自動化命令、代碼生成技術瞭解下。