阿里前端知識體系目錄
阿新 • • 發佈:2022-05-16
入門
HTML/HTML5基礎:
知識點
- 語義化H5標籤
- H5引進了一些新的標籤,特別注意article、header、footer、aside、nav等,注意HTML的標題結構
- 理解瀏覽器解析HTML的過程,
- 理解DOM的樹形結構,及相應API
- 理解HTML標籤在各個瀏覽器上的預設樣式(代理樣式),理解CSS中的重置樣式表的概念
- 理解Canvas、SVG、video等功能性標籤
- 理解form、iframe標籤,理解檔案提交過程
推薦書籍:
- 《HTML5祕籍》
高健壯性CSS
知識點
- 學習基礎知識,包括大部分常用屬性、選擇器的用法,要對大多數標籤有個基礎概念,在日常使用的基礎上,嘗試學習瀏覽器相容性問題,要知道相容性的主要問題及解決方法
- 深入理解盒子模型,區分塊級元素、行內元素,有幾個比較重要的屬性:display、float、position,一定要弄清楚區分盒子、行內盒子的概念另外可以考慮學一些預編譯語言:sass、less,都很簡單
- 學習常用框架,可以使用bootstrap構建專案
- 學習框架的程式碼組織方式包括:12格柵系統、元件化、元件的風格化等
- 學習CSS 3的新功能,特別是動畫效果、選擇器
- 認真學習一些CSS物件化思想,學習編寫簡潔性、高複用性、高健壯性的CSS
- 有空的話,可以看看所謂的扁平化設計,還有簡潔性
- 理解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
知識點
- 重新學習JS語法,注意:表示式(特別是函式訪問表示式)、語句、型別(包括型別判斷)注意,這個時候主要傾向於“原生”JS哦,不要使用框架
-
- 深入理解JS的“一級函式”、物件、類的概念
- 學會使用函式來構造類、閉包
- 學會用面向物件的方式組織程式碼
-
- 深入理解JS的作用域、作用域鏈
- 深入理解this物件(在各種呼叫形式中,this的指向)
- 理解函式的各種呼叫方法(call、apply、bind等)
-
- 理解物件、陣列的概念
- 理解物件的“[]”呼叫
- 理解物件是一種“特殊陣列”
- 理解for語句的用法
- 深入理解JS中原始值、包裝物件的概念(重要)
-
- 學習一些常用框架的使用方法,包括:JQUERY、underscore、EXTJS,
- 加分點有:backbone、angularjs、ejs、jade
- 通過比較多個框架的使用方法,想清楚“JS語言極其靈活”這一事實
- 總結常見用法,提高學習速度
- 學習模組化開發(使用require.js、sea.js等)
-
- 適當看一些著名框架的原始碼,比如jQuery(不建議看angularjs,太複雜了)
- 重要的是學習框架中程式碼的組織形式,即設計模式
-
- 瞭解JS解釋、執行過程
- 理解JS的單執行緒概念
- 深入理解JS事件、非同步、阻塞概念
-
- 理解瀏覽器組成部件
- 理解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應用》
跨終端
知識點
- 理解混合APP的概念
- 理解網頁在各類終端上的表現
- 理解網頁與原生app的區同,重在約束
- 理解單頁網站,特別要規避頁面的記憶體洩露問題
- 入門nodejs,對其有個基礎概念,知道它能做什麼,缺點是什麼
推薦書籍:
- 《單頁Web應用:JavaScript從前端到後端 》
- 《Web 2.0介面設計模式》
- 《響應式Web設計:HTML5和CSS3實戰》
工具
- 學會使用grunt進行JS、CSS、HTML 壓縮,特別是模組化js開發時候的壓縮
- 會用PS進行切圖、儲存icon
- 入手sublime、webstorm
- 學會使用chrome除錯面板,特別是:console、network、profile、element
進階:
效能
-
- 理解資源載入的過程
- 包括:TCP握手連線、HTTP請求報文、HTTP回覆報文
- 理解資源載入的效能約束,包括:TCP連線限制、TCP慢啟動
-
- 理解CSS檔案、JS檔案壓縮
- 理解不同檔案放在頁面不同位置後對效能的影響
- 理解CDN加速
-
- 學會使用HTTP頭控制資源快取
- 理解cache-control、expire、max-age、ETag對快取的影響
- 深入理解瀏覽器的render過程
推薦書籍:
- 《Web效能權威指南》
- 雅虎網站頁面效能優化的34條黃金守則
HTTP及TCP協議族
-
- 學習http協議
- 理解http請求-響應模式
- 理解http是應用層協議,它是構建在TCP/IP協議上的
- 理解http報文(請求-響應報文)
- 理解http代理、快取、閘道器等概念,指定如何控制快取
- 理解http協議內容,包括:狀態碼、http頭、長連線(http1.1)
- 學習http伺服器的工作模型,對靜態檔案、CGI、DHTML的處理流程有個大致概念
推薦書籍:
- 《HTTP權威指南》
- 《TCP/IP詳解》
- 《圖解TCP/IP(第5版)》
6、安全性