多年前，有知名企業(yè)前端前輩如是說：前端是做什么的？在一個(gè)網(wǎng)頁上你看到的就是前端工程師做的。也有人說：前端是設(shè)計(jì)師在UED最親密的合作伙伴。很顯然，這些概念放之今日都顯得太片面。

誠然，讓時(shí)光倒流幾年，回到div+css剛剛統(tǒng)治網(wǎng)頁設(shè)計(jì)前端領(lǐng)域的時(shí)代，將設(shè)計(jì)師制作的設(shè)計(jì)稿用html+css的形式高質(zhì)量的還原，并最終呈現(xiàn)給互聯(lián)網(wǎng)用戶，這幾乎就是前端工程師的全部。如果還能用Javascript（后簡稱：JS）給頁面增加一些動(dòng)畫或其他交互效果（如：無縫滾動(dòng)、選項(xiàng)卡等），那簡直堪稱大神了。所以那個(gè)年代，前端開發(fā)者并沒有大放異彩的條件，地位顯然還很低，而那時(shí)IE6還是事實(shí)上得標(biāo)準(zhǔn)。

隨著歷史的發(fā)展，時(shí)逢谷歌Gmail網(wǎng)頁版郵件服務(wù)問世，Web富應(yīng)用時(shí)代逐漸到來。Gmail使用的異步刷新（Ajax）模式，為網(wǎng)頁前端開發(fā)開啟了新紀(jì)元。Ajax技術(shù)可以讓同一個(gè)網(wǎng)頁中的內(nèi)容在互不影響的情況下分批次的在必要的時(shí)候進(jìn)行更新。這極大程度上降低了網(wǎng)頁白屏?xí)r間，在用戶瀏覽的同時(shí)進(jìn)行內(nèi)容更新而不刷新頁面，保證了用戶訪問的流暢性，降低了用戶等待成本。因此，這一時(shí)期Ajax被大范圍應(yīng)用到網(wǎng)頁應(yīng)用中，而前端工程師也順應(yīng)潮流，紛紛投身JS異步編程。Ajax的使用讓許多企業(yè)嘗到了甜頭，前端工程師的地位逐漸得到了提升，很多開發(fā)者逐漸在這一領(lǐng)域嶄露頭角，各種異步框架（Prototype、jQuery等），各種異步實(shí)現(xiàn)方案（頁面懶加載、延遲加載等）層出不窮。

然而，Ajax激起的浪潮遠(yuǎn)不止于此。隨著Ajax技術(shù)日趨成熟，越來越多的前端開發(fā)者已經(jīng)深入了解了它。開發(fā)者們發(fā)現(xiàn)傳統(tǒng)Web技術(shù)，由于頁面結(jié)構(gòu)和數(shù)據(jù)的組裝都在服務(wù)端完成，而在請求響應(yīng)過程中通過網(wǎng)絡(luò)傳輸?shù)氖谴蠖瓮暾膆tml片段，甚至整個(gè)頁面。這給服務(wù)器帶來了很大的負(fù)擔(dān)，也浪費(fèi)了很多的帶寬資源，也間接增加了用戶等待成本，并且在后端模版（例如：針對PHP的Smarty、面向JAVA的Velocity等）的復(fù)用上會(huì)存在麻煩。為了解決這些問題，優(yōu)化體驗(yàn)，數(shù)據(jù)與結(jié)構(gòu)分離，前后端分離的呼聲逐漸高漲。服務(wù)端只負(fù)責(zé)數(shù)據(jù)的計(jì)算與存取，而數(shù)據(jù)在網(wǎng)絡(luò)中以JSON格式的純文本字符串的形式傳遞，大部分頁面結(jié)構(gòu)的拼裝工作由前端完成。這樣的技術(shù)方案優(yōu)勢是很明顯的：前后端職責(zé)明確，相互獨(dú)立，工作上幾乎互不干擾；單個(gè)請求傳輸內(nèi)容上減少了大量的html片段，只保留數(shù)據(jù)，并且JSON對前后端友好，減少帶寬浪費(fèi)；結(jié)構(gòu)與樣式完全由前端自己控制，降低前后端耦合等等！在這樣形勢的驅(qū)動(dòng)下，前端工程師們也交出了傲人的成績，諸多優(yōu)秀的前端模版引擎（Mustache、artTemplate、xTemplate等）應(yīng)運(yùn)而生。當(dāng)然，這也給新時(shí)代的前端工程師們提出了更高的要求：了解頁面渲染原理、HTTP工作原理、算法及數(shù)據(jù)結(jié)構(gòu)等等。無可厚非，此時(shí)的前端工程師已然不可或缺。

任何事物都具備兩面性，前端開發(fā)日趨重要的同時(shí)也伴隨著諸多負(fù)面問題。大量的前端業(yè)務(wù)邏輯大大增加了前端JS代碼量，前端代碼的模塊化、按需加載、依賴管理勢在必行。大量的業(yè)務(wù)邏輯也意味著大量前端bug的降臨，新舊版本代碼的獨(dú)立性、版本升級與代碼回滾問題必須重視。一時(shí)間sea.js、require.js等模塊管理庫風(fēng)生水起，前端架構(gòu)概念逐漸成型，svn、git等版本控制工具也漸漸進(jìn)入前端領(lǐng)域，前端已不再是單純的頁面仔，不再是單純的html、css和js。

前端代碼量的劇增，一方面單個(gè)js文件代碼量過多，導(dǎo)致代碼維護(hù)成本增加，問題定位難度增大，給開發(fā)調(diào)試造成了一定困難。另一方面同樣伴隨著網(wǎng)絡(luò)傳輸時(shí)間長的問題，使頁面加載性能受損。因此，開發(fā)者們不得不將文件拆分成多個(gè)文件，充分利用瀏覽器的并發(fā)能力以節(jié)省這一成本，也讓那些可復(fù)用的公共資源得以獨(dú)立管理和維護(hù)。但是，文件越拆越多終究讓頁面的HTTP請求數(shù)量給頁面性能帶來了壓力。靜態(tài)資源的壓縮、請求的合并被推上了前端舞臺(tái)。從早期的YUI Compressor，到如今基于Node.js的grunt、gulp等，不斷推陳出新，靜態(tài)資源壓縮也已經(jīng)歷了幾世變化。而在請求合并方面，恐怕由阿里系推出的nginx-concat模塊當(dāng)仁不讓成為了最優(yōu)選擇。而這一切也要求我們前端開發(fā)工程師來完成。

正當(dāng)開發(fā)者們忙于處理如何減少HTTP請求數(shù)，如何提升用戶體驗(yàn)的時(shí)候， Web前端開發(fā)工程師又迎來了新的挑戰(zhàn)。在移動(dòng)互聯(lián)網(wǎng)行業(yè)如日中天的今天，如何實(shí)現(xiàn)離線存儲(chǔ)，理想狀態(tài)是在沒有網(wǎng)絡(luò)的環(huán)境中也能讓我們的WebApp能夠正常的運(yùn)作，當(dāng)然至少要能保證部分內(nèi)容能夠正常訪問。這興許是在傳統(tǒng)互聯(lián)網(wǎng)中無法想象的事情，但是隨著HTML5標(biāo)準(zhǔn)的一步步確定，現(xiàn)代互聯(lián)網(wǎng)前端擁有了localStorage、sessionStorage等本地存儲(chǔ)技術(shù)，甚至擁有了建立本地?cái)?shù)據(jù)庫，通過JS調(diào)用API完成CURD操作的能力，這一切讓離線存儲(chǔ)成為了可能，但這也意味著我們的前端工程師需要掌握更多更復(fù)雜的技能。

行文至此，我們看到了JS在前端開發(fā)中由最初的跑龍?zhí)?，到現(xiàn)在大放異彩的主角光環(huán)。當(dāng)然這遠(yuǎn)遠(yuǎn)不夠，新近推出的ES2015標(biāo)準(zhǔn)（包括Promise+、Generator、Set、Map等等）為JS的未來發(fā)展開拓了廣闊的空間。不僅如此，在表現(xiàn)（css）方面，前端的變化同樣是一日千里。從最初的固定布局，到后來的柵格系統(tǒng)，再到自適應(yīng)、響應(yīng)式布局，一步一步見證著css設(shè)計(jì)的日漸強(qiáng)大。為了更加靈活簡便的進(jìn)行css設(shè)計(jì)，各種css預(yù)處理技術(shù)（LESS、SASS、Stylus）日漸流行，從此前端開發(fā)工程師也可以像寫程序一樣編寫css樣式了。

此外，css3的出現(xiàn)，讓網(wǎng)頁更小更美。圓角、陰影、背景漸變，以及font-face配合網(wǎng)頁圖標(biāo)字體，讓網(wǎng)頁中圖標(biāo)資源的使用得到了有效控制。過渡、動(dòng)畫，帶給網(wǎng)頁飛一般的流暢體驗(yàn)，將界面層面的動(dòng)畫交給css實(shí)現(xiàn)，讓JS可以更專注的完成業(yè)務(wù)邏輯處理。其良好用戶體驗(yàn)卻不兼容陳舊瀏覽器（例如：IE6等）的特性，也間接成為了陳舊瀏覽器淡出舞臺(tái)的催化劑。

最近剛了解到一個(gè)“合久必分，分久必合”的前端問題。記得以前為了高效利用瀏覽器并發(fā)，許多大公司選擇提供多個(gè)圖片資源域名（諸如：img1.alicdn.com、img2.alicdn.com等），但是，如今移動(dòng)Web肆虐，無線性能優(yōu)化又提出了“域名收斂”的概念，現(xiàn)在淘寶的圖片似乎只剩下了gw.alicdn.com一個(gè)圖片域名，這也許歸功于HTTPDNS。誰知道多年以后又會(huì)是什么樣。

何止這些，當(dāng)今的前端開發(fā)工程師們可謂無所不能。雖然Node.js尚不算前端必備技能，但卻也成為每場前端面試必問的話題。雖然PHP/JAVA等屬于后端編程語言，但卻在每一份前端招聘信息中總會(huì)加上一條“至少熟悉一門后端語言（Node.js/PHP/JAVA等）”。此外，還有諸如Angular、React等新興新型前端框架各領(lǐng)風(fēng)騷。所以，越來越多的高級前端開發(fā)工程師在逐漸演變成全棧工程師，然而我們也不能忽視一些后端開發(fā)人員轉(zhuǎn)做前端從而踏上全棧之路的事實(shí)。

最后，我還想說說時(shí)下熱門話題：Google高級測試工程師——李世乭與谷歌智能機(jī)器人AlphaGo的圍棋人機(jī)大戰(zhàn)正在如火如荼的進(jìn)行。然而，李世乭的落后也證明人工智能必將在未來掀起波濤。那么未來的前端如何與人工智能結(jié)合，這值得我們思考。