前端學習內容總結

基礎:

  一、語義化H5標籤

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

  1.二、理解瀏覽器解析HTML的過程,理解DOM的樹形結構,及相應API

  1.三、理解HTML標籤在各個瀏覽器上的默認樣式(代理樣式),理解CSS中的重置樣式表的概念

  1.四、理解Canvas、SVG、video等功能性標籤

  1.五、理解form、iframe標籤,理解文件提交過程

  推薦書籍:

  一、《HTML5祕籍》

  二、高健壯性CSS

  2.一、學習基礎知識,包括大部分經常使用屬性、選擇器的用法,要對大多數標籤有個基礎概念

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

  2.二、深刻理解盒子模型,區分塊級元素、行內元素,有幾個比較重要的屬性:

  display、float、position,必定要弄清楚

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

  另外能夠考慮學一些預編譯語言:sass、less,都很簡單

  2.三、學習經常使用框架,可使用bootstrap構建項目

  2.四、學習框架的代碼組織方式

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

  2.五、學習CSS 3的新功能,特別是動畫效果、選擇器

  2.六、認真學習一些CSS對象化思想,學習編寫簡潔性、高複用性、高健壯性的CSS

  2.七、有空的話,能夠看看所謂的扁平化設計,還有簡潔性

  2.八、理解CSSOM、render、reflow、CSS性能、CSS阻塞概念

  學習方法:

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

  二、必定要學會使用grunt、gulp壓縮CSS

  三、display + position + float 能夠組合出很複雜的效果,多想一想盒子模型

  四、嘗試在不用float,且position不爲absolute的狀況下實現等高、等寬等佈局

  推薦書籍:

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

  二、《Web開發技術叢書:深刻理解Bootstrap》

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

  四、《CSS設計完全研究》 這個必定要

  五、《Web開發技術叢書:深刻理解Bootstrap》

  六、能夠找一些專門講SASS的書,可是我沒找到

  七、《CSS權威指南(第3版)》

  三、深刻學習JS

  3.一、從新學習JS語法,注意:表達式(特別是函數訪問表達式)、語句、類型(包括類型判斷)

  注意,這個時候主要傾向於「原生」JS哦,不要使用框架

  3.二、深刻理解JS的「一級函數」、對象、類的概念

  學會使用函數來構造類、閉包,學會用面向對象的方式組織代碼

  3.三、深刻理解JS的做用域、做用域鏈、this對象(在各類調用形式中,this的指向)

  理解函數的各類調用方法(call、apply、bind等)

  3.四、理解對象、數組的概念

  理解對象的「[]」調用,理解對象是一種「特殊數組」

  理解for語句的用法

  深刻理解JS中原始值、包裝對象的概念(重要)

  3.五、學習一些經常使用框架的使用方法,包括:JQUERY、underscore、EXTJS,加分點有:backbone、angularjs、ejs、jade

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

  總結常見用法,提升學習速度

  學習模塊化開發(使用require.js、sea.js等)

  3.六、適當看一些著名框架的源碼,好比jQuery(不建議看angularjs,太複雜了)

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

  3.七、瞭解JS解釋、運行過程,理解JS的單線程概念

  深刻理解JS事件、異步、阻塞概念

  3.八、理解瀏覽器組成部件,理解V8的概念

  學習V8的解釋-運行過程

  在V8基礎上,學會如何提升JS性能

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

  學習方法:

  一、提升對本身的要求,要有代碼潔癖

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

  三、多學學設計模式

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

  推薦書籍:

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

  二、《JavaScript設計模式》

  三、《WebKit技術內幕》

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

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

  六、跨終端

  6.一、理解混合APP的概念

  6.二、理解網頁在各種終端上的表現

  6.三、理解網頁與原生app的區同,重在約束

  6.四、理解單頁網站,特別要規避頁面的內存泄露問題

  6.五、入門nodejs,對其有個基礎概念,知道它能作什麼,缺點是什麼

  推薦書籍:

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

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

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

  五、工具

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

  會用PS進行切圖、保存icon

  入手sublime、webstorm

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

  進階:

  一、性能

  1.一、理解資源加載的過程

  包括:TCP握手鍊接、HTTP請求報文、HTTP回覆報文

  1.二、理解資源加載的性能約束,包括:TCP鏈接限制、TCP慢啓動

  1.三、理解CSS文件、JS文件壓縮,理解不一樣文件放在頁面不一樣位置後對性能的影響

  1.四、理解CDN加速

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

  1.六、深刻理解瀏覽器的render過程

  推薦書籍:

  一、《Web性能權威指南》

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

  二、http及TCP協議族

  2.一、學習http協議,理解http請求-響應模式

  2.二、理解http是應用層協議,它是構建在TCP/IP協議上的

  2.三、理解http報文(請求-響應報文)

  2.四、理解http代理、緩存、網關等概念,指定如何控制緩存

  2.五、理解http協議內容,包括:狀態碼、http頭、長鏈接(http1.1)

  2.六、學習http服務器的工做模型,對靜態文件、CGI、DHTML的處理流程有個大體概念

  推薦書籍:

  一、《HTTP權威指南》

  二、《TCP/IP詳解》

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

  三、安全性

  XSS、SQL注入前端

 

WEB前端學習交流羣21 598399936node

相關文章
相關標籤/搜索