阿里云云棲社區，匯集阿里技術精粹，點此關注（文字鏈接地址：/org/a-li-yun-yun-qi-she-qu-48/）
推薦閱讀下《前端知識體系目錄》，文章從HTML/HTML5、CSS、JS、性能提升、HTTP/TCP協議知識學習步驟整理成目錄，以及相關學習書籍推薦應有盡有，以下是正文： 前端知識體系目錄-博客-云棲社區-阿里云
1、HTML/HTML5基礎：
1.0、語義化H5標簽1.1、H5引進了一些新的標簽，特別注意、、、aside、nav等，注意HTML的標題結構1.2、理解瀏覽器解析HTML的過程，理解DOM的樹形結構，及相應API1.3、理解HTML標簽在各個瀏覽器上的默認樣式（代理樣式），理解CSS中的重置樣式表的概念1.4、理解、SVG、video等功能性標簽1.5、理解form、標簽，理解文件提交過程推薦書籍：A、《HTML5秘籍》
2、高健壯性CSS
2.1、學習基礎知識，包括大部分常用屬性、選擇器的用法，要對大多數標簽有個基礎概念,在日常使用的基礎上，嘗試學習瀏覽器兼容性問題，要知道兼容性的主要問題及解決方法2.2、深入理解盒子模型，區分塊級元素、行內元素，有幾個比較重要的屬性：、float、，一定要弄清楚區分盒子、行內盒子的概念另外可以考慮學一些預編譯語言：sass、lessui設計師需要看的書籍，都很簡單2.3、學習常用框架，可以使用構建項目2.4、學習框架的代碼組織方式包括：12格柵系統、組件化、組件的風格化等2.5、學習CSS 3的新功能，特別是動畫效果、選擇器2.6、認真學習一些CSS對象化思想，學習編寫簡潔性、高復用性、高健壯性的CSS2.7、有空的話，可以看看所謂的扁平化設計，還有簡潔性2.8、理解CSSOM、、、CSS性能、CSS阻塞概念學習方法：1、多看別人的代碼，一些設計的不錯的網站就是很好的學習素材，比如拉勾網2、一定要學會使用grunt、gulp壓縮CSS3、 + + float 可以組合出很復雜的效果ui設計師需要看的書籍，多想想盒子模型4、嘗試在不用float，且不為的情況下實現等高、等寬等布局推薦書籍：1、《圖靈程序設計叢書:HTML5與CSS3設計模式》2、《Web開發技術叢書:深入理解》3、《高流量網站CSS開發技術》4、《CSS設計徹底研究》 這個一定要5、《Web開發技術叢書:深入理解》6、可以找一些專門講SASS的書，但是我沒找到7、《CSS權威指南(第3版)》
3、深入學習JS
3。1、重新學習JS語法，注意：表達式（特別是函數訪問表達式）、語句、類型（包括類型判斷)注意，這個時候主要傾向于“原生”JS哦，不要使用框架3。2、深入理解JS的“一級函數”、對象、類的概念,學會使用函數來構造類、閉包，學會用面向對象的方式組織代碼3。3、深入理解JS的作用域、作用域鏈、this對象（在各種調用形式中，this的指向）理解函數的各種調用方法（call、apply、bind等）3。4、理解對象、數組的概念理解對象的“[]”調用，理解對象是一種“特殊數組”理解for語句的用法深入理解JS中原始值、包裝對象的概念（重要）3。5、學習一些常用框架的使用方法，包括：、、EXTJS，加分點有：、、ejs、jade通過比較多個框架的使用方法，想清楚“JS語言極其靈活”這一事實總結常見用法，提高學習速度學習模塊化開發（使用。js、sea。js等）3。6、適當看一些著名框架的源碼，比如（不建議看，太復雜了）重要的是學習框架中代碼的組織形式，即設計模式3。7、了解JS解釋、運行過程，理解JS的單線程概念深入理解JS事件、異步、阻塞概念3。
8、理解瀏覽器組成部件，理解V8的概念學習V8的解釋-運行過程在V8基礎上，學會如何提高JS性能學會使用的進行內存泄露分析學習方法：1、提高對自己的要求，要有代碼潔癖2、適當的時候看看優秀框架的源碼，特別是框架的架構模式、設計模式3、多學學設計模式4、學習原生JS、DOM、BOM、Ajax推薦書籍：1、《O’精品圖書系列:?權威指南(?第6版)》 必看2、《設計模式》3、《技術內幕》4、《框架高級編?程:應用 YUI Ext JS Dojo 》5、《用開發下一代Web應用》6、跨終端6。1、理解混合APP的概念6。2、理解網頁在各類終端上的表現6。3、理解網頁與原生app的區同，重在約束6。4、理解單頁網站，特別要規避頁面的內存泄露問題6。5、入門，對其有個基礎概念，知道它能做什么，缺點是什么推薦書籍：1、《單頁Web應用:從前端到后端 》2、《Web 2。0界面設計模式》3、《響應式Web設計:HTML5和?CSS3實戰》5、工具學會使用grunt進行JS、CSS、HTML 壓縮，特別是模塊化js開發時候的壓縮會用PS進行切圖、保存icon入手、學會使用調試面板，特別是：、、、
進階：
4、性能
1.1、理解資源加載的過程包括：TCP握手連接、HTTP請求報文、HTTP回復報文1.2、理解資源加載的性能約束，包括：TCP連接限制、TCP慢啟動1.3、理解CSS文件、JS文件壓縮，理解不同文件放在頁面不同位置后對性能的影響1.4、理解CDN加速1.5、學會使用HTTP頭控制資源緩存，理解cache-、、max-age、ETag對緩存的影響1.6、深入理解瀏覽器的過程推薦書籍：1、《Web性能權威指南》2、雅虎網站頁面性能優化的34條黃金守則