隨著互聯(lián)網(wǎng)快速成為日常工作生活的一部分，對(duì)于從事互聯(lián)網(wǎng)的職業(yè)也有了更加清晰的定位:設(shè)計(jì)，前端開發(fā)，后端，編輯，運(yùn)營等等。在這里我們以前端開發(fā)的人員的角度來看看應(yīng)該掌握哪些技能。

　　大部分人會(huì)很自然地認(rèn)為“頁面的開發(fā)沒什么技術(shù)含量，很簡單”。不僅有這種普遍的認(rèn)知，對(duì)從業(yè)者來說也有很多疑惑:做頁面前端實(shí)現(xiàn)，沒問題;兼容性，小case;圖片集成，一直都在用……還能有什么問題?是不是真的沒什么問題了呢?那么頁面開發(fā)還有哪些要求，還要做些什么，這里面的水有多深，讓我們舀舀看。

　　技能一:繪制原型圖，實(shí)現(xiàn)效果圖

　　優(yōu)秀的前端開發(fā)人員必然熟練掌握一種原型圖設(shè)計(jì)工具，能夠?qū)?gòu)思通過工具繪制成原型圖。同時(shí)能夠?qū)⒃O(shè)計(jì)做出的視覺稿通過頁面代碼的方式表現(xiàn)出來。比如目前*，便捷的原型圖工具M(jìn)ockplus，歷史悠久的Axure等。能完成這兩個(gè)內(nèi)容就可以初步進(jìn)入頁面前端的從業(yè)者行列了，但這就代表著我們可以勝任頁面開發(fā)的工作了?不，才剛剛開始!

　　技能二:與設(shè)計(jì)師的溝通和項(xiàng)目的參與

　　各行各業(yè)溝通很重要，作為前端開發(fā)人員，接觸到的最主要的“客戶”就是項(xiàng)目設(shè)計(jì)師。設(shè)計(jì)師根據(jù)原型圖出視覺稿，在這個(gè)過程中，前端開發(fā)人員需要和設(shè)計(jì)師進(jìn)行某些效果實(shí)現(xiàn)的探討，比如對(duì)低端瀏覽器渲染效率影響，是否可以通過CSS3實(shí)現(xiàn)從而使結(jié)構(gòu)更加清晰，是否能在視覺效果和代碼實(shí)現(xiàn)中尋求平衡。前端開發(fā)有義務(wù)對(duì)開發(fā)出來的頁面穩(wěn)定性和渲染效率負(fù)責(zé)。在很多情況下，項(xiàng)目進(jìn)度要求設(shè)計(jì)與前端開發(fā)同步進(jìn)行，這種情況下就必須盡可能多的參與到項(xiàng)目溝通。

　　技能三:搭建良好的頁面結(jié)構(gòu)

　　在前端開發(fā)中頁面結(jié)構(gòu)的編寫好比蓋房時(shí)的打地基，結(jié)構(gòu)的好壞會(huì)直接影響到代碼的質(zhì)量、JS開發(fā)、后端的開發(fā)以及以后頁面的擴(kuò)展、調(diào)整和迭代。當(dāng)拿到設(shè)計(jì)稿之后不要急于開工，多觀察思考。先分析布局，劃分框架，然后規(guī)劃結(jié)構(gòu)，編寫代碼。

　　技能四:優(yōu)美的代碼

　　隨著web項(xiàng)目功能越來越復(fù)雜，帶來的直接后果就是代碼的體量變得很龐大。如何進(jìn)行協(xié)同開發(fā)和代碼的維護(hù)是從前端開發(fā)開始就要思考的問題。這種情形下需要考慮完善，統(tǒng)一規(guī)劃，養(yǎng)成一個(gè)良好的代碼開發(fā)習(xí)慣。比如:合理的使用標(biāo)簽、良好的注釋、清晰的代碼結(jié)構(gòu)、準(zhǔn)確使用CSS等。優(yōu)美的代碼，清晰的結(jié)構(gòu)能夠?yàn)橄掠伍_發(fā)和協(xié)同開發(fā)降低了不小的溝通成本。

　　技能五:保障效率

　　作為項(xiàng)目開發(fā)中靠前的一環(huán)，前端開發(fā)人員一定要有一個(gè)認(rèn)識(shí):盡早完成為項(xiàng)目后續(xù)進(jìn)展?fàn)幦「嗟臅r(shí)間。“工欲善其事，必先利其器”，除了實(shí)戰(zhàn)經(jīng)驗(yàn)和代碼習(xí)慣的形成可以幫助我們提高效率外，想要提高對(duì)自己開發(fā)的進(jìn)度掌控能力，還需要學(xué)會(huì)使用輔助工具幫助提高頁面開發(fā)的效率，比如使用Less 或 Sass 可以幫助我們拓展和組織CSS，大大提高 CSS的編寫效率增加了可維護(hù)性。多多發(fā)掘一定會(huì)找到最合適自己使用的工具。

　　技能六:針對(duì)服務(wù)器的優(yōu)化

　　頁面開發(fā)也需要了解服務(wù)器的優(yōu)化，盡量減小服務(wù)器負(fù)擔(dān)。比如css sprite 就是一個(gè)典型減小服務(wù)器請(qǐng)求數(shù)的例子，以及對(duì) class 名進(jìn)行了混淆壓縮避免命名過長的冗余;應(yīng)用 base64 減少請(qǐng)求數(shù)量等等措施。這些都是綜合權(quán)衡的結(jié)果，需要考慮各個(gè)方面整體優(yōu)化。因?yàn)楫?dāng)頁面訪問量達(dá)到一定的數(shù)量級(jí)時(shí)，再小的一點(diǎn)優(yōu)化都會(huì)達(dá)到可觀的效果，否則小問題會(huì)帶來大災(zāi)難。

　　技能七:永遠(yuǎn)不停止學(xué)習(xí)

　　這是一個(gè)飛速發(fā)展的時(shí)代，同時(shí)也是充滿機(jī)會(huì)的時(shí)代，HTML5時(shí)代的來臨伴隨著移動(dòng)互聯(lián)網(wǎng)的興起創(chuàng)造了更大的機(jī)會(huì)，還有太多的東西值得我們?nèi)W(xué)習(xí)去發(fā)現(xiàn)。作為一名開發(fā)人員，走在技術(shù)的最前沿永遠(yuǎn)是保持競爭力*的方式。正所謂“唯有高屋建瓴方可水到渠成”。拿蘋果 CEO 在斯坦福演講的一句話“Stay Hungry， Stay Foolish”和大家共勉。