前言
本人從大二上學期到現在學習前端已將近有3年時間了，最近利用畢業論文寫完的一些空餘時間寫一下這篇文章，用於分享一些個人的前端學習經驗，以及一些面試經驗，不一定適合每個人，不喜勿噴，同時歡迎大家提出建議。
學習路線
總體的來說前端無非就是html、css、js只要把這三樣的基礎打好，什麼都不是問題。他們的難易程度也是html < css < js，所以學習路線也是從html->css->js或者html&css->js。而我的學習路線是後者。
總的來說，在學完一個新東西的時候建議最好用新東西手擼個玩意出來。一定要動手實操！
html&css
首先這部分的學習我是看了一本叫Head First HTML&CSS的書，這本電子書可以到網上下載。這本書與平時看到的書有點不一樣，這本書相當是手把手教你如何完成一個靜態網站，雖然書有點老，但是拿來入門還是不錯的。
看完這本書以後你的html&css基本上算是入門了，可以自己擼個個人主頁或者部落格什麼的。看完書之後不動手擼個什麼小玩意出來是不行的，光說不練等於白看。
這個時候如果感覺還需要加深html&css的話推薦精通CSS（第2版）這本書，能力強的同學可以去學學bootstrap，這是大名鼎鼎的前端html&css框架。會用了（其實也就是html標籤上bootstrap事先加定義好的類名，沒太大難度）以後就去看看bootstrap的原始碼。注意，這裡所說的原始碼不是吧boosstrap.css從頭看到尾，那會瘋的。看的原始碼是你用到的那幾個類名的原始碼。可以通過谷歌控制檯去看，選中一個標籤，然後在styles那看人家是怎麼定義這個樣式的。
感覺差不多以後就得實際操作了，可以到這裡的最下面的第一階段任務去練練手。
個人感覺這第一階段任務還是挺適合新手去做的。先儘量不要使用任何框架，自己去手擼出來。最後不管擼沒擼出來都要去看看人家是怎麼完成這項任務的，學習一下人家怎麼解決問題的。前提一定是自己得先去思考。
當然今年(2018年)的百度前端技術學院也是更加給力了，也有從0基礎開始手把手教你如何完成一個頁面。傳送門
git&github
這裡插播一條git的學習指南，有的同學可能想要讓自己的作品能讓大家看到但是又沒有自己的伺服器的話怎麼辦？
那麼這裡就得藉助github和github pages了。首先你得明白怎麼用git&github，這裡有份教程，個人覺得還不錯。
知道git&github怎麼用以後，就利用github pages讓別人看到我們的作品。
首先，利用git在本地建立gh-pages分支（注意：一定要是gh-pages分支），然後將各種資源用git推送到github對應倉庫的gh-pages分支上（至於怎麼操作不在這裡詳細說明，教程裡已經說得很清楚了）
推送成功以後瀏覽器開啟github使用者名稱.github.io/倉庫名/對應的html。舉個例子，我在github上的使用者名稱是JayZangwillJayZangwill，然後我的倉庫名是blog，然後這個倉庫下的gh-pages分支有個index.html檔案，這個時候訪問的地址就是jayzangwill.github.io/blog/index.…。因為github pages預設以index.html檔案作為入口，所以以上鍊接可簡寫為jayzangwill.github.io/blog。
git&github是現代公司團隊合作的重要工具，不管你處於前端的哪個階段，git&github都是必學的，是逃不掉的。
js
如果百度前端技術學院的16年第一部分任務能夠做差不多出來就可以學js了，如果感覺還是沒有什麼收穫的話就得去面壁過了。
如果說html&css是餐前甜點的話js就是正餐了，js比html&css的難度高出不止一個檔次，可能有些小夥伴看到js的時候就打算放棄了。這個時候建議不要慌，慢慢來節奏稍微慢一點。當時我剛看js的時候看的是看的是Head First JavaScript，結果一點都看不懂，看到一半就放棄了。於是百度搜了前端js入門書籍，結果搜到了JavaScript DOM程式設計藝術。這也是我比較推薦的一本入門書籍，如果能堅持看完，你的js就算入門了。
當然js的學習路徑有很多，以上的路徑不一定適合所有人，也可以去網上搜些視訊，比如去慕課網上去看看。
當感覺自己js學得差不多的時候可以找些練手的網站來加深對知識點的理解。個人推薦的網站有2016百度前端技術學院第二部分js基礎部分，Free Code Camp。當遇到不認識的api或知識點時可以到MDN上去查。
感覺自己js基本功差不多了以後，下一步就開始學習es6或者jQuery了。由於前端三大框架的出現，導致jQuery的地位受到動搖，如果沒有萬惡的ie的話，jQuery很快就要退出歷史舞臺了。不過就目前情況來看，jQuery在前端還是佔有很大份額的，所以學習jQuery還是很有必要的。學習jQuery的話我只推薦一本Head First jQuery，看完這本書即可。對於es6來說這是js在15年出的新規範、新語法，內容較多所以可以單獨抽出一塊來學習，這裡我推薦阮一峰前輩的es6入門。
當es6看完以後就可以去學習前端的三大框架了，分別是Angular、Vue、React。當然也不是三個都要學，只需學好其中一個或者多個即可。就目前國內的情況來看Vue和React用的最多，而Vue相對React來說相對好學一點（ps:最近博主在學習React），所以我推薦的話Vue是比較好的一個切入點。另外附上Vue的官方教程，個人認為官方教程已經寫得很全面了，所以學Vue的話官方教程即可。React的話最近我也是在學習階段，我這裡就直接粘個官方教程吧。注意：學習它們之前一定要把es6看了，因為教程中用了一些es6的語法，為了防止文件看不懂，所以建議先把es6過了。
js是我在大學中花的時間比較多的地方，也是前端最重要的部分，想要學好它，光是按照我上面說的是不夠的，更多的是需要你不斷在實踐中總結，發現問題和解決問題。有必要時可以去看別人是怎麼寫js程式碼的，或者看看框架的原始碼，這樣學到的才更多。
gulp&webpack
當你在前端的道路上走了一段距離的時候會發現想要一些東西來提高自己的開發效率，gulp&webpack就能夠滿足你。這些自動化工具能夠自動編譯程式碼、壓縮靜態資源、自動重新整理瀏覽器等。
首先是gulp，gulp想要上手很容易，百度上搜一搜就有很多入門教程，這裡推薦一篇gulp入門教程（我不會說我是從百度隨便搜來的），雖然是我從百度上隨便扒下來的但是足夠入門了，畢竟gulp上手還是很容易的。這裡還推薦一下我的gulp配置，能夠滿足大部分人的需求了。把gulpfile.js和package.json複製到本地，然後按照說明操作即可。
另外附上gulp的外掛搜尋地址，搜出來的外掛都會告訴你如何去配置，一般情況下只需把介紹上的配置複製上來即可。如圖是gulp-uglify的介紹。
至於webpack，它上手可能會比較難，因為配置會比較繁瑣（webpack4據說把一些東西內建了，可以不用配置檔案就可以用）覺得比較難的同學可以先把webpack先放一放，前期的話gulp基本就可以滿足需求。學習webpack的話感覺還是看官方文件比較好。同時，大家可以看看我的vue-cli多頁面模板。
不過最近新出了個叫parcel的東西，號稱極速零配置Web應用打包工具，大家可以瞭解一下。
這裡有人可能會問為什麼不學grunt？emm...這東西已經是過時的產物，有興趣的同學可以去了解了解，不論如何gulp&webpack最終還是必須要掌握的。
sass&less
sass和less都是css的預編譯語言，它們不必兩個都學，學了其中一個另外一個自然就會。我個人的話是學了sass，是在慕課網上學的，學習的話只需學習前兩個即可。
至於less的話，看官方文件吧，less或sass學完以後可以嘗試把以前寫過的css用sass或者less重寫一遍用於加深對知識的理解吧。另外我的那個gulp配置預設是支援sass的編譯的，如果用了我的那個gulp配置的同學且是學sass的就不用自己配置了，如果學less的同學得需要自己配置一下。
nodejs
如果還有餘力的同學可以去學學node，目前有些公司對會node的前端是加分項，這裡推薦一本書了不起的nodejs
一些學習網站推薦
至此，前端需要掌握的技能和學習路線已經說完了。這裡推薦一些前端的進階網站和一些論壇，讓大家在前端路上走得更遠。
- 掘金 在這裡會有很多高質量的文章，我也經常在這逛的。
- 知乎 這裡是大佬的世界
- stack overflow 國外的一個超高質量技術論壇，你可以在這裡提問，與國外大佬交流
- SegmentFault 國內版的stack overflow
- w3cplus 大漠老師創辦的技術論壇
- Free Code Camp 線上學習網站
- 百度前端技術學院 百度從15年到現在每年都會創辦的技術學院
- 前端月報 這裡會有人每個月上傳上一個月的一些高質量文章
- 更多
一些書籍
- JavaScript高階程式設計（第3版） 紅寶書，不解釋，據說今年7月要出第四版，很期待啊。
- JavaScript權威指南 傳說中的犀牛書
- 你不知道的JavaScript 有上、中、下三卷
- JavaScript語言精粹 傳說中的蝴蝶書
- JavaScript設計模式
- css揭祕 介紹了一些實用的css3新特性
- CSS權威指南（第三版）
- 更多
面試知識點
接下來這些面試知識點，主要是針對實習生和應屆生的，偏基礎。有多年工作經驗或者基礎好的同學可以Ctrl+W了。
一般面試的時候面試官都是針對你簡歷上所寫的來問，所以你會什麼就寫什麼，不會的就別寫上去了，以免面試的時候問到不會就尷尬了。
計算機基礎
這裡把計算機基礎放在第一位是因為有很多人忽略計算機基礎，前端是屬於計算機行業的，不論什麼方向，只要這個方向和計算機相關，就必須把計算機基礎打好。同時，計算機基礎也是面試官在面試實習生和應屆生比較注重的一方面。
資料結構和演算法
資料結構在我面試印象中是考察得最多的計算機基礎。
首先是各種排序演算法，冒泡啊，選擇啊，快速啊一些常用排序演算法，我不建議大家去死記硬背這些演算法，而是去記它的思想，這樣程式碼自然就會出來。完之後有些面試官會問它們的時間複雜度，怎麼得出的這個個時間複雜度。
然後到樹的遍歷，廣度優先，前、中、後序遍歷。
還有就是斐波那契數列，演算法的時間複雜度為O(n)和O(n^2)的兩種實現。
計算機網路
tcp的三次握手和四次揮手過程，以及為什麼要三次握手，四次揮手。
get和post的區別，建議看一下這篇文章。
http與https區別。
tcp與udp區別。
7層網路架構。
常見http狀態碼，301與302區別。304與200(form cache區別)，建議聯絡強制快取與協商快取來解釋。
作業系統
什麼是程式，什麼是執行緒以及他們的區別。
什麼是死鎖，怎麼產生的，怎麼解決。
前端面試知識點
html部分
這部分問的會比較少，因為實在沒什麼可以問的我所總結的知識點如下：
- 什麼是html語義化，為什麼要語義化，有什麼好處，怎麼做。
- html5新加的標籤。
- 有哪些行內元素，有哪些塊元素。
css部分
inline與block與inline-block區別（即行內元素與塊元素與行內塊元素的區別），以及inline與inline-block元素間會有莫名的間距這個是怎麼產生的，怎麼解決。- position取值，以及他們之間的區別，而且是相對於誰定位的。父輩元素設定transform導致fixed定位失效情況。
- 浮動造成的問題，以及如何清除浮動，清除浮動的原理，由此引出BFC的概念，什麼是BFC，有什麼特性。
- 盒模型的組成，有哪些盒模型，以及如何互相轉換。對於盒模型和定位的概念可以看我的這篇文章。
animation和transition區別。padding和margin的單位設定為%時，這個%是相對於誰。- 水平垂直居中的多種實現方式。
- css選擇器的權重
js部分
之前也說了，js是前端最重要的部分，同時也是面試問的最多的，這裡推薦我之前寫的三篇文章：幾個讓我印象深刻的面試題(一)、幾個讓我印象深刻的面試題(二)、四月北京面試之旅，同時js部分的知識點總結如下：
- js的資料型別（一共7種）
- this指向（注意嚴格模式下的this指向和箭頭函式的this指向）
- new的過程
- 作用域與作用域鏈
- 什麼是閉包，閉包的作用及缺點（建議與作用域聯絡起來講）
- 原型與原型鏈，以及如何實現繼承（多種實現方式，建議翻看紅寶書繼承部分或者看我部落格關於繼承的講解，把es6的繼承加上效果更佳）。
- js的事件迴圈即Event Loop（macro task queue 和 micro task queue瞭解一下，巨集任務包括哪些，微任務包括哪些，以及它們的執行順序）
- 前端跨域，什麼情況會跨域，怎麼解決，以及它們的優缺點，手寫一下jsonp。
- XSS攻擊與CSRF攻擊怎麼攻擊以及怎麼防禦。這裡推薦一下這篇文章。
- 深拷貝與淺拷貝的區別，以及怎麼實現（有的面試官會在這裡問遞迴有什麼缺點）。
- ajax的過程，以及狀態0~4分別發生了什麼（有的面試官會讓你手寫ajax）。
- es6新加的新特性。
- Promise的三個狀態，以及介紹一下async函式。
- js事件的冒泡、捕獲，及它們的區別，事件的三個過程。
- 瀏覽器的快取機制（強制快取cache-control、協商快取if-modified，if-modified-since，e-tag瞭解一下）。
- cooike與session與localStorage、sessionStorage區別，以及localStorage和sessionStorage區別。
vue部分（因為我簡歷上寫了會vue）
- 雙向資料繫結原理，這裡推薦一下這篇文章
- vue的生命週期，這裡推薦一下大漠老師的這篇文章還有掘金上的這篇文章
- vue元件的資料傳遞（包括父->子、子->父，兄弟間，非兄弟）
- 前端路由的實現，這裡推薦這篇文章
結語
本文寫了前端的學習方向，還有前端的面試的重點，僅針對實習和應屆的同學。知識點有漏的話會在後期補上。大家有什麼想法可以在底下留言。