凤凰下载

凤凰下载 > IT培訓 >web前端培訓
前端工程師需要掌握哪些知識

随着近年來互聯網的發展和普及,web前端工程師需求量越來越大,那麼計劃學習web前端開發技術的人也越來越多,但是很大一部分學習者非常關心前端工程師需要掌握的核心技能知識,方便後面學習時提前預習,下面小編就為大家介紹一下web前端開發工程師需要掌握的技能知識。

QQ截图20200802154218

前端工程師需要掌握哪些知識呢?

web前端開發工程師一般分為三種級别,一般分為初級工程師、中zhi級工程dao師、高級工程師。

1、初級前端工程師:

能熟練使用html、css、js,主要工作還是搭建靜态頁面。進階知識的話就是響應式這一塊了,一套代碼能适配pc+手機是初級前端工程師的進階。

2、中級前端工程師:

作為一名中級前端工程師的話,除了上面的以外,還需要會使用一些框架之類的東西,像bootstrap、jquery之類的。進階的知識應該是ajax這一塊了,當然ajax并不是很難,了解怎麼與後台交互式學習ajax的關鍵點。

3、高級前端工程師:

想成為高級前端工程師,首先要學習的就是前端工程化,進階框架angular、vue、react ,和jquery有着很大區别,vue是數據控制頁面渲染及狀态,而jquery是DOM節點控制渲染,vue渲染頁面更容易更優雅。vue能夠把前端項目徹底工程化,有配置文件、可以安裝第三方模塊、配合webpack打包、可以實現模塊化開發等等,當然簡單是它最大的優勢。進階就是要學習es6 7 語法、vuex、Element_ui (開發pc端框架)、vux(開發手機端框架)、Mint UI(開發手機端框架)、Nodejs(後端語言,js語法)。

以上就是小編分享的前端工程師需要學習的知識點,當然隻是一個大的方面去說的,有興趣願意學習的,可以尋找相關的書籍學習一下,希望能幫助到你。

前端工程师需要掌握哪些知识

資料拓展閱讀,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對象化思想,學習編寫簡潔性、高複用性、高健壯性的CSS;

2.7、可以看看扁平化設計,還有簡潔性;

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

學習方法:

多看别人的代碼,優秀的設計網站,要學會使用grunt、gulp壓縮CSS,display + position + float 可以組合出很複雜的效果,多練習盒子模型,嘗試在不用float,且position不為absolute的情況下實現等高、等寬等布局。

3、深入學習javascript

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的處理流程有個大緻概念。