但(dàn)凡從事互聯網的人(rén)基本都會(huì)寫幾行(xíng)html，用過Word的人(rén)用Dreamweaver也能做(zuò)出規整的頁面，所以大(dà)部分人(rén)會(huì)很(hěn)自然地認為(wèi)“頁面的開(kāi)發沒什麽技(jì)術(shù)含量，很(hěn)簡單”。不僅有(yǒu)這種普遍的認知，對從業者來(lái)說也有(yǒu)很(hěn)多(duō)疑惑：做(zuò)頁面前端實現，沒問題；兼容性，小(xiǎo)case；圖片集成，一直都在用...還(hái)能有(yǒu)什麽問題？瓶頸啊、天花(huā)闆啊、轉型啊、出路啊就在從業者中廣泛討(tǎo)論。是不是真的沒什麽問題了呢？網易郵箱前端技(jì)術(shù)中心也設立好幾年了，似乎有(yǒu)着討(tǎo)論不完的話(huà)題，也經常會(huì)有(yǒu)一些(xiē)新的想法讓大(dà)家(jiā)為(wèi)之一振。那(nà)麽頁面開(kāi)發還(hái)有(yǒu)哪些(xiē)要求，還(hái)要做(zuò)些(xiē)什麽，這裏面的水(shuǐ)有(yǒu)多(duō)深，讓我們舀舀看。

在不同的時(shí)期對頁面前端的看法似乎是多(duō)變的。在互聯網早期的時(shí)候，小(xiǎo)車(chē)還(hái)是比房(fáng)子貴的，燒餅和(hé)粉絲還(hái)隻是用來(lái)吃(chī)的，菊花(huā)還(hái)隻是用來(lái)泡茶的。那(nà)時(shí)的頁面設計(jì)風格相對單一，對應的頁面需求比較簡單，并且當時(shí)的浏覽器(qì)也基本是IE6的天下，javascript也隻是網頁特效的代名詞，HTML頁面本身沒有(yǒu)引起太多(duō)人(rén)的關注，似乎隻要能用div甚至table加css輔助把圖片定好位，把頁面內(nèi)容預留好就OK了，并且這種觀念存在了很(hěn)長一段時(shí)間(jiān)。随着頁面內(nèi)容的豐富，設計(jì)風格的發展，交互複雜性的增加，AJAX的應用，浏覽器(qì)的更新換代，又讓大(dà)家(jiā)重新對最基本的頁面本身重視(shì)起來(lái)。然後熱議的就是浏覽器(qì)的兼容性，碰到問題最熱衷的就是滿網絡搜索hack，順便再罵罵IE6、7……當這些(xiē)都做(zuò)一遍後，似乎又遇到了瓶頸，又開(kāi)始尋找出路。我們就從這個(gè)階段開(kāi)始說起。

實現效果圖是最基本的工作(zuò)

把視(shì)覺稿通(tōng)過頁面代碼的方式表現出來(lái)包含了兩個(gè)基本訴求：1. 能夠真實反映視(shì)覺稿；2. 能夠通(tōng)過浏覽器(qì)的兼容。這兩個(gè)訴求的達成需要我們有(yǒu)追求細節的态度和(hé)一定的頁面功底，能完成這兩個(gè)內(nèi)容就可(kě)以初步進入頁面前端的從業者行(xíng)列了，但(dàn)這就代表着我們可(kě)以勝任頁面開(kāi)發的工作(zuò)了？不，才剛剛開(kāi)始！

與設計(jì)師(shī)的溝通(tōng)和(hé)項目的參與

溝通(tōng)很(hěn)重要。先抛出幾個(gè)問題：我們有(yǒu)沒有(yǒu)和(hé)設計(jì)師(shī)探討(tǎo)過某些(xiē)效果對低(dī)端浏覽器(qì)渲染效率影(yǐng)響比較大(dà)？有(yǒu)沒有(yǒu)探討(tǎo)過部分效果可(kě)以用CSS3實現從而使得(de)結構更加簡潔清晰？有(yǒu)沒有(yǒu)在代碼和(hé)視(shì)覺中尋追求過平衡？頁面前端的開(kāi)發向基本用戶，編寫的代碼也直接作(zuò)用在浏覽器(qì)上(shàng)，我們有(yǒu)義務對頁面的穩定性和(hé)渲染效率負責。我們也經常碰到項目在總體(tǐ)進度壓力下導緻的設計(jì)與頁面前端開(kāi)發同步進行(xíng)，這時(shí)更有(yǒu)必要盡量多(duō)地獲取項目信息，了解我們還(hái)要做(zuò)些(xiē)什麽，這些(xiē)可(kě)以幫助我們充分考慮重用和(hé)框架拓展。

良好的頁面結構

頁面結構的編寫好比蓋房(fáng)的地基建設，其好壞會(huì)直接影(yǐng)響到CSS代碼的質量、js開(kāi)發、後台開(kāi)發還(hái)會(huì)影(yǐng)響到以後的頁面拓展、叠代和(hé)頁面調整。拿(ná)到視(shì)覺稿後，不要忙着動手開(kāi)始，多(duō)觀察思考。先分析布局，劃分框架，然後規劃結構，編寫代碼。特别在大(dà)型項目中，合理(lǐ)使用模塊化的開(kāi)發不論從整體(tǐ)進行(xíng)還(hái)是拓展維護都有(yǒu)相當大(dà)的好處。

關于hack

很(hěn)多(duō)同學在頁面開(kāi)發時(shí)上(shàng)網搜索最多(duō)的就是hack了，是否我們完全要依賴hack來(lái)實現頁面兼容性，答(dá)案是否定的。大(dà)家(jiā)經常比喻IE6向我們撒了一個(gè)謊，結果我們要再撒一百個(gè)謊來(lái)圓這個(gè)謊。不否認IE6經常讓我們口吐鮮血，但(dàn)不代表我們用更多(duō)的“謊言”來(lái)彌補就可(kě)以心安理(lǐ)得(de)。大(dà)部分情況下可(kě)以通(tōng)過變換思路調整HTML結構，或使用一些(xiē)雖然無法解釋但(dàn)相對安全的css來(lái)幹掉hack。誰都無法預計(jì)使用hack什麽時(shí)候會(huì)讓我們栽一個(gè)大(dà)跟頭。比如觸發layout或position:relative就可(kě)以幫助解決很(hěn)多(duō)IE6的問題。

優美的代碼

現在很(hěn)多(duō)web項目功能複雜，代碼規模也會(huì)變得(de)很(hěn)龐大(dà)，如何更好地進行(xíng)協同開(kāi)發和(hé)維護是我們面臨的一個(gè)問題。需要考慮完善統一的規劃，還(hái)有(yǒu)要養成良好的代碼開(kāi)發習慣才會(huì)在面臨各種情況時(shí)遊刃有(yǒu)餘。翻閱頁面代碼，看到合理(lǐ)的标簽使用、良好的注釋、清晰的代碼結構、用意準确的css，不僅猶如欣賞一個(gè)藝術(shù)品，更為(wèi)下遊開(kāi)發和(hé)協同開(kāi)發降低(dī)了不小(xiǎo)的溝通(tōng)成本，我們有(yǒu)什麽理(lǐ)由不去這麽做(zuò)呢？舉個(gè)反面例子：div濫用是現在比較典型的一個(gè)問題。數(shù)數(shù)看自己使用的标簽有(yǒu)多(duō)少(shǎo)個(gè)呢？不同的語義都該使用對應的标簽代碼，特别是HTML5提供了更豐富的語義化标簽，它們都苦苦地在等待戰場(chǎng)上(shàng)的沖鋒号，讓我們去解放它們吧(ba)！

無障礙頁面開(kāi)發

可(kě)訪問性與易用性是非常主觀且人(rén)性化的東西。普通(tōng)人(rén)看上(shàng)去上(shàng)完美呈現的頁面在特殊群體(tǐ)中不一定顯得(de)那(nà)麽貼心。當盲人(rén)用讀屏軟件在頁面某個(gè)區(qū)域內(nèi)陷入循環時(shí)，我們應該感到內(nèi)疚。隻能說目前國內(nèi)的網站(zhàn)對此的重視(shì)程度還(hái)遠遠不夠，這就需要我們共同努力，讓更多(duō)的人(rén)感受到我們的熱情。

保障效率

作(zuò)為(wèi)項目開(kāi)發中比較靠前的一環，頁面開(kāi)發可(kě)能需要盡早完成為(wèi)項目争取時(shí)間(jiān)，這就需要我們盡可(kě)能地提高(gāo)效率。“工欲善其事，必先利其器(qì)”，除了實戰經驗和(hé)代碼習慣的形成可(kě)以幫助我們提高(gāo)效率外，想要提高(gāo)對自己開(kāi)發的進度掌控能力，還(hái)有(yǒu)很(hěn)多(duō)輔助工具可(kě)以幫助我們進行(xíng)頁面開(kāi)發。比如使用Less或Sass可(kě)以幫助我們拓展和(hé)組織CSS，大(dà)大(dà)提高(gāo)CSS的編寫效率，增加了可(kě)維護性。比如可(kě)以通(tōng)過zen coding的自動完成和(hé)自定義代碼塊讓你(nǐ)可(kě)以劍指如飛。甚至還(hái)見過通(tōng)過自定義輸入法的代碼塊關鍵字來(lái)提升開(kāi)發速度的。多(duō)多(duō)發掘，一定會(huì)找到最合适自己使用的工具。

針對服務器(qì)的優化

頁面開(kāi)發也需要了解服務器(qì)的優化，盡量減小(xiǎo)服務器(qì)負擔。比如css sprite就是一個(gè)典型減小(xiǎo)服務器(qì)請(qǐng)求數(shù)的例子。在網易郵箱的頁面前端開(kāi)發中大(dà)家(jiā)不停地在做(zuò)着各種優化，比如一直在尋求文件大(dà)小(xiǎo)與服務器(qì)請(qǐng)求數(shù)的平衡；為(wèi)了盡可(kě)能提高(gāo)緩存利用率采用了補丁升級；對class名進行(xíng)了混淆壓縮避免命名過長的冗餘；應用base64減少(shǎo)請(qǐng)求數(shù)量等等措施。這些(xiē)都是綜合權衡的結果，需要考慮各個(gè)方面整體(tǐ)優化。因為(wèi)當頁面訪問量達到一定的數(shù)量級時(shí)，再小(xiǎo)的一點優化都會(huì)達到可(kě)觀的效果，再小(xiǎo)的問題都可(kě)能會(huì)形成巨大(dà)的災難。

擁抱HTML5

這是一個(gè)充滿機會(huì)的時(shí)代，HTML5時(shí)代的來(lái)臨伴随着移動互聯網的興起創造了更大(dà)的機會(huì)，還(hái)有(yǒu)太多(duō)的東西值得(de)我們去學習去發現。HTML5提供了豐富的JS API接口，需要我們去研究；CSS3的絢麗(lì)吸引了足夠多(duō)的眼球，需要我們去研究；移動設備上(shàng)如何開(kāi)發更加适配的頁面，需要我們去研究……

Stay Hungry, Stay Foolish

水(shuǐ)是越舀越多(duō)了，卻發現原來(lái)下面還(hái)深不見底，上(shàng)面的內(nèi)容越是深入研究就越會(huì)發現更多(duō)山(shān)川需要翻越。保持饑餓狀态，用眼睛去努力發現發掘，不斷豐富技(jì)能才能找到定位，突破瓶頸，正所謂“唯有(yǒu)高(gāo)屋建瓴方可(kě)水(shuǐ)到渠成”。形成本文是因為(wèi)之前和(hé)同行(xíng)討(tǎo)論到瓶頸的問題，想給自己，給頁面前端的同學一起找找定位，梳理(lǐ)一下思路。拿(ná)蘋果CEO在斯坦福演講的一句話(huà)“Stay Hungry, Stay Foolish”和(hé)大(dà)家(jiā)共勉。