但凡從事互聯網的人基本都會寫幾行 html，用過 Word 的人用 Dreamweaver 也能作出規整的頁面，因此大部分人會很天然地認爲「頁面的開發沒什麼技術含量，很簡單」。不只有這種廣泛的認知，對從業者來講也有不少疑惑：作頁面前端實 現，沒問題;兼容性，小 case;圖片集成，一直都在用……還能有什麼問題?瓶頸啊、天花板啊、轉型啊、出路啊就在從業者中普遍討論。是否是真的沒什麼問題了呢?網易郵箱前端技術中心也設立好幾年了，彷佛有着討論不完的話題，也常常會有一些新的想法讓你們爲之一振。那麼頁面開發還有哪些要求，還要作些什麼，這裏面的水有多深，讓咱們舀舀看。
在不一樣的時期對頁面前端的見解彷佛是多變的。在互聯網早期的時候，小車仍是比房子貴的，燒餅和 粉絲還只是用來吃的，菊花還只是用來泡茶的。javascript
那時的頁面設計風格相對單一，對應的頁面需求比較簡單，而且當時的瀏覽器也基本是 IE6 的天下，javascript 也只是網頁特效的代名詞，HTML 頁面自己沒有引發太多人的關注，彷佛只要能用 div 甚至 table 加 css 輔助把圖片定好位，把頁面內容預留好就 OK 了，而且這種觀念存在了很長一段時間。css
隨着頁面內容的豐富，設計風格的發展，交互複雜性的增長，AJAX 的應用，瀏覽器的更新換代，又讓你們從新對最基本的頁面自己重視起來。而後熱議的就是瀏覽器的兼容性，碰到問題最熱衷的就是滿網絡搜索 hack，順便再罵罵 IE六、7……當這些都作一遍後，彷佛又遇到了瓶頸，又開始尋找出路。咱們就從這個階段開始提及。
1..實現效果圖是最基本的工做
把視覺稿經過頁面代碼的方式表現出來包含了兩個基本訴求：1.可以真實反映視覺稿;2.可以通 過瀏覽器的兼容。這兩個訴求的達成須要咱們有追求細節的態度和必定的頁面功底，能完成這兩個內容就能夠初步進入頁面前端的從業者行列了，但這就表明着咱們 能夠勝任頁面開發的工做了?不，纔剛剛開始!
2.與設計師的溝通和項目的參與
溝通很重要。先拋出幾個問題：咱們有沒有和設計師探討過某些效果對低端瀏覽器渲染效率影響比較大?有沒有探討過部分效果能夠用 CSS3 實現從而使得結構更加簡潔清晰?有沒有在代碼和視覺中尋追求過平衡?頁面前端的開發向基本用戶，編寫的代碼也直接做用在瀏覽器上，咱們有義務對頁面的穩定性和渲染效率負責。咱們也常常碰到項目在整體進度壓力下致使的設計與頁面前端開發同步進行，這時更有必要儘可能多地獲取項目信息，瞭解咱們還要作些什麼，這些能夠幫助咱們充分考慮重用和框架拓展。html
3.良好的頁面結構
頁面結構的編寫比如蓋房的地基建設，其好壞會直接影響到 CSS 代碼的質量、js 開發、後臺開發還會影響到之後的頁面拓展、迭代和頁面調整。拿到視覺稿後，不要忙着動手開始，多觀察思考。先分析佈局，劃分框架，而後規劃結構，編寫代 碼。特別在大型項目中，合理使用模塊化的開發不論從總體進行仍是拓展維護都有至關大的好處。
4.關於 hack
不少同窗在頁面開發時上網搜索最多的就是 hack 了，是否咱們徹底要依賴 hack 來實現頁面兼容性，答案是否認的。你們常常比喻 IE6 向咱們撒了一個謊，結果咱們要再撒一百個謊來圓這個謊。不否定 IE6 常常讓咱們口吐鮮血，但不表明咱們用更多的「謊話」來彌補就能夠問心無愧。大部分狀況下能夠經過變換思路調整 HTML 結構，或使用一些雖然沒法解釋但相對安全的 css 來幹掉 hack。誰都沒法預計使用 hack 何時會讓咱們栽一個大跟頭。好比觸發 layout 或 position:relative 就能夠幫助解決不少 IE6 的問題。
5.優美的代碼
如今不少 web 項目功能複雜，代碼規模也會變得很龐大，如何更好地進行協同開發和維護是咱們面臨的一個問題。須要考慮完善統一的規劃，還有要養成良好的代碼開發習慣纔會在面臨各類狀況時遊刃有餘。翻閱頁面代碼，看到合理的標籤使用、良好的註釋、清晰的代碼結構、用意準確的 css 不只猶如欣賞一個藝術品，更爲下游開發和協同開發下降了不小的溝通成本，咱們有什麼理由不去這麼作呢?舉個反面例子：div 濫用是如今比較典型的一個問題。數數看本身使用的標籤有多少個呢?不一樣的語義都該使用對應的標籤代碼，特別是 HTML5 提供了更豐富的語義化標籤，它們都苦苦地在等待戰場上的衝鋒號，讓咱們去解放它們吧!前端
六、具備企業家的精神
最優秀的開發人員不會是不務正業者。對他們來說，產品的成功不只僅意味着他們的薪水有着落了。由於他們在工做中熱情飽滿，他們是爲了項目有更好的發展而工做，並且會勇往直前。
七、測量兩次，下刀一次。。。但測量不要多於三次
開發人員可能會犯的最糟糕的錯誤之一就是還不知道要幹什麼呢，就一猛子扎到代碼裏去了。當偉大的開發人員跳進代碼裏去的時候，那是由於需求規格說明同他們之前實現過的某種作法十分類似。偉大的程序員在面臨新問題時，他們 會進行思考、計劃和研究。
開發人員當中最最優秀的不會墮入「分析癱瘓者」陷阱。他們懂得要對某些事情當心謹慎（好比涉及錢或我的數據 時），只有這些特殊領域才適合我所說的「要測量三次」。任何超過三次的狀況發生就意味着你在浪費你的時間。
在某個特定的時間點就要中止計劃，開始編碼，而後再看看你的計劃在哪些方面須要進行相應的調整，這一點很是重要。順便說一下，這就是我爲何成爲敏捷方法擁躉的緣由之一。我所知道的最優秀的開發人員在計劃再也不合適或者發現計劃有缺陷時，都會願意將計劃放棄掉。java
HTML5技術人員掌握的內容：
第一階段：前端頁面重構：PC端網站佈局、HTML5+CSS3基礎項目、WebAPP頁面佈局；
第二階段：JavaScript高級程序設計：原生JavaScript交互功能開發、面向對象開發與ES5/ES六、JavaScript工具庫自主研發；
第三階段：PC端全棧項目開發：jQuery經典特效交互開發、HTTP協議，Ajxa進階與後端開發、前端工程化與模塊化應用、PC端網站開發、PC端管理信息系統前端開發；
第四階段：移動端項目開發：Touch端項目、微信場景項目、應用Vue.js開發WebApp項目、應用Ionic開發WebApp項目、應用React.js開發WebApp；
第五階段：混合（Hybrid）開發：各種混合應用開發；
第六階段：NodeJS全棧開發：WebApp後端系統開發。程序員