寫在前面
之前就有不少小夥伴提需求說：以後想從事前端開發崗，能不能整理一波前端開發的自學資料+書籍，正好得空，這個事情還是先安排了吧！
正好不久之前，咱們這裏也詳細梳理過「前端開發的學習路線和知識點」，具體可參看這篇文章：《前端開發學習路線+知識點梳理》
之前繪製的詳細學習思維導圖，這裏也再貼一下：
本篇我們就對照着這個知識腦圖，再來梳理一下學習時具體可用的學習材料和書籍，小夥伴們好像更關心這個~
注：本文已收錄於Github開源項目：github.com/hansonwang99/JavaCollection ，裏面有詳細自學編程學習路線、面試題和麪經、編程資料及系列技術文章等，資源持續更新中
不得不說，前端技術棧更新實在太快了，框架的版本發得也是賊勤。這種情況下，除了一些經典的知識可以看書之外，還是得多培養閱讀官方文檔的習慣，這個既是必須，也是賴以生存的技能。
HTML
-
《Head First HTML與CSS》
Head Fisrt系列書你懂的，爲入門而生，文筆風趣幽默爲主，配圖也很豐富，簡單易懂就對了。
-
《HTML5 權威指南》
豆瓣評分8.5的書，書是沒問題，800多頁的書全面性不用說，但是能不能讀得完這是一個問題，就看決心和“手速”了。
- 網絡教程
-
https://www.w3school.com.cn/h.asp -
https://www.runoob.com/html/html-tutorial.html -
https://developer.mozilla.org/
-
CSS
-
《CSS權威指南》
放在現在來看是本“老書”了，但是很多基礎的東西在那擺着也得學。CSS東西就是細節多，這本就當是給CSS的知識點做了一個大梳理吧，所以這本書當工具書看是可以。
-
《CSS揭祕》
這本書展示了47個CSS的技巧，是一本注重實踐的教程，雖然算進階書，但是內容沒那麼難，看完對很多實現思路有啓發。
- 網絡教程
-
https://www.runoob.com/css/css-tutorial.html -
https://www.w3school.com.cn/css/index.asp -
https://developer.mozilla.org/
-
JavaScript語言
-
《你不知道的 JavaScript》
這本書是翻譯過來的，分好幾卷，黃油油的封面你懂的~ 應該說這本書把JavaScript裏很多複雜且深度的概念進行了細緻講解，比如作用域、閉包、原型、異步等等，網上書評啥的還是可以的。
-
《JavaScript DOM編程藝術》
這本書並不厚，小白可用，初學時搞定並實踐了這本書裏的內容，應該入門沒啥問題，這樣後面就可以找一些經典甚至聖經類的書來加強和鞏固了。
-
《JavaScript 高級程序設計》
大名鼎鼎的JS紅寶書，是權威的JavaScript入門書籍，沒錯是入門書籍！不要被名字裏的“高級”兩個字嚇跑~ 內容循序漸進，基礎且全面，不能指望一遍就過，適合精讀也適合回味。
-
《JavaScript權威指南》
上面是“紅寶書”，這本是“犀牛書”，據說這兩本在一起更搭配哦。
這本書是淘寶前端團隊翻譯的，也算是JavaScript開發者的聖經之一，內容太多太全，如果能多通讀幾遍並有所心得，估計成神之路也就不遠了~
- 網絡教程
-
菜鳥教程：
https://www.runoob.com/js/js-tutorial.html -
現代JavaScript教程：
https://zh.javascript.info/ -
MDN文檔：
https://developer.mozilla.org/
-
ES
ES和JS的關係應該能分得清吧，對前端開發來說，ES6+還是有必要學一下的，經典的材料有幾個。
-
《阮一峯ECMAScript 6入門教程》
https://es6.ruanyifeng.com/
-
《深入理解ES6》
豆瓣評分9.4的書，比較系統地介紹了ES的重要特性。
TypeScript
作爲一名合格的前端工程師，TypeScript現在也是必須掌握的知識了，學習它最好的材料還是文檔。
-
《英文文檔》
https://www.typescriptlang.org/docs
-
《中文文檔》
https://www.tslang.cn/docs/home.html
-
《深入理解TypeScript》
看文檔還是最好的，至於書的話，這本《深入理解TypeScript》是原版《TypeScript Deep Dive》的翻譯本，有精力可以康康。
數據結構和算法
-
《學習JavaScript數據結構與算法（第3版）》
數據結構和算法本身其實和編程語言無關，但是如果非得讓找一本基於JavaScript語言描述的數據結構和算法書，那這本是前端的菜就對了。除了常用數據結構、算法、以及算法思想均有涉及之外，書中專門還用一章來寫了ES和TS的東西。
設計模式
-
《JavaScript設計模式》
設計模式這東西本來也是和語言無關的，這是一本基於JavaScript語言描述的設計模式落地實現，所有常見的設計模式都講到了，行文風格也不枯燥，給出的場景和實例也挺全，當然這本重在靈活運用，進階可閱。
網絡協議
對於前端開發來說，網絡協議肯定是必看，尤其應用層協議，其他底層協議能多瞭解一點當然更好。
-
《圖解TCP/IP》
-
《圖解HTTP》
這兩本網絡協議圖解書籍通俗易懂，配圖也很形象，黑皮（灰皮）版網絡協議聖經啃不下來的，可以看看這個。
-
《HTTP權威指南》
這本書並不只有HTTP協議本身的內容，也並不僅僅針對前端開發者。它裏面將很多周邊技術和Web化過程中諸多的技術和原理都進行了闡述，內容系統龐大。跟Web開發有關的程序員在進階擴大知識面時都可以看看。
Node.js
-
《Node.js中文文檔》
http://nodejs.cn/api/
Node.js版本更新這麼快，看文檔是最靠譜的。
-
《Node.js實戰》
如果硬要找一本教材看，這本Node.js的實戰教程可以一用。
-
《深入淺出Node.js》
這本書不是寫給初學者看的，算是Node.js進階書籍，國人作者真的是長臉，對Node.js的一些關鍵原理做了剖析，如果想深入瞭解 Node，這本書值得一看。
應用框架
框架這東西更新迭代實在太快了，要麼還沒來得及出書，要麼就是那種迅速推出的快餐書，基本都是照搬框架的官方文檔，有時候翻譯和理解得還不一定準確，所以在學習前端的形形色色的框架時，官方文檔還是最靠譜和全面的資料，包括但不限於：
-
Vue.js中文官方文檔：
https://vuejs.bootcss.com/guide/ -
React.js官方文檔：
https://reactjs.org/docs/getting-started.html -
React.js 小書：
https://github.com/huzidaha/react-naive-book -
Webpack中文官方文檔：
https://www.webpackjs.com/concepts/ -
Sass 中文文檔：
https://sass.bootcss.com/documentation -
Less 中文文檔：
http://lesscss.cn/usage/ -
Stylus 中文文檔：
https://stylus.bootcss.com/ -
...等等
關注性能
-
《Web性能權威指南》
看這本書之前像TCP/IP協議族的基礎最好具備，雖然書中很多篇幅也在講述這部分內容，但是加入了對應優化實踐的知識和內容，進階閱讀可用。而且這本書也不僅僅是前端開發人員可以看，所有Web應用及站點開發人員都可以閱讀，包括後端、運維、存儲、視頻、性能工程師等等。
後 記
最後小夥伴們如果有什麼要補充，或者可以推薦的不錯資料，歡迎多多補充，一起分享提高。
注：本文已收錄於Github開源項目：github.com/hansonwang99/JavaCollection ，裏面有詳細自學編程學習路線、面試題和麪經、編程資料及系列技術文章等，資源持續更新中