同樣是前端，為何別人那么優(yōu)秀？

　　現(xiàn)在，幾乎整個(gè)互聯(lián)網(wǎng)行業(yè)都缺前端工程師，不僅在剛起步的創(chuàng)業(yè)公司，在上市公司乃至巨頭，這個(gè)問題也一樣存在。沒錯(cuò)，優(yōu)秀的前端工程師簡直比大熊貓還稀少。

　　在國外，前端工程師一樣是需求旺盛、供不應(yīng)求的香餑餑。舉個(gè)例子，根據(jù)indeed.com抓取的數(shù)千家網(wǎng)站的職位顯示：目前前端的熱門崗位——「HTML5」是需求增長最快的開發(fā)崗位，在所有開發(fā)職位中排名第一，MongoDB和iOS緊隨其后位列第二、第三。

　　道理我都懂，可是為什么我還是沒有找到滿意的工作?

　　其實(shí)前端一點(diǎn)也不簡單

　　你一定也和我一樣，認(rèn)為前端開發(fā)是一個(gè)「相對(duì)于其他模塊來說更簡單的領(lǐng)域」，在我心中的前端工程師是這樣的：

　　1、把Photoshop文件、圖片或者線框放進(jìn)一個(gè)網(wǎng)頁;

　　2、偶爾設(shè)計(jì)Photoshop文件、圖片或者線框;

　　3、用JS編程，為網(wǎng)頁制作動(dòng)畫、過渡效果;

　　4、用HTML和CSS編程，確定網(wǎng)頁的內(nèi)容和形式。

　　事實(shí)上，前端工程師是這樣的：

　　1、在設(shè)計(jì)師和工程師之間創(chuàng)建可視化的語言;

　　2、用可視化的設(shè)計(jì)，定義一組代表內(nèi)容、品牌和功能的組件;

　　3、為Web應(yīng)用程序的公約、框架、需求、可視化的語言和規(guī)格設(shè)定底線;

　　4、定義Web應(yīng)用程序的設(shè)備、瀏覽器、屏幕、動(dòng)畫的范圍;

　　5、開發(fā)一個(gè)質(zhì)量保證指南來確保品牌忠誠度、代碼質(zhì)量、產(chǎn)品標(biāo)準(zhǔn);

　　6、為Web應(yīng)用程序設(shè)定適當(dāng)?shù)男芯?、字體、標(biāo)題、圖標(biāo)、余糧、填充等等;

　　7、為Web應(yīng)用程序設(shè)定多種分辨率的圖像，設(shè)備為主的實(shí)體模型，同時(shí)維護(hù)設(shè)計(jì)指南;

　　8、用account semantics, accessibility, SEO, schemas ，microformats 標(biāo)記Web應(yīng)用程序;

　　9、用一種友好的，消耗小的，設(shè)備和客戶端感知的方式連接API，獲取內(nèi)容;

　　10、開發(fā)客戶端代碼來顯示流暢的動(dòng)畫、過渡、延遲加載、交互、應(yīng)用工作流程，大多數(shù)時(shí)間用來考慮漸進(jìn)增強(qiáng)和向后兼容的標(biāo)準(zhǔn);

　　11、保證后臺(tái)連接安全，采取跨地資源共享( CORS )的程序考慮，防止跨站點(diǎn)腳本( XSS)和跨站點(diǎn)請(qǐng)求偽造( CSRF ) ;

　　12、最重要的是，盡管有嚴(yán)格的期限、利益相關(guān)者的要求，以及設(shè)備的限制，無論現(xiàn)在還是將來永遠(yuǎn)是「客戶第一」。

　　為了實(shí)現(xiàn)上述目標(biāo)，前端工程師采用了從可視化到編程的多種工具 ，甚至有時(shí)要照顧市場、 UX 到內(nèi)容tweakes等等。

　　我和優(yōu)秀前端的差距這么大?

　　由于前端工程師的入門門檻非常低，JS、CSS、HTML并不是很難入門掌握的語言，似乎只要花一點(diǎn)時(shí)間，就可以通過網(wǎng)上教程和書本學(xué)會(huì)它，然而我發(fā)現(xiàn)事情并不簡單。

　　我是這樣做的：

　　1、濫用JS庫，因?yàn)閷?shí)際上并不了JS的內(nèi)部(e.g. 一切都用jQuery);

　　2、濫用JS插件，抄別人的代碼哪怕自己根本讀不懂(e.g.jQuery.doParallaxPls.js);

　　3、給Web應(yīng)用程序添加CSS框架，卻只用到CSS/JS的5%，沒有看到任何的需求、設(shè)計(jì)或者比較和評(píng)價(jià);

　　4、認(rèn)為只要添加了CSS框架，網(wǎng)站就可以「有求必應(yīng)」;

　　5、一邊在說著「響應(yīng)式web設(shè)計(jì)」，卻對(duì)服務(wù)器端技術(shù)一無所知;

　　6、用CSS編程時(shí)不管預(yù)處理器、命名規(guī)范等，卻用不合適的selector/ids/magic numbers等;

　　7、忽視表現(xiàn)、內(nèi)存泄露(并不理解內(nèi)存泄露的真正含義)，不會(huì)檢測代碼;

　　8、不會(huì)用指標(biāo)衡量一個(gè)產(chǎn)品，或者這種指標(biāo)旨在自己的電腦、瀏覽器、設(shè)備有效;

　　9、忽視軟件技術(shù)。

　　入門容易精通難，計(jì)算機(jī)和軟件的基礎(chǔ)對(duì)JS的使用或?yàn)g覽器編程都非常重要。web可能是最有影響力的平臺(tái)和環(huán)境之一，在那里執(zhí)行的程序必須被小心對(duì)待。一位優(yōu)秀的前端工程師不僅要考慮web技術(shù)和語言，并且還要了解所有不同的組件、系統(tǒng)和概念。

　　優(yōu)秀的前端工程師是這樣做的(這才是市場急需的前端)：

　　1、DNS解析、使用CDN和關(guān)于multiple Hostnames as part of resources request.

　　2、HTTP Headers (Expires, Cache-Control, If-Modified-Since)

　　3、Steve Souders的所有規(guī)則(High Performance Websites)

　　4、如何解決PageSpeed, YSlow, Chrome Dev Tools Audit, Chrome Dev Tools Timeline顯示的所有問題;

　　5、何時(shí)把任務(wù)傳到服務(wù)器和客戶端;

　　6、緩存，預(yù)取和負(fù)荷技術(shù)的使用;

　　7、Native JS，知道何時(shí)從頭開始做，何時(shí)查找別人的代碼，同時(shí)可以評(píng)估這樣做的優(yōu)缺點(diǎn);

　　8、modern MVC Javascript libraries (e.g. AngularJS, EmberJS, ReactJS), graphic libraries (e.g. D3, SnapSVG), DOM manipulation libraries (e.g. jQuery, Zepto), lazy loading or package management libraries (e.g. RequireJS, CommonJS), task managers (e.g. Grunt, Gulp), package managers (e.g. Bower, Componentjs) and testing (e.g. Protractor, Selenium)的相關(guān)知識(shí)和用法;

　　9、CSS標(biāo)準(zhǔn)、modern conventions、 strategies (e.g. BEM, SMACSS, OOCSS)的知識(shí)和用法;

　　10、JS的電腦知識(shí)(內(nèi)存管理，單線程的性質(zhì)，垃圾收集算法，超時(shí)，范圍，提升，模式)

　　換句話說，如果說精通HTML+CSS+JS，了解后端知識(shí)，只是60分的合格前端;那么要想成為受追捧、拿高薪的80分優(yōu)秀前端，要對(duì)業(yè)務(wù)需求和、架構(gòu)設(shè)計(jì)有真正的運(yùn)用;而100分的頂級(jí)前端，則必須要能夠兼顧技術(shù)和設(shè)計(jì)，更接近「以前端開發(fā)為主的全棧工程師」了。

　　缺前端是假的，缺優(yōu)秀前端是真的!!!

作者：傳智播客前端與移動(dòng)開發(fā)培訓(xùn)學(xué)院

首發(fā)：http://web.itcast.cn