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

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

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

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

　　技能二:與設計師的溝通和項目的參與

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

　　技能三:搭建良好的頁(yè)面結構

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

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

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

　　技能五:保障效率

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

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

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

　　技能七:永遠不停止學(xué)習

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