2017年，你必須知道的最新web前端學習路線

基礎：

1、語義化H5標籤

1.1、H5引進了一些新的標籤，特別注意article、header、footer、aside、nav等，注意HTML的標題結構

1.2、理解瀏覽器解析HTML的過程，理解DOM的樹形結構，及相應API

1.3、理解HTML標籤在各個瀏覽器上的默認樣式（代理樣式），理解CSS中的重置樣式表的概念

1.4、理解Canvas、SVG、video等功能性標籤

1.5、理解form、iframe標籤，理解文件提交過程

推薦書籍：

1、《HTML5秘籍》

2、高健壯性CSS

2.1、學習基礎知識，包括大部分常用屬性、選擇器的用法，要對大多數標籤有個基礎概念

在日常使用的基礎上，嘗試學習瀏覽器兼容性問題，要知道兼容性的主要問題及解決方法

2.2、深入理解盒子模型，區分塊級元素、行內元素，有幾個比較重要的屬性：

display、float、position，一定要弄清楚

區分盒子、行內盒子的概念

另外可以考慮學一些預編譯語言：sass、less，都很簡單

2.3、學習常用框架，可以使用bootstrap構建項目

2.4、學習框架的代碼組織方式

包括：12格柵系統、組件化、組件的風格化等

2.5、學習CSS 3的新功能，特別是動畫效果、選擇器

2.6、認真學習一些CSS對象化思想，學習編寫簡潔性、高復用性、高健壯性的CSS

2.7、有空的話，可以看看所謂的扁平化設計，還有簡潔性

2.8、理解CSSOM、render、reflow、CSS性能、CSS阻塞概念

學習方法：

1、多看別人的代碼，一些設計的不錯的網站就是很好的學習素材，比如拉勾網

2、一定要學會使用grunt、gulp壓縮CSS

3、display + position + float 可以組合出很複雜的效果，多想想盒子模型

4、嘗試在不用float，且position不為absolute的情況下實現等高、等寬等布局

推薦書籍：

1、《圖靈程序設計叢書:HTML5與CSS3設計模式》

2、《Web開發技術叢書:深入理解Bootstrap》

3、《高流量網站CSS開發技術》

4、《CSS設計徹底研究》 這個一定要

5、《Web開發技術叢書:深入理解Bootstrap》

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、學習一些常用框架的使用方法，包括：JQUERY、underscore、EXTJS，加分點有：backbone、angularjs、ejs、jade

通過比較多個框架的使用方法，想清楚「JS語言極其靈活」這一事實

總結常見用法，提高學習速度

學習模塊化開發（使用require.js、sea.js等）

3.6、適當看一些著名框架的源碼，比如jQuery（不建議看angularjs，太複雜了）

重要的是學習框架中代碼的組織形式，即設計模式

3.7、了解JS解釋、運行過程，理解JS的單線程概念

深入理解JS事件、非同步、阻塞概念

3.8、理解瀏覽器組成部件，理解V8的概念

學習V8的解釋-運行過程

在V8基礎上，學會如何提高JS性能

學會使用chrome的profile進行內存泄露分析

學習方法：

1、提高對自己的要求，要有代碼潔癖

2、適當的時候看看優秀框架的源碼，特別是框架的架構模式、設計模式

3、多學學設計模式

4、學習原生JS、DOM、BOM、Ajax

推薦書籍：

1、《O'Reilly精品圖書系列:JavaScript權威指南(第6版)》 必看

2、《JavaScript設計模式》

3、《WebKit技術內幕》

4、《JavaScript框架高級編程:應用Prototype YUI Ext JS Dojo MooTools》

5、《用AngularJS開發下一代Web應用》

6、跨終端

6.1、理解混合APP的概念

6.2、理解網頁在各類終端上的表現

6.3、理解網頁與原生app的區同，重在約束

6.4、理解單頁網站，特別要規避頁面的內存泄露問題

6.5、入門nodejs，對其有個基礎概念，知道它能做什麼，缺點是什麼

推薦書籍：

1、《單頁Web應用:JavaScript從前端到後端 》

2、《Web 2.0界面設計模式》

3、《響應式Web設計:HTML5和CSS3實戰》

5、工具

學會使用grunt進行JS、CSS、HTML 壓縮，特別是模塊化js開發時候的壓縮

會用PS進行切圖、保存icon

入手sublime、webstorm

學會使用chrome調試面板，特別是：console、network、profile、element

進階：

1、性能

1.1、理解資源載入的過程

包括：TCP握手連接、HTTP請求報文、HTTP回復報文

1.2、理解資源載入的性能約束，包括：TCP連接限制、TCP慢啟動

1.3、理解CSS文件、JS文件壓縮，理解不同文件放在頁面不同位置後對性能的影響

1.4、理解CDN加速

1.5、學會使用HTTP頭控制資源緩存，理解cache-control、expire、max-age、ETag對緩存的影響

1.6、深入理解瀏覽器的render過程

推薦書籍：

1、《Web性能權威指南》

2、雅虎網站頁面性能優化的34條黃金守則

2、http及TCP協議族

2.1、學習http協議，理解http請求-響應模式

2.2、理解http是應用層協議，它是構建在TCP/IP協議上的

2.3、理解http報文（請求-響應報文）

2.4、理解http代理、緩存、網關等概念，指定如何控制緩存

2.5、理解http協議內容，包括：狀態碼、http頭、長連接（http1.1）

2.6、學習http伺服器的工作模型，對靜態文件、CGI、DHTML的處理流程有個大致概念

推薦書籍：

1、《HTTP權威指南》

2、《TCP/IP詳解》

3、《圖解TCP/IP(第5版)》

3、安全性

XSS、SQL注入

額，看下來發現自己要學習的東西太多啦...埋頭好好學吧！

想要系統學習web前端和免費學習資料的 可以加裙六二三九六六八零六 學完有工作推薦

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！