前端學習路徑

基礎：
        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隱碼攻擊
額，看下來發現自己要學習的東西太多啦...埋頭好好學吧！
原文: 牛大大  notes.php?mod=view&uid=15798&id=dd139b59b43896732e3a5774ac8c8afb