很多人認(rèn)為學(xué)習(xí)前端開(kāi)發(fā)其實(shí)高中生甚至初中生都可以學(xué)，學(xué)不了C++以及Java才來(lái)學(xué)前端開(kāi)發(fā)，在他們的眼中前端開(kāi)發(fā)就是網(wǎng)站制作的初級(jí)技能，沒(méi)有什么技術(shù)含量，隨便拿個(gè)Dreamweaver拖拖拉拉就是一個(gè)網(wǎng)頁(yè)出來(lái)。

這不是前端開(kāi)發(fā)！

嚴(yán)格來(lái)說(shuō)，上面的觀點(diǎn)也只能是一個(gè)網(wǎng)頁(yè)設(shè)計(jì)的一個(gè)美工內(nèi)容，根本就不會(huì)涉及性能，框架，腳本等待問(wèn)題，所以也談不上是前端開(kāi)發(fā)者。那么前端開(kāi)發(fā)到目前為止有沒(méi)有一個(gè)明確的定義呢？有的！下面給出一個(gè)前端開(kāi)發(fā)工程師需要掌握的技能表。

前端開(kāi)發(fā)工程師不僅僅需要掌握HTML+CSS+JS,還需要長(zhǎng)時(shí)間的去了解，積累，測(cè)試各種主流的瀏覽器兼容問(wèn)題，HACK技術(shù)，熟悉各種框架，做SEO等等。

而前端開(kāi)發(fā)的性能優(yōu)化往往是后臺(tái)的專屬，但是作為前端開(kāi)發(fā)的性能是極其的重要的。一個(gè)優(yōu)秀的前端開(kāi)發(fā)工程師寫出來(lái)的代碼能夠讓服務(wù)器壓力小，承載能力翻倍，請(qǐng)求次數(shù)更少，合理的布局等等，這是一個(gè)普通的前端開(kāi)發(fā)人員所做不到的。

我們從嗷嗷的介紹中就清楚，一個(gè)優(yōu)秀的前端開(kāi)發(fā)者，除了掌握前端開(kāi)發(fā)的相關(guān)技能，對(duì)產(chǎn)品，后臺(tái)，設(shè)計(jì)以及項(xiàng)目管理都需要了解的。一專多長(zhǎng)，這才是前端開(kāi)發(fā)人員的最終需求。下面給出一張圖片，詳細(xì)的解釋了前端開(kāi)發(fā)如何去一轉(zhuǎn)多長(zhǎng)。

做前端，先做“產(chǎn)品”！

對(duì)于一些交互設(shè)計(jì)，內(nèi)容布局，良好的客戶體驗(yàn)，往往關(guān)系著網(wǎng)站的成敗。所以，一個(gè)好的頁(yè)面，要從如何去做好這個(gè)產(chǎn)品開(kāi)始，從做產(chǎn)品上掌握并提高客戶的體驗(yàn)。比如我們?cè)?1CTO的云計(jì)算架構(gòu)師峰會(huì)的購(gòu)票頁(yè)面里面填寫了一個(gè)錯(cuò)誤的郵箱，網(wǎng)站就能即時(shí)反饋輸入錯(cuò)誤的信息。如圖：

當(dāng)然還有一些彈出提示層和cookie的記錄等等，只要把客戶的需求做好了，那么你這個(gè)“產(chǎn)品”就是成功的！

淘寶前端專家嗷嗷也是從設(shè)計(jì)，產(chǎn)品以及后臺(tái)開(kāi)始，他認(rèn)為，從事前端開(kāi)發(fā)在不同的階段可能你需要了解到一些知識(shí)也不一樣，比如你想深入了解后端的一些東西，那你如果作為一名前端的，所以你了解的不夠多也不夠深入。或者是即使你了解到的只是片面，不知道他們?yōu)槭裁催@么做。你只有整個(gè)人切過(guò)去的時(shí)候才知道那你就可以比較深入的了解他們?yōu)槭裁催@么做，這樣做有什么好處。然后回過(guò)來(lái)的時(shí)候你就會(huì)把這些偷來(lái)匯總應(yīng)用。

現(xiàn)在國(guó)內(nèi)的前端分很多種，像淘寶的前端現(xiàn)階段可能稍微純前端一種，像我以前我在有些公司呆過(guò)，前端他有寫一些后端開(kāi)發(fā)的東西，這些只是一個(gè)名字而已，可能跟自己的職者在不同的公司下區(qū)分還不一樣。

做前端，性能優(yōu)化是重中之重！

性能優(yōu)化這塊往往是很多剛剛踏入前端開(kāi)發(fā)人員忽略的問(wèn)題，一個(gè)好的前端性能優(yōu)化對(duì)于用戶體驗(yàn)也是有著非常大的影響。那么，對(duì)于剛剛踏入前端的朋友，嗷嗷也給了一些建議。

嗷嗷認(rèn)為，對(duì)于剛進(jìn)入前端的同學(xué)是比較幸運(yùn)的，因?yàn)楝F(xiàn)在已經(jīng)有一些大量的經(jīng)驗(yàn)，方法，優(yōu)化等等。對(duì)于剛剛?cè)腴T的時(shí)候，認(rèn)真學(xué)習(xí)這些東西已經(jīng)足夠了，雖然這些東西比較通用，可能對(duì)于某些業(yè)務(wù)不具備非常好的優(yōu)化，但對(duì)于入門的話用利用這些來(lái)了解為什么，比如這些東西為什么這樣做會(huì)更好，了解這些信息的時(shí)候，這樣你的能力就會(huì)提升了。當(dāng)你了解這些信息的時(shí)候你就會(huì)針對(duì)業(yè)務(wù)做一些個(gè)性化的定制或者處理。

對(duì)于前端性能的優(yōu)化規(guī)范，嗷嗷在這里強(qiáng)調(diào)了網(wǎng)站性能優(yōu)化的34條黃金法則，我們稱之為雅虎軍規(guī)，但也不能說(shuō)是規(guī)范，這只是一個(gè)建議。但不同的公司都有著不同的背景會(huì)導(dǎo)致每個(gè)公司都會(huì)加上自己的一些特殊的東西。所以讓人感覺(jué)有很多，每個(gè)人出來(lái)講都不一樣了。其實(shí)最基礎(chǔ)的我還是覺(jué)得雅虎軍規(guī)，就是前人的方法總結(jié)了，可能由于時(shí)代在變，有些方案也會(huì)發(fā)生變化，所以要自己再去深入研究。

而雅虎現(xiàn)在前端沒(méi)有以前那么好，就是雅虎輝煌的時(shí)候很多人都去看看人家是怎么做的。現(xiàn)在雅虎就沒(méi)有像以前那么重視了，或者是由于公司的一些原因。我們可能也不是太了解，但是他們?cè)?jīng)留下那些經(jīng)驗(yàn)是非常好的。

性能和視覺(jué)效果，如何解決矛盾？

在前端開(kāi)發(fā)商性能和視覺(jué)效果往往是同時(shí)存在的，那么魚雨熊掌能否兼得呢？嗷嗷認(rèn)為這很正常。比如設(shè)計(jì)師喜歡用圖，因?yàn)閳D能更好的體現(xiàn)出UI效果，但是這些圖要在客戶端呈現(xiàn)的時(shí)候，肯定需要下載花費(fèi)時(shí)間的，等待的時(shí)候讓你覺(jué)得性能變差了，但這也不是完成不能解決的。一些方案比如我們現(xiàn)在利用CSS技術(shù)把幾個(gè)圖合成一個(gè)，盡量控制它的請(qǐng)求數(shù)。也有一些我們比較推薦的是方案，比如我們用一些新技術(shù)，IE6這種它不支持的，那我們就可以跟設(shè)計(jì)帥說(shuō)那我們?cè)诤玫臑g覽器中就做出好的效果，低版本的瀏覽器達(dá)到可用的效果就可以，消耗又少很多。這樣就盡量找個(gè)平衡點(diǎn)，不能這個(gè)不能做，那個(gè)不能做。

當(dāng)然還有緩存的合理設(shè)置和資源的合并，合理的緩存設(shè)置以及減少外部的腳本和樣式能夠大大的減少HTTP的請(qǐng)求數(shù)，進(jìn)而提升網(wǎng)站的瀏覽速度。也就是說(shuō)，緩存越多越好，外部資源越少越好。

遇困難，如何去解決？

無(wú)論是做前端的性能會(huì)遇到問(wèn)題，在生活中的每件事情都不見(jiàn)得是一帆風(fēng)順的。問(wèn)題是，遇到問(wèn)題我們應(yīng)該如何去解決！

嗷嗷也認(rèn)為，困難肯定是有的，因?yàn)橹耙擦私饬饲岸撕蠖烁鞣矫嫦嚓P(guān)的知識(shí)，所以在做平臺(tái)的時(shí)候，像搭建一些基礎(chǔ)平臺(tái)，也遇過(guò)一些困難。自己可以去解決一些問(wèn)題，當(dāng)再取大規(guī)模數(shù)據(jù)的時(shí)候很麻煩，同事也給了很多的幫助。對(duì)于自己我要求可能也比較高，很多麻煩也有個(gè)時(shí)間差，對(duì)于自己了解會(huì)做的時(shí)候很快就可以把原型各個(gè)方面處理好。

在國(guó)內(nèi)前端開(kāi)發(fā)這塊的發(fā)展還是比較慢的，其實(shí)做出的東西大部分遇到的問(wèn)題在國(guó)外都解決了，或者是有些解決方案。那么我們現(xiàn)在更重要的事把各種解決方案混合在一起，大家互相幫助，互相借鑒才是解決困難的關(guān)鍵！

在借鑒別人解決方法的技巧后，嗷嗷還給了朋友的兩點(diǎn)建議:首先，你基礎(chǔ)知識(shí)要扎實(shí)，如果你知識(shí)不扎實(shí)的情況下去模仿其他人的一些所謂的技巧不一定適用，可能對(duì)你還有反作用，而且你還沒(méi)有了解他的利弊。然后，我覺(jué)得在你的基礎(chǔ)知識(shí)扎實(shí)了以后，才可以去嘗試別人的一些相關(guān)技巧，就能夠把控得住。