先說(shuō)下web前端工程師的價(jià)值，目前web產(chǎn)品交互越來(lái)越復(fù)雜，用戶(hù)使用體驗(yàn)和網(wǎng)站前端性能優(yōu)化這些都得靠web前端工程師去做web前端工程師是設(shè)計(jì)加開(kāi)發(fā)的綜合體，web前端工程師是在開(kāi)發(fā)人員中最直接面向產(chǎn)品，面向用戶(hù)的設(shè)計(jì)人員，一個(gè)開(kāi)發(fā)團(tuán)隊(duì)的成果是要靠web前端工程師去展現(xiàn)，因?yàn)橛脩?hù)不會(huì)去關(guān)心后臺(tái)的處理有多么強(qiáng)大 ；在設(shè)計(jì)人員中web前端工程師是直接面向開(kāi)發(fā)人員的設(shè)計(jì)人員，向開(kāi)發(fā)人員以一種計(jì)算機(jī)語(yǔ)言的方式傳遞其設(shè)計(jì)理念，web前端工程師在整個(gè)團(tuán)隊(duì)中是很關(guān)鍵的。
在我眼中一名合格的web前端工程師必須得掌握HTML、CSS和JavaScript。只懂其中一個(gè)或兩個(gè)還不行，你必須對(duì)這三門(mén)語(yǔ)言都很熟悉。也不是說(shuō)必須對(duì)這三門(mén)語(yǔ)言都非常精通，但你至少要能夠運(yùn)用它們完成大多數(shù)任務(wù)，而無(wú)需地頻繁地尋求別人的幫助。
下面說(shuō)下我眼中web前端工程師要掌握的基礎(chǔ)知識(shí)和技能：
1 網(wǎng)頁(yè)的基本結(jié)構(gòu)（HTML + CSS）
HTML是一種標(biāo)記語(yǔ)言，而不是編程語(yǔ)言，最基本是標(biāo)簽是<html>和<body>，CSS是用來(lái)定義如何顯示HTML元素的。對(duì)HTML+CSS很容易入門(mén)，但很多人不夠深入，舉幾個(gè)例子：<meta> 標(biāo)簽是作什么用的？margin-left與left有什么區(qū)別，應(yīng)該在什么情況下使用？再出個(gè)DIV+CSS布局問(wèn)題：一個(gè)寬度不確定的DIV里面放三個(gè)水平對(duì)齊的DIV，左右兩個(gè)DIV寬度固定為150px，中間那個(gè)DIV充滿(mǎn)剩余的寬度。如果這些問(wèn)題你目前還不知道，對(duì)那個(gè)布局問(wèn)題幾分鐘內(nèi)不能解決，說(shuō)明你對(duì)HTML+CSS還不夠深入。
2 瀏覽器是怎么展現(xiàn)網(wǎng)頁(yè)的
不同內(nèi)核的瀏覽器對(duì)網(wǎng)頁(yè)的渲染是不一樣的，目前瀏覽器都有客戶(hù)端調(diào)試工具，下圖展現(xiàn)一個(gè)google首頁(yè)在IE9下的加載細(xì)節(jié)：
在做web性能優(yōu)化時(shí)，對(duì)瀏覽器渲染及細(xì)節(jié)要進(jìn)一步了解。說(shuō)個(gè)比較有用的知識(shí)點(diǎn)：目前瀏覽器并行加載的上限是6，老版本的瀏覽器會(huì)有所不同。
3 網(wǎng)頁(yè)的生命周期
不同的web框架下，頁(yè)面的生命周期會(huì)有所不同，大體還是一樣：客戶(hù)端發(fā)送GET請(qǐng)求，服務(wù)器返回相應(yīng)頁(yè)面，客戶(hù)端完成操作及數(shù)據(jù)，然后POST給服務(wù)器。一定要對(duì)數(shù)據(jù)的傳遞(前臺(tái)與后臺(tái),頁(yè)面之間)的細(xì)節(jié)了然于心。
4 DHTML DOM BOM Javascript AJAX
這是Web前端開(kāi)發(fā)的重中之中，大多數(shù)時(shí)候我們都在和他們打交道。說(shuō)幾個(gè)注意點(diǎn)：javascript是單線(xiàn)程編程，所謂的javascript異步編程只不過(guò)是計(jì)劃在未來(lái)的某個(gè)時(shí)間上執(zhí)行相應(yīng)事件而已；詳細(xì)了解DOM事件機(jī)制；客戶(hù)端存儲(chǔ)（HTML5中增加了localStorage和sessionStorage）；javascript不像服務(wù)器端語(yǔ)言那樣嚴(yán)謹(jǐn)，調(diào)試不是很方便，所以一開(kāi)始要養(yǎng)成嚴(yán)謹(jǐn)?shù)膉avascript編輯習(xí)慣；javascript很強(qiáng)大很靈活，不要幻想短時(shí)間內(nèi)熟練（更別說(shuō)精通）它，并寫(xiě)些框架、類(lèi)庫(kù)，初始階段還是先用熟練已成熟的框架（比如jquery）當(dāng)入門(mén)；一定要熟練使用客戶(hù)端調(diào)試工具。
6 服務(wù)器端語(yǔ)言開(kāi)發(fā)經(jīng)驗(yàn)，PS切圖技術(shù)
Web前端開(kāi)發(fā)介于設(shè)計(jì)與開(kāi)發(fā)中間，所以?xún)啥说臇|西都得懂點(diǎn)。編輯語(yǔ)言是相通的，之前編寫(xiě)過(guò)服務(wù)器語(yǔ)言，對(duì)學(xué)習(xí)javascript是十分有益的，從圖片轉(zhuǎn)成靜態(tài)HTML頁(yè)面，少不了PS切圖技術(shù)。
5 瀏覽器的兼容性
由于歷史原因 ，瀏覽器的兼容性一直都折磨web前端工程師的地方，雖然有W3組織，并制定了一些規(guī)范，雖然瀏覽器產(chǎn)商都正在努力改進(jìn)并接近其規(guī)范，但現(xiàn)實(shí)網(wǎng)絡(luò)環(huán)境中各種內(nèi)核、各種版本的瀏覽器都有一席之地。解決瀏覽器兼容性靠經(jīng)驗(yàn)積累，可喜的事這方面資料網(wǎng)上有很多。http://www.w3help.org/zh-cn/這是個(gè)很好的參考網(wǎng)站。
6 快速學(xué)習(xí)能力和主動(dòng)學(xué)習(xí)意愿
web前端的發(fā)展很快，從事這一行業(yè)一定要有快速學(xué)習(xí)能力和主動(dòng)學(xué)習(xí)意愿，這樣才能適應(yīng)web產(chǎn)品的要求。在web前端領(lǐng)域沒(méi)有絕對(duì)的是與非,解決一個(gè)問(wèn)題的方法有很多，但我們要找到一個(gè)更合適的方法，找到一個(gè)更合適的方法需要經(jīng)驗(yàn)作積累，總之web前端入門(mén)容易，想熟練很難，需要更多的主動(dòng)學(xué)習(xí)意愿。
7 良好的溝通能力
優(yōu)秀的前端工程師需要具備良好的溝通能力，因?yàn)槟愕墓ぷ髋c很多人的工作息息相關(guān)，比如項(xiàng)目經(jīng)理、設(shè)計(jì)師、最終用戶(hù)、開(kāi)發(fā)工程師，前端工程師位于這幾類(lèi)人的交匯點(diǎn)上，這些角色的要求你都得照顧好，平衡這四類(lèi)人的需求，拿出一個(gè)比較合適的方案。由此可見(jiàn)溝通能力對(duì)前端工程師要求更高。
最后提供一些好的學(xué)習(xí)資料：
1. W3C學(xué)習(xí)網(wǎng)站（http://www.jb51.net/w3school/），上面的資料很全，很實(shí)用，是最好的入門(mén)資料。
2. 《javascript權(quán)威指南》
3. 《javascript+DOM編程藝術(shù)》
4. 《javascript高級(jí)程序設(shè)計(jì)》
大家可以看看下面這篇博文：Nicholas C. Zakas談怎樣才能成為優(yōu)秀的前端工程師
昨天，我負(fù)責(zé)了Yahoo!公司組織的一次面試活動(dòng)，感觸頗深的是其中的應(yīng)聘者提問(wèn)環(huán)節(jié)。我得說(shuō)自己對(duì)應(yīng)聘者們提出的大多數(shù)問(wèn)題都相當(dāng)失望。我希望聽(tīng)到一些對(duì)在Yahoo！工作充滿(mǎn)激情的問(wèn)題。在昨天的應(yīng)聘者中，只有一個(gè)人的問(wèn)題是我認(rèn)為最好的，那個(gè)人問(wèn)我：“你覺(jué)得怎么才能成為優(yōu)秀的前端工程師？”我覺(jué)得很有必要把這個(gè)問(wèn)題從面試房間里拿出來(lái)討論一下。
首先，前端工程師必須得掌握HTML、CSS和JavaScript。只懂其中一個(gè)或兩個(gè)還不行，你必須對(duì)這三門(mén)語(yǔ)言都很熟悉。也不是說(shuō)必須對(duì)這三門(mén)語(yǔ)言都非常精通，但你至少要能夠運(yùn)用它們完成大多數(shù)任務(wù)，而無(wú)需地頻繁地尋求別人的幫助。
優(yōu)秀的前端工程師應(yīng)該具備快速學(xué)習(xí)能力。推動(dòng)Web發(fā)展的技術(shù)并不是靜止不動(dòng)的，沒(méi)錯(cuò)吧？我甚至可以說(shuō)這些技術(shù)幾乎每天都在變化，如果沒(méi)有快速學(xué)習(xí)能力，你就跟不上Web發(fā)展的步伐。你必須不斷提升自己，不斷學(xué)習(xí)新技術(shù)、新模式；僅僅依靠今天的知識(shí)無(wú)法適應(yīng)未來(lái)。Web的明天與今天必將有天壤之別，而你的工作就是要搞清楚如何通過(guò)自己的Web應(yīng)用程序來(lái)體現(xiàn)這種翻天覆地的變化。
計(jì)算機(jī)科學(xué)這個(gè)大門(mén)類(lèi)下面的許多分支在人們眼中實(shí)際上都不外乎科學(xué)。但是，我們所說(shuō)的前端不是什么科學(xué)，而是藝術(shù)。藝術(shù)家不僅要掌握謀生的技術(shù)，還要懂得如何運(yùn)用。對(duì)同一個(gè)問(wèn)題的解決方案在這種情況適用，在另一種情況下可能就不適用。對(duì)Web應(yīng)用程序的前端而言，解決同一問(wèn)題的方案經(jīng)常會(huì)有很多。沒(méi)有哪個(gè)方案是錯(cuò)的，但其中確實(shí)有一些是更合適的。優(yōu)秀的前端工程師應(yīng)該知道在什么情況下使用哪種方案更合適，而在什么情況下應(yīng)該重新選擇。
優(yōu)秀的前端工程師需要具備良好的溝通能力，因?yàn)槟愕墓ぷ髋c很多人的工作息息相關(guān)。在任何情況下，前端工程師至少都要滿(mǎn)足下列四類(lèi)客戶(hù)的需求。
產(chǎn)品經(jīng)理——這些是負(fù)責(zé)策劃應(yīng)用程序的一群人。他們能夠想象出怎樣通過(guò)應(yīng)用程序來(lái)滿(mǎn)足用戶(hù)需求，以及怎樣通過(guò)他們?cè)O(shè)計(jì)的模式賺到錢(qián)（但愿如此）。一般來(lái)說(shuō)，這些人追求的是豐富的功能。
UI設(shè)計(jì)師——這些人負(fù)責(zé)應(yīng)用程序的視覺(jué)設(shè)計(jì)和交互模擬。他們關(guān)心的是用戶(hù)對(duì)什么敏感、交互的一貫性以及整體的好用性。他們熱衷于流暢靚麗但并不容易實(shí)現(xiàn)的用戶(hù)界面。
項(xiàng)目經(jīng)理——這些人負(fù)責(zé)實(shí)際地運(yùn)行和維護(hù)應(yīng)用程序。項(xiàng)目管理的主要關(guān)注點(diǎn)，無(wú)外乎正常運(yùn)行時(shí)間（uptime）——應(yīng)用程序始終正?？捎玫臅r(shí)間、性能和截止日期。項(xiàng)目經(jīng)理追求的目標(biāo)往往是盡量保持事情的簡(jiǎn)單化，以及不在升級(jí)更新時(shí)引入新問(wèn)題。
最終用戶(hù)——當(dāng)然是應(yīng)用程序的主要消費(fèi)者。盡管我們不會(huì)經(jīng)常與最終用戶(hù)打交道，但他們的反饋意見(jiàn)至關(guān)重要；沒(méi)人想用的應(yīng)用程序毫無(wú)價(jià)值。最終用戶(hù)要求最多的就是對(duì)個(gè)人有用的功能，以及競(jìng)爭(zhēng)性產(chǎn)品所具備的功能。
那么，前端工程師應(yīng)該最關(guān)注哪些人的意見(jiàn)呢？答案是所有這四類(lèi)人。優(yōu)秀的前端工程師必須知道如何平衡這四類(lèi)人的需求和預(yù)期，然后在此基礎(chǔ)上拿出最佳解決方案。由于前端工程師處于與這四類(lèi)人溝通的交匯點(diǎn)上，因此其溝通能力的重要性不言而喻。如果一個(gè)非?？岬男鹿δ芤?yàn)闀?huì)影響前端性能，必須刪繁就簡(jiǎn)，你怎么跟產(chǎn)品經(jīng)理解釋?zhuān)吭俦热?，假設(shè)某個(gè)設(shè)計(jì)如果不改回原方案可能會(huì)給應(yīng)用程序造成負(fù)面影響，你怎么才能說(shuō)服UI設(shè)計(jì)師？作為前端工程師，你必須了解每一類(lèi)人的想法從何而來(lái)，必須能拿出所有各方都能接受的解決方案。從某種意義上說(shuō)，優(yōu)秀的前端工程師就像是一位大使，需要時(shí)刻抱著外交官的心態(tài)來(lái)應(yīng)對(duì)每一天的工作。
我告誡新來(lái)的前端工程師最多的一句話(huà)，就是不要在沒(méi)有作出評(píng)估之前就隨便接受某項(xiàng)任務(wù)。你必須始終記住，一定先搞清楚別人到底想讓你干什么，不能簡(jiǎn)單地接受“這個(gè)功能有問(wèn)題”之類(lèi)的大概其的說(shuō)法。而且，你還要確切地知道這個(gè)功能或設(shè)計(jì)的真正意圖何在?！凹右粋€(gè)按鈕”之類(lèi)的任務(wù)并不總意味著你最后會(huì)加一個(gè)按鈕。還可能意味著你會(huì)找產(chǎn)品經(jīng)理，問(wèn)一問(wèn)這個(gè)按鈕有什么用處，然后再找UI設(shè)計(jì)師一塊探討按鈕是不是最佳的交互手段。要成為優(yōu)秀的前端工程師，這種溝通至關(guān)重要。
無(wú)論從哪個(gè)方面講，我都覺(jué)得前端工程師是計(jì)算機(jī)科學(xué)職業(yè)領(lǐng)域中最復(fù)雜的一個(gè)工種。絕大多數(shù)傳統(tǒng)的編程思想已經(jīng)不適用了，為了在多種平臺(tái)中使用，多種技術(shù)都借鑒了大量軟科學(xué)的知識(shí)和理念。成為優(yōu)秀前端工程師所要具備的專(zhuān)業(yè)技術(shù)，涉及到廣闊而復(fù)雜的領(lǐng)域，這些領(lǐng)域又會(huì)因?yàn)槟阕罱K必須服務(wù)的各方的介入而變得更加復(fù)雜。專(zhuān)業(yè)技術(shù)可能會(huì)引領(lǐng)你進(jìn)入成為前端工程師的大門(mén)，但只有運(yùn)用該技術(shù)創(chuàng)造的應(yīng)用程序以及你跟他人并肩協(xié)同的能力，才會(huì)真正讓你變得優(yōu)秀。
聯(lián)系客服
