web前端工程師需要掌握哪些知識
隨著網際網路的發展速度迅猛,web前端工程師越來越火熱,想學習Web前端開發嗎 ? 若想成為web前端工程師需要掌握哪些知識?今天小編總結了成為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標籤,理解檔案提交過程
2、CSS知識
2.1、學習基礎知識,包括大部分常用屬性、選擇器的用法,瞭解大多數標籤基本概念
學習瀏覽器相容性問題,知道相容性的主要問題及解決方法
2.2、深入理解盒子模型,區分塊級元素、行內元素,一些重要的屬性: display、float、position,必須要會區分盒子、行內盒子的概念
還可以學一些簡單的預編譯語言:sass、less
2.3、學習常用框架,可以使用bootstrap構建專案
2.4、學習框架的程式碼組織方式
包括:12格柵系統、元件化、元件的風格化等
2.5、學習CSS 3的新功能,特別是動畫效果、選擇器
2.6、學習一些CSS物件化思想,學習編寫簡潔性、高複用性、高健壯性的
2.7、可以看看扁平化設計,還有簡潔性
2.8、理解CSSOM、render、reflow、CSS效能、CSS阻塞概念
學習方法:
多看別人的程式碼,優秀的設計網站
要學會使用grunt、gulp壓縮CSS
display + position + float 可以組合出很複雜的效果,多練習盒子模型
嘗試在不用float,且position不為absolute的情況下實現等高、等寬等佈局
3.1、重新學習JS語法,注意:表示式、語句、型別
主要傾向於“原生”JS哦,不要使用框架
3.2、深入理解JS的“一級函式”、物件、類的概念
學會使用函式來構造類、閉包,學會用面向物件的方式組織程式碼
3.3、深入理解JS的作用域、作用域鏈、this物件
理解函式的各種呼叫方法(call、apply、bind等)
3.4、理解物件、陣列的概念
理解物件的“[]”呼叫,理解物件是一種“特殊陣列”
理解for語句的用法
深入理解JS中原始值、包裝物件的概念(重要)
3.5、學習一些常用框架的使用方法,包括:JQUERY、underscore、EXTJS,更高階的:backbone、angularjs、ejs、jade比較多個框架的使用方法,總結常見用法,提高學習速度學習模組化開發(使用require.js、sea.js等)
3.6、適當看一些著名框架的原始碼,比如jQuery重要的是學習框架中程式碼的組織形式,即設計模式
3.7、瞭解JS解釋、執行過程,理解JS的單執行緒概念
深入理解JS事件、非同步、阻塞概念
3.8、理解瀏覽器組成部件,理解V8的概念
學習V8的解釋-執行過程
在V8基礎上,學會如何提高JS效能
學會使用chrome的profile進行記憶體洩露分析
學習方法:
提高對自己的要求
多看優秀框架的原始碼,特別是框架的架構模式、設計模式
多學設計模式
學習原生JS、DOM、BOM、Ajax
4、跨終端
理解混合APP的概念
理解網頁在各類終端上的表現
理解網頁與原生app的區同,重在約束
理解單頁網站,特別要規避頁面的記憶體洩露問題
入門nodejs,對其有個基礎概念
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過程
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的處理流程有個大致概念
3、安全性
XSS、SQL注入