網(wǎng)站制作從最初的重交互/UI，輕JavaScript的開發(fā)模式，到交互、UI、邏輯一把抓，再到“大前端”的服務(wù)器端、客戶端全掌控，前端工程師的工作內(nèi)容和工作職責(zé)不斷擴(kuò)寬。從前端工程師的發(fā)展歷史中，我們可以總結(jié)出前端工程師的技能棧。
·硬技能：HIML/CSS/JavaScript。這3項(xiàng)是前端工程師從蠻荒年代發(fā)展至今從未脫離的核心技術(shù)。
·軟技能：用戶體驗(yàn)。用戶體驗(yàn)是Web產(chǎn)品吸引用戶的第一道菜，也是前端工程師工作產(chǎn)出的重點(diǎn)。
·擴(kuò)展技能：Node.js。并非特指Node.js本身，而是Node.js所代表的Web服務(wù)器端知識(shí)。即使你不是一個(gè)“大前端”，
了解Web產(chǎn)品的運(yùn)行原理也是一個(gè)前端工程師必備的素養(yǎng)。
1.硬技能一—HTML/CSS/JavaScript
這3項(xiàng)俗稱“前端工程師的三把刷子”，是前端工程師必須掌握的3項(xiàng)核心技能。其實(shí)將HIML/CSS與JavaScript放在一起討論并不合適，HTML和CSS作為標(biāo)記類語言，只有在瀏覽器環(huán)境或者類瀏覽器環(huán)境下才會(huì)被識(shí)別解析，所以可以認(rèn)為這兩者是DSL（DomainSpecific Language,領(lǐng)域特定語言）；而JavaScript與HTML/CSS的性質(zhì)不同，雖然不如C++、Java等高級(jí)語言那樣嚴(yán)謹(jǐn)，但其本質(zhì)上是一門編程語言。同其他編程語言一樣，對(duì)于JavaScript，掌握其語法和特性是最基本的。但上面這些只是應(yīng)用能力，最終考量的仍然是計(jì)算機(jī)體系的理論知識(shí)。所以，數(shù)據(jù)結(jié)構(gòu)、算法、軟件工程等基礎(chǔ)知識(shí)對(duì)于前端工程師同樣重要，這些知識(shí)能夠決定一個(gè)前端工程師的上限。
HTML/CSS/JavaScript這三者只是統(tǒng)稱，代表著前端工程師能力的3個(gè)方面。三者相互耦合，并非獨(dú)立。比如CSS必須與HTML配合、JavaScript邏輯須借助HTML和CSS直觀地展示給用戶。任何一項(xiàng)都是一個(gè)龐大的技能樹，可以細(xì)分出很多子技能。對(duì)于HTL，要掌握各個(gè)標(biāo)簽的合理使用和基本的WebAPI。對(duì)于CSS，要在理解各屬性的工作模式的前提下能夠綜合使用，給出合理的解決方案；并且由于瀏覽器的差異，還必須掌握必要的hack方案。雖然這些hack方案最終都會(huì)被歷史的塵埃掩埋，但目前[1]我們?nèi)匀粺o法避免兼容性問題。對(duì)于JavaScript，與其他任何一門編程語言一樣，除要求掌握基本的語法，有基本的應(yīng)用編程能力以外，還必須具備良好的抽象能力以及架構(gòu)能力。
2.軟技能一—用戶體驗(yàn)
除了以上提到的“硬技能”外，前端工程師還必須掌握一項(xiàng)“軟技能”，即用戶體驗(yàn)。前端工程師的產(chǎn)出是直接面向用戶的，良好的用戶體驗(yàn)是一個(gè)Web產(chǎn)品的基本要素。這里的用戶體驗(yàn)并非指的是交互方案和視覺設(shè)計(jì)，當(dāng)然這些也是用戶體驗(yàn)的一部分。此處我們討論的用戶體驗(yàn)包括但不限于以下幾點(diǎn)。
·保證內(nèi)容的快速展現(xiàn)，減少用戶等待時(shí)間。
·保證操作的流暢度。
·如果是移動(dòng)設(shè)備，應(yīng)盡量減少設(shè)備的耗電量。
上述幾點(diǎn)總結(jié)起來其實(shí)就兩個(gè)字：性能。如果說按時(shí)完成了業(yè)務(wù)的所有需求是保證了“量”，那么提升產(chǎn)品的性能就是保證了“質(zhì)”，兩者缺一不可。
JavaScript設(shè)計(jì)之初最經(jīng)典的應(yīng)用場(chǎng)景是表單驗(yàn)證。比如，一個(gè)需要驗(yàn)證用戶名和密碼的表單，用戶沒有輸入任何內(nèi)容就單擊“發(fā)送”按鈕，仍然會(huì)發(fā)送一個(gè)請(qǐng)求到服務(wù)器端進(jìn)行驗(yàn)證。這在今天的網(wǎng)絡(luò)技術(shù)下沒什么大不了，但在網(wǎng)絡(luò)速度慢而且上網(wǎng)費(fèi)用昂貴的年代，這樣的代價(jià)是非常巨大的，并且用戶必須等待服務(wù)器端處理后才能得到反饋。JavaScript在瀏覽器發(fā)送請(qǐng)求之前驗(yàn)證內(nèi)容的有效性，避免一次無效的請(qǐng)求，既減輕了服務(wù)器端壓力，節(jié)省了成本，又減少了用戶等待時(shí)間，提升了用戶體驗(yàn)?？梢奐avaScript設(shè)計(jì)的初衷便將用戶體驗(yàn)作為重要的考慮因素。
在現(xiàn)今社會(huì)的快節(jié)奏下，用戶對(duì)于產(chǎn)品的需求也傾向于快速化：快速展現(xiàn)、快速迭代。用戶不想為了看一條新聞而去下載一款新聞軟件，他們希望打開網(wǎng)站即可快速查看。Web產(chǎn)品本身就具備快速的基因，性能優(yōu)化的最終目標(biāo)也是保證“足夠快”。所以，前端工程師不僅要求熟練地使用基本的開發(fā)技能，還必須具備性能優(yōu)化的意識(shí)和技能。
你可能會(huì)產(chǎn)生疑問：學(xué)習(xí)能力不算軟技能的一種嗎？這是因?yàn)閷W(xué)習(xí)能力是任何崗位都必須具備的軟技能之一，并不是專屬于前端工程師的軟技能。
3.擴(kuò)展技能一—Node.js
將Node.js定位為擴(kuò)展技能，并非指的是Node.js本身，而是以Node.js為代表的Web服務(wù)器端知識(shí)。前端工程師掌握Web客戶端的相關(guān)知識(shí)是基本要求，欠缺的是對(duì)Web服務(wù)器端的了解。雖然并不是每個(gè)前端工程師都是“大前端”，并且讓前端工程師編寫不熟悉的服務(wù)器端邏輯也并不十分恰當(dāng)，專業(yè)的事應(yīng)該由專業(yè)的人負(fù)責(zé)，但這并不意味著前端工程師不需要熟悉服務(wù)器端的理論知識(shí)。了解Web應(yīng)用從前到后的工作流程和整體架構(gòu)模型，有肋于前端工程師編寫更合理的客戶端邏輯，以及對(duì)產(chǎn)品出現(xiàn)的問題及時(shí)定位。
綜上所述，一個(gè)合格的前端工程師應(yīng)該掌握的技術(shù)?？梢杂孟聢D概括。
前端工程師是承載用戶層所有功能的資源產(chǎn)出者，不僅是客戶端最終呈現(xiàn)給用戶的HTML/CSS/JavaScript等資源成品，而且還包括這些資源從零開始到最終產(chǎn)出的生產(chǎn)流水線所涵蓋的所有環(huán)節(jié)。到這里相信大家都應(yīng)該知道網(wǎng)站制作前端工程師必備技能都有哪些了吧！
