少俠，請收下這份前端開發自學資料（書籍+教程）~

---

寫在前面

以前就有很多小夥伴提需求說：之後想從事前端開發崗，能不能整理一波前端開發的自學資料+書籍，正好得空，這個事情仍是先安排了吧！

正好不久以前，我們這裏也詳細梳理過「前端開發的學習路線和知識點」

以前繪製的詳細學習思惟導圖，這裏也再貼一下：

本篇咱們就對照着這個知識腦圖，再來梳理一下學習時具體可用的學習材料和書籍，小夥伴們好像更關心這個~

注：本文已收錄於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 ，裏面有詳細自學編程學習路線、面試題和麪經、編程資料及系列技術文章等，資源持續更新中