【吐血總結】你們要的前端攻略，她終于來了！
0. 前言
大家好，我是被迫營業(yè)的加薪。
作為咕咕咕團隊的核心成員，秉承著咕咕咕精神，成功把本文咕到了現(xiàn)在。
在后臺收到了很多朋友對前端路線的咨詢，今天這篇文章將通通解決這些問題。
1. 食用說明
適用范圍：
零基礎入門前端 準備春招的前端實習面試
使用方法：
每部分會介紹入門方法，同時提供一份高頻考點。【 Github倉庫見文末】拿好筆和本子，整理出適合自己的路線
2. 前端基礎
萬丈高樓平地起，前端基礎的三劍客：HTML、CSS、JavaScript，大家要好好學哦~
2.1 HTML
HTML學起來其實非常容易，對于初學者，前期可以從視頻入手：
虛假的學習網(wǎng)站—慕課網(wǎng)[1]/網(wǎng)易云課堂[2] 真實的學習網(wǎng)站—嗶哩嗶哩[3]
概念內容可以在MDN[4]上查閱，非常方便。
2.2 CSS
CSS的學習方法和HTML類似，但是前期看完視頻后，建議把常見的布局進行梳理；
高頻考點：
HTML/CSS 高頻考點梳理[5]
2.3 JavaScript
如果有C語言基礎，學起JS來會比較容易；
當然，沒有別的語言基礎，直接學也沒有問題，不存在必須先學C再學JS的問題；
最開始應當直接利用Chrome的console控制臺學習基本語法知識；
然后學習DOM操作，比如實現(xiàn)點擊按鈕出現(xiàn)彈框，獲取輸入框內容進行計算等等；
接下來可以學習AJAX，學會實現(xiàn)GET請求、了解前后端數(shù)據(jù)交互；
這個時候基本對JS有了大概的認識，也能簡單使用，那么接下來就是系統(tǒng)的、深入的學習，可以開始了解ES5與ES6的區(qū)別，了解一些常用函數(shù)的底層實現(xiàn)，比如new、bind、call/apply等；
高頻考點：
JavaScript 高頻考點梳理[6]
JavaScript 手寫代碼合集[7]
2.4 小結
對于初學者來說，初學期間要注重實操鞏固，比如學習一段時間的HTML和CSS后，就可以開始模仿實現(xiàn)一些網(wǎng)頁，比如知乎首頁、簡書首頁等；在學習JS的時候，也可以進行相應的練習，利用所學的知識，給前面實現(xiàn)的網(wǎng)頁增加交互效果等等。
看了，并不是你的；
做了，才是你的。
3. 框架
三大框架：Vue、React、Angular
對于面試者來說，一般會對Vue或者React框架有較深入的理解，對其他框架有簡單的了解；
因此，建議Vue和React二選一來深入學習，有余力的同學可以把兩個框架都掌握。
Vue上手簡單，文檔清晰，對初學者非常友好；React上手門檻相對高一些；Vue的開發(fā)體驗與小程序相似，學會Vue之后再上手小程序非常絲滑；
總結：框架高頻考點[8]
4. 進階
當掌握了一個框架， 嘗試做了一些項目后，就可以開始針對面試進行進一步的學習了。
比如：
瀏覽器相關（緩存，重繪、回流等） 前端性能優(yōu)化（高頻） TypeScript前端工程化（ Webpack等）
總結：
瀏覽器相關高頻考點[9]
其他高頻考點[10]
5. 項目
對于正在準備面試的同學來說，項目大概是最令人頭疼的了，總覺得做的項目沒亮點，都是搬磚，咋整呢？
這里大致有幾個方向：
網(wǎng)站模仿：模仿寫個知乎、網(wǎng)易云音樂、 Boss直聘等等；（推薦零基礎入門練手時寫寫）框架模仿：模仿寫個框架，比如寫個 MVVM框架；（相對來說難一些）日常工具：挖掘身邊的需求，去做一些實用的工具，其中可能就會有一些技術點； 實驗室項目：在完成老師的要求的基礎上自己加上一些優(yōu)化（實驗室項目一般靈活性較高）； 實習項目：在完成需求的情況下，學習之前的一些技術亮點，不一定是自己寫的，只要你搞懂了，那就是你的。
這里推薦一些我個人搜集到的項目，主要是提供個思路，不一定就要做這些：
文件收集網(wǎng)站[11]
場景：比如班上要收作業(yè)，或者其他一些文件，大家都通過
電商網(wǎng)站（模仿淘寶之類的）
可以運用很多基本的技巧：懶加載，分頁（自己實現(xiàn)），放大鏡效果（自己實現(xiàn)）；
其實很多看起來調個組件分分鐘就能解決的問題，你只要再想一步，我能不能嘗試著寫一個來代替呢？那么你這個項目的點會豐富起來。
補充一點，這里可以使用Chrome控制臺的lighthouse[12]進行性能測試，用以優(yōu)化前端性能。
簡歷編輯網(wǎng)站
可以參考mdnice-resume[13]的效果，用拖動組件式的布局簡歷，支持導出為pdf；
最終用自己寫的網(wǎng)站生成自己的簡歷，也是很有意思的事情。
6. Q & A
6.1 非科班自學前端與科班相比的劣勢有哪些？如何彌補？
從目前的學校教學體系和前端的知識體系來說，劣勢主要在于數(shù)據(jù)結構，計算機網(wǎng)絡；其他基礎（如操作系統(tǒng)、數(shù)據(jù)庫）基本不太需要深入了解，面試就算問到也是非常基礎的問題，比如：線程與進程的區(qū)別、死鎖等。
數(shù)據(jù)結構：把《大話數(shù)據(jù)結構》[14]過一遍，問題就不大了。 計算機網(wǎng)絡：優(yōu)先把高頻題搞懂，有余力過一遍書，比如謝希仁的《計算機網(wǎng)絡》[15]。
6.2 前端需要學習算法嗎？工作中用得到嗎？
需要！不論是為了面試，還是為了以后的工作，把算法好好學一學都是很有必要的。
在很多面試中，往往能不能流暢地把代碼題寫出來，會決定你這次面試能否通過；
掌握常見的算法，也能使你在工作中有意識地降低代碼的時間復雜度，提高代碼質量；
6.3 前端的天花板真的比后端低嗎？
先不說是不是天花板比后端低，你就確定你未來夠得到前端的天花板了嗎？
整天想著考清華還是考北大，有什么意思呢？
既然選擇了前端，那么就踏踏實實地學好做好。
6.4 面試需要好的項目，那什么樣的項目才是好項目呢？
首先，要確定自己當前的定位，不同階段有不同的要求：
初學者：先好好做一兩個項目，別管好不好，做出來再說，啥項目都沒做過，就算給你個好項目，你也不知道好在哪； 熟練的"切圖仔"：這個階段已經(jīng)俱備獨立開發(fā)前端項目的能力了，但是總覺得做的項目沒有亮點，這個階段需要做的項目就是有一定技術挑戰(zhàn)的，哪怕自己目前做的項目沒啥挑戰(zhàn)性，也可以自己給自己提需求，比如上傳文件，能不能做成切片上傳呢？總的來說，自己有意識地增加技術點，增加項目含金量。 項目大佬：動手能力 MAX，項目也有難點有挑戰(zhàn)，這個時候需要反過來補充理論知識，實現(xiàn)一些更底層的東西，比如嘗試復現(xiàn)框架，開源組件庫等等，增加自己的技術影響力。
7. 資源
在線瀏覽：http://szufrank.top/#/README Github地址：https://github.com/frankcbliu/Interview_Notes（Github 打不開的可以直接訪問上面的鏈接）前端知識點總結：后臺回復【前端】獲取 另外，給深大的師弟妹們推薦一個小程序【聽聽前人說】，來自收割了阿里字節(jié) offer的前端大佬——阿布，可以通過這個小程序聯(lián)系到一批非常優(yōu)秀的師兄師姐；
參考資料
慕課網(wǎng): https://www.imooc.com/
[2]網(wǎng)易云課堂: https://study.163.com/
[3]嗶哩嗶哩: https://www.bilibili.com/
[4]MDN: https://developer.mozilla.org/zh-CN/docs/Learn
[5]編程充電寶: http://szufrank.top/#/./interview/html_css
[6]編程充電寶: http://szufrank.top/#/./interview/js
[7]編程充電寶: http://szufrank.top/#/./interview/frontend_code
[8]編程充電寶: http://szufrank.top/#/./interview/frontend_framework
[9]編程充電寶: http://szufrank.top/#/./interview/browser
[10]編程充電寶: http://szufrank.top/#/./interview/frontend_other
[11]豬豬也不容易: https://www.nowcoder.com/discuss/555503?type=post&order=time&pos=&page=1&channel=1009&source_id=search_post
[12]Chrome團隊: https://github.com/GoogleChrome/lighthouse
[13]畫手大鵬: https://resume.mdnice.com/
[14]程杰: https://book.douban.com/subject/6424904/
[15]謝希仁: https://book.douban.com/subject/26960678/
