怎樣成長為一個優秀的 Web 前端開發工程師？

---

1. 多寫。很多問題都是積累得來的。寫了，遇到了，才能去真正理解解決方案，才會隨著自己的不斷成長而有進步。別人問我為什麼知道那麼多 CSS 兼容解決方案，為什麼一看就出的時候，我只能告訴他，我寫了 20 幾個 WordPress 主題。-，-

2. 看書。看 BLOG 或者一些網上的教程，都很難讓你全面理解一個東西的。堅持看書，至少前端相關的語言都看一本。CSS 的推薦 《精通CSS》，JS 推薦 《Javascript 高級程序設計》現在都是第 2 版了。

3. 讀 BLOG。最後你會發現，很多東西大家都會。但只有某些人才解決得了某些細節性的東西，這些人就是我們所謂的高手。很大牛在 BLOG 不會寫一些簡單的 List, 而是針對某個問題深入研究。這時看 BLOG 對於進階非常有幫助。

4. 去學一門後端語言。怎麼說呢，實際用到會很少。但會很有利於一些問題的理解。比如 Ajax。還有 HTML5 中像 Web sockets、post message 之類的 API。

5. 去用很多產品，至少去愛一個產品。你不止是一個前端，你還應該是一個設計者，去用很多產品，你才會發現技術為什麼有用，去愛一個產品，你才會把技術用得更好。

好吧，這是我的個人看法。一個法學院畢業自學前端的別人面前的專業前端攻城師的做法。

---

以下是Nicholas C. Zakas之前一篇博文《What makes a good front end engineer?》的譯文，僅供大家參考。

原博文地址：http://www.nczonline.net/blog/2007/08/15/what-makes-a-good-front-end-engineer/

Nicholas C. Zakas談怎樣才能成為優秀的前端工程師：

昨天，我負責了Yahoo!公司組織的一次面試活動，感觸頗深的是其中的應聘者提問環節。我得說自己對應聘者們提出的大多數問題都相當失望。我希望聽到一些對在Yahoo！工作充滿激情的問題。在昨天的應聘者中，只有一個人的問題是我認為最好的，那個人問我：「你覺得怎麼才能成為優秀的前端工程師？」我覺得很有必要把這個問題從面試房間里拿出來討論一下。

首先，前端工程師必須得掌握HTML、CSS和JavaScript。只懂其中一個或兩個還不行，你必須對這三門語言都很熟悉。也不是說必須對這三門語言都非常精通，但你至少要能夠運用它們完成大多數任務，而無需頻繁地尋求別人的幫助。

優秀的前端工程師應該具備快速學習能力。推動Web發展的技術並不是靜止不動的，沒錯吧？我甚至可以說這些技術幾乎每天都在變化，如果沒有快速學習能力，你就跟不上Web發展的步伐。你必須不斷提升自己，不斷學習新技術、新模式；僅僅依靠今天的知識無法適應未來。Web的明天與今天必將有天壤之別，而你的工作就是要搞清楚如何通過自己的Web應用程序來體現這種翻天覆地的變化。

計算機科學這個大門類下面的許多分支在人們眼中實際上都不外乎科學。但是，我們所說的前端不是什麼科學，而是藝術。藝術家不僅要掌握謀生的技術，還要懂得如何運用。對同一個問題的解決方案在這種情況適用，在另一種情況下可能就不適用。對Web應用程序的前端而言，解決同一問題的方案經常會有很多。沒有哪個方案是錯的，但其中確實有一些是更合適的。優秀的前端工程師應該知道在什麼情況下使用哪種方案更合適，而在什麼情況下應該重新選擇。

優秀的前端工程師需要具備良好的溝通能力，因為你的工作與很多人的工作息息相關。在任何情況下，前端工程師至少都要滿足下列四類客戶的需求。

1. 產品經理——這些是負責策劃應用程序的一群人。他們能夠想像出怎樣通過應用程序來滿足用戶需求，以及怎樣通過他們設計的模式賺到錢（但願如此）。一般來說，這些人追求的是豐富的功能。
2. UI設計師——這些人負責應用程序的視覺設計和交互模擬。他們關心的是用戶對什麼敏感、交互的一貫性以及整體的好用性。他們熱衷於流暢靚麗但並不容易實現的用戶界面。
3. 項目經理——這些人負責實際地運行和維護應用程序。項目管理的主要關注點，無外乎正常運行時間（uptime）——應用程序始終正常可用的時間、性能和截止日期。項目經理追求的目標往往是盡量保持事情的簡單化，以及不在升級更新時引入新問題。
4. 最終用戶——當然是應用程序的主要消費者。儘管我們不會經常與最終用戶打交道，但他們的反饋意見至關重要；沒人想用的應用程序毫無價值。最終用戶要求最多的就是對個人有用的功能，以及競爭性產品所具備的功能。

那麼，前端工程師應該最關注哪些人的意見呢？答案是所有這四類人。優秀的前端工程師必須知道如何平衡這四類人的需求和預期，然後在此基礎上拿出最佳解決方案。由於前端工程師處於與這四類人溝通的交匯點上，因此其溝通能力的重要性不言而喻。如果一個非常酷的新功能因為會影響前端性能，必須刪繁就簡，你怎麼跟產品經理解釋？再比如，假設某個設計如果不改回原方案可能會給應用程序造成負面影響，你怎麼才能說服UI設計師？作為前端工程師，你必須了解每一類人的想法從何而來，必須能拿出所有各方都能接受的解決方案。從某種意義上說，優秀的前端工程師就像是一位大使，需要時刻抱著外交官的心態來應對每一天的工作。

我告誡新來的前端工程師最多的一句話，就是不要在沒有作出評估之前就隨便接受某項任務。你必須始終記住，一定先搞清楚別人到底想讓你幹什麼，不能簡單地接受「這個功能有問題」之類的大概其的說法。而且，你還要確切地知道這個功能或設計的真正意圖何在。「加一個按鈕」之類的任務並不總意味著你最後會加一個按鈕。還可能意味著你會找產品經理，問一問這個按鈕有什麼用處，然後再找UI設計師一塊探討按鈕是不是最佳的交互手段。要成為優秀的前端工程師，這種溝通至關重要。

無論從哪個方面講，我都覺得前端工程師是計算機科學職業領域中最複雜的一個工種。絕大多數傳統的編程思想已經不適用了，為了在多種平台中使用，多種技術都借鑒了大量軟科學的知識和理念。成為優秀前端工程師所要具備的專業技術，涉及到廣闊而複雜的領域，這些領域又會因為你最終必須服務的各方的介入而變得更加複雜。專業技術可能會引領你進入成為前端工程師的大門，但只有運用該技術創造的應用程序以及你跟他人並肩協同的能力，才會真正讓你變得優秀。

---

多寫只是基本，在多寫的基礎上還要思考、總結和提煉。最重要的，我個人認為還是基礎一定要打好，比如說基於CSS的布局技術，大家都很熟悉，很可能會脫口而出浮動和定位，那除此之外還有什麼布局技術？這些布局技術的優劣勢各是什麼？每種布局技術各適合什麼場合不適合什麼場合？

再比如瀏覽器，對瀏覽器渲染問題的總結到位不到位？能否說出已知的瀏覽器兼容性bug和對應的解決方案？以及在此基礎上的為什麼用某種方法就能解決這個問題，背後的原理是什麼？

是的，細節一定要扣透，很多前端的同學只是停留在「我知道遇到這個問題應該怎麼做」，但他們不知道為什麼要這麼做。最簡單的例子就是都知道「overflow:hidden」可以清除浮動挽救高度塌陷，但是什麼原理使得這個方法可以做到這一點呢？或者又是因為瀏覽器如何渲染才導致clear屬性可以清除浮動呢？如果基礎扣得細，這裡會知道設置了clear屬性的元素會通過自動填滿（補足）其上外邊距（margin-top）來實現視覺上的清除浮動，所以設置了clear屬性來清除浮動的元素，如果對其設置margin-top會不起作用。

那再換個問法，什麼情況下margin-top會不起作用呢？答案又能列出多少條？

基礎是非常重要的，因為很多時候出現問題，都會發現是自己對基礎知識了解不清。這不單單是指CSS元素，我發現80%以上的兼容性問題可以追溯到結構代碼寫的不規範不標準。錯誤和冗餘的套嵌易導致很多意料外的問題。

---

前端工程師……跟其他語言方向的程序員相比，前端工程師反而更像是幕後的人，雖然名稱很前端。作為一個入門簡單、進階難的工作，前端是很多程序員的選擇，想要成為優秀的前端，經驗與態度缺一不可，當然必不可少的還有興趣，畢竟興趣才是最好的老師啊。學而不思則罔，思而不學則殆，長路漫漫，要記得背好行囊，做好與知識相伴相知的心理準備~

前端工程師也是程序員的一份子，想成為優秀的前端，確實有難度，學習之前先想想為什麼要學前端，學習前端要耗費多少成本（主要是時間成本，也可以叫機會成本），學習了之後能帶來什麼好處，要學到什麼程度。

當然也必須具備優秀程序員一些共通的特徵。

一、 熱愛，有信念，寫起代碼有激情

二、 優秀的編碼習慣，提高易讀性

三、 較強的學習能力，能夠舉一反三

這些特徵小慕在之前的回答中也提到過，這裡就不再多說啦，咱們還是把重點放在「前端工程師」的專業素養上。

1. 較高的審美水平和交互設計能力

一個沒有任何藝術美感的人，很難去畫出一幅飽含感情的畫作，敲代碼也是同理。有人會感覺這個是UI設計和產品經理的任務，但作為功能的實現者，肯定需要考慮美感和用戶的體驗。

優秀前端寫出的代碼，不僅僅是為了完成任務，為了應付項目經理，而是需要真正站在用戶的角度，把用戶的體驗做到極致。為什麼有的前端完成任務後可以一次通過，而有的則需要不斷修改返工，其實關鍵就在於有沒有站在用戶立場上去考慮一些問題，這一點說到容易做到難。

2. 解決問題能力和調試能力

這兩個能力，需要的是更多的積累。再優秀的程序員也不可能做到代碼永遠不會出現問題，從小白時期遇到問題直接上網搜索，然後慢慢自己根據報錯信息定位問題，到最後終於可以看到問題就知道問題出在哪裡……

「久病成良醫」，在「爬坑」中積累出血淚經驗是每個前端工程師都必經的歷程……除此之外，搭建良好的日誌系統和熟練使用調試工具，對於前端，瀏覽器中的審查元素、測試框架、抓包工具等等，都是前端必備，絕大多數的debug過程都使用以上幾種工具和途徑。

3. 架構水平

優秀的前端開發，必然要有大型項目的開發經驗。他們相對普通前端，對大型代碼有著更好的掌控能力，以及對多變的需求有著從容的應變力和預測能力，從而使整個項目有著很強的擴展性。此外，網站的安全性、穩定性，性能優化，都是一名優秀前端應該考慮到的。

要想成為優秀的前端，肯定是需要一步一步提升的，就算具備了以上優秀前端要擁有的特性，也需要經歷以下兩個階段：入門階段+進階階段。

1）入門階段（看書，看blog）

初期的話，就是看書，小慕不說廢話直接上圖，推薦大家以下兩本：

第一本

《JaveScript高級程序設計》

第二本

《HTML5高級程序設計》

看Blog或者其他基礎學習方面，大家可以來我們慕課網學習，有關前端開發的課程有很多：

【免費課-前端】

【實戰課-前端】

【針對小白入門到進階全方位學習和服務的一體化職業路徑學習體系—前端】

以上大家可以按需選擇學習，當然，表誤會，不是為了廣告而廣告，免費課很多不錯的視頻內容都可以免費學習，付費的實戰和路徑大家看自己是否有需求就好。能讓大家在學習前端的路上不迷茫，少走彎路，不斷進步才是最終目的。筆芯。

2） 進階階段（自學框架、寫後端，掌握後台語言）

前端開發的進階階段是比較難的，想成為一個優秀的前端，需要自學各種框架、寫後端。

（取自和前端朋友聊天的截圖）

現在主流框架是react、 vue、 Angularjs，例如現在大家看到的知乎新版，它的框架就是react（好像說了什麼了不得的事情，哈哈），還有很多網站的後台是vue，不過這些一般人是看不到的。

另外至少還要懂一門後台語言，比如易上手的python，node。如果能一直保持這種學習新技術的狀態，一般兩到三年就能達到中高級水平。所以說實踐很重要（敲黑板），就拿這個前端來說，就是要不停地實踐、學習、踩坑和解決，你才有機會越來越強。

小慕看了一些大家的回答，最喜歡要屬@小虎這個，6年前的答案依舊很有價值，一看就是一位「有故事」的男同學。

雖然小慕洋洋洒洒說了這麼多，但是每個人的情況不一樣，所以這篇回答也不一定就具有很高的普適性。不管如何，為了讓產品經理提幾個需求，也要加油啊！推薦《小魔女學院》里的一段給大家，據說這是程序員和產品經理的日常，哈哈，可以說是非常形象生動了：小魔女學院

附圖一張（露出一個挑事兒的微笑）：

最後，大家一定要知道自己做前端的初衷是什麼、在前端工程師這個領域想要達到怎樣的高度，前面在開頭也有說到。明確目標，砥礪前行。無論學什麼，心態很重要！！！如果，你是抱著學著玩玩，學不會也無所謂，甚至是抗拒的心態來學前端的話，一定學不好前端。前端不是一時半會能學會的。在學習的過程中，會遇到一個個困難。這時，消極的心態會讓你就打退堂鼓，或者三天打魚，兩天晒網，學的還沒忘的快。如果，我們抱著積極主動的心態去學前端。每天都學習一點，進步一點。遇到問題主動的去找解決的辦法，不怨尤人。我相信，你一定可以學好前端，也一定能成長為一個優秀的前端！

以上。

---

多想，其實有很多途徑和方向和出路，能做到一點就足以成為一名高手

---

講下我比較認同的方法學：先從模仿開始，不要閉門造車，然後研究背後的實現，這其中加入自己的理解與思路，最後有整理出自己的一套實現方案

---

本答案是教你如何成為一名專業前端開發工程師的養成指南。在接下來的內容里，我將告訴你想要成為一名前端開發工程師應該學些什麼？怎麼去學？在哪裡學？（都是免費的資源）。最後我還會介紹如何獲得開發的實踐經驗，以及最重要的一點——如何通過寫代碼賺到錢。

原文鏈接：Come on Baby! 你也可以成為Web開發工程師！——Web開發工程師完全成長指南 - 從零學習前端開發 - 知乎專欄
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。

學習HTML基礎

Hypertext Markup Language 超文本標記語言(HTML)用來控制描述現在你在瀏覽器里看到的網頁的內容和布局。從這裡開始，你將會了解到如何創建可以與之交互的 用戶界面。在你掌握了更多的語言之後，現在的所學就會變得尤為重要。

我在下面列出了你需要掌握的有關HTML的基礎知識（都是免費的在線教程，下列教程來自菜鳥教程）：

• 簡介
• 元素
• 標題
• 段落
• 頭部
• 列表
• 鏈接
• 圖像
• 表格
• 表單
• 總結

學習JavaScript基礎

JavaScript是專門針對Web的編程語言，所有的主流瀏覽器（Chrome, Firefox, Safari, IE等）都內置支持JavaScript語言。你之前使用過的所有網站和Web應用也都包含大量的JavaScript代碼。並且現在的JavaScript語言已經擴展到了包括伺服器端、桌面應用、物聯網設備在內的各類平台。

不過這才剛剛開始，你只需要了解一些基礎知識（以下鏈接來自廖雪峰JavaScript教程）：

• 快速入門
• 數據類型和變數
• 數組
• 對象
• 條件判斷
• 循環
• 函數
• DOM瀏覽器對象
• 操作DOM
• JSON
• AJAX
• 變數作用域

學習CSS基礎

CSS 的全稱是層疊樣式表(Cascading Style Sheets)。CSS被用來定義你在HTML中編寫的元素的外觀。跟著MDN上的CSS入門教程學習基礎知識，在這裡學習如何用CSS對網頁布局。

稍微了解一點後端

HTML/JavaScript/CSS都是「Web前端開發」的相關知識。也就是說你目前掌握的語言基本都是在瀏覽器里運行的。是時候看看後端是什麼樣子的了。接下來我們將學習如何寫在伺服器上運行的代碼。你並不需要買一台真正的伺服器回來，你自己的電腦已經足夠強大啦。

有非常多的後端的編程語言，不過既然你已經了解了JavaScript，我推薦你學習NodeJS.NodeJS是一項能夠在伺服器端運行JS代碼的技術。

除此外，你還需要了解一下Express框架和MongoDB.

Express

Express是一個基於NodeJS的Web應用開發框架，用來更方便地同網頁進行請求響應交互。

Mongo DB

Mongo DB是一個資料庫。用來存儲和訪問數據。

在這裡學習Node.js + Express + MongoDB教程。請放心，你並不需要完全精通Node或Mongo，只需要跟著教程讓這個技術棧的應用跑起來就好了。

想要成為一名合格的前端開發工程師，你需要熟練掌握HTML/CSS/客戶端JavaScript.同時你也需要熟練使用一些開發框架。

在開始下面內容的學習之前，確保你已經掌握了HTML基礎知識。

HTML進階

• HTML5教程
• HTML和CSS高級指南

JavaScript進階

為了讓你更深入地了解JavaScrpit，我要推薦一個系列書籍，由Kyle Simpson撰寫的《你不知道的JS》。而且整套書都在Github上開源免費！

• You-Dont-Know-JS on Github
• 你不知道的JavaScript（上卷）
• 你不知道的JavaScript（中卷）

除了這套書以外，MDN的JavaScript參考文檔也會對你非常有用。

掌握了「前端三劍客」（HTML/CSS/JavaScript）固然很重要。但你想真的寫出一些可以賺錢的代碼，還需要熟悉一些框架。

學習jQuery

jQuery是史上最受歡迎的JS庫。雖然一些新近的框架不再依賴jQuery，但假如你想儘快找到一份工作的話，掌握jQuery是十分有必要的。

我推薦你在FreeCodeCamp上學習jQuery。之後你可以在jQuery學習官網上了解更多的內容。

同時也不要忘了收藏jQueryAPI文檔隨時查閱。

學習主流JS框架

框架是為了幫助我們解決開發中經常會遇到的問題而開發出來的。JavaScript的框架數不勝數，我們來看看新近流行的一些JS框架，你也可以通過搜索引擎和招聘網站掌握各類框架的需求信息。

React

React是Facebook為了配合Flux架構開發的一款JS框架。主要用來構建用戶界面。最近一段時間異常的火爆，已經遠遠甩開了AngularJS.所以你還在等什麼：

• React 入門實例教程
• React 教程

Angular 1 2

Angular JS是Google推出的JS框架。剛推出的時候也是紅極一時，Angular適用於開發中大型的Web應用。不過有一點噁心人的是，Google在計劃推出Angular 2版本時，感覺他們有必要完全重寫。結果就導致了1和2用起來感覺完全像是兩個不同的框架。假如你想成為一個Angular專家，你就相當於要同時掌握兩個框架。

• AngularJS 1 教程
• Angular 2 for TypeScript 中文手冊

Vue.js

Vue.js的開發者是尤雨溪。大神也在玩知乎襖。Vue.js是一個用來構築用戶界面的非常輕量的框架，使用非常方便，上手也會很快。並且真的很強大，不會有Angular那麼臃腫，也不像React的JSX那麼變態。所以我很推薦新手從學習Vue.js開始。

• Vue.js中文官網
• 一個簡單的 vue.js 實踐教程

學習Bootstrap

（譯者）學習Bootstrap可以看我之前總結的這篇：

• 有關Bootstrap你想要知道的都在這裡

當然Bootstrap也可以和之前所學的框架協同使用：

• React Bootstrap
• Angular Bootstrap

學習Node.js

相信通過之前的學習你對JavaScript已經有所了解了。NodeJS的出現讓JS在伺服器端運行成為了可能。現在再深入了解一下吧！

• Node.js 教程
• NODESCHOOL

恭喜！掌握了上述內容之後，你已經是一名合格的前端開發工程師了。

我已經學了很多理論知識，但是缺乏實踐經驗。

Github

Github基於版本控制軟體Git建立，是全球最大的開源項目託管網站。你可以在上面儲存、管理、發布你的代碼。Github是你作為一名開發者必須使用的網站。

• GotGitHub

開發個人項目

下面推薦一些你可以嘗試的個人開發項目：

• 使用React、Node.js、MongoDB、Socket.IO開發一個角色投票應用
• Laravel完成一個多用戶的博客系統

FreeCodeCamp上面同樣有著各種各樣的實踐項目，在這裡推薦兩個：

• 創建一個番茄鍾計時器 （純前端）
• 開發一個書籍分享網站 （全棧）

實踐經驗

接下來你需要一些真實的經驗。這意味著你需要與他人協作，參與到真實的項目中來。個人項目自然有其用處，但在找工作時還不夠有說服力。

1.為開源項目做貢獻

Github上面有著成千上萬的開源項目，這些項目中有著許多公開的bug等著你去提供修復。在你的簡歷中加上你為一些知名項目貢獻代碼的事迹，將會是你濃墨重彩的一筆。你可以通過Code Triage來關注你感興趣的項目進展。

2.為你的家人或朋友「打工」

專門為你做生意的朋友或家人開發一款Web應用或者一個網站吧。為他們解決實際的問題，給他們提供幫助。不過在選人之前最好慎重考慮，最好這個人的需求可以在90天左右的時間開發完畢，而且你們倆的關係也最好是比較親近的。不要因為開發中途的一些矛盾搞得你們最後連朋友都沒得做。

3.為非盈利組織工作

這將會是一個非常棒的選擇！為非盈利機構開發Web應用，解決他們的實際問題。你可以在Catch a Fire上找到這樣的項目。另外，如果你通過了FreeCodeCamp的所有挑戰，你也能夠獲得為非盈利機構開發Web項目的機會。

4.出賣勞動力

你可以在網上找一些外包項目來做，為了避免廣告之嫌，譯者在這裡就不推薦國內的網站了，反正一搜一大把。

我現在已經積累了一些實踐經驗了，怎麼才能找到工作呢？

寫一份兒牛X閃閃的簡歷

• 一份優秀的前端開發工程師簡歷是怎麼樣的？
• 程序員簡歷應該怎麼寫？

開發一個在線簡歷網站

開發一個介紹你自己的個人站點！你可以把你之前做過的所有項目都鏈接到上面。說明各個項目都解決了什麼樣的實際問題。這會對你很有幫助！

準備好編程面試

• 前端面試題收集
• Python的面試題
• 一套完整的學習手冊幫助自己準備 Google 的面試

掌握通用的面試技巧

• 面試70問 經典回答
• 程序員面試要準備哪些方面的內容？
• 修改面試前你都做了什麼準備？

出發去找工作吧！

不要妄圖一瞬間就找到你心儀的公司和喜愛的崗位。先找到一份可以寫代碼養活自己的工作再說。等到你積累了更多的經驗，自然也就能邁出下一步了。

我想要成為一名自由職業者！

自己當自己的老闆聽起來是非常爽的。但事實上自由職業並不像想像的那麼輕鬆。在這裡推薦Brennan Dunn寫了許多有關自由職業者的文章：

DoubleYourFreelancing.com

在外國的網站上註冊成為自由職業者對大多數人來說有些不切實際，國內這一塊發展也比較混亂，為了避免廣告之嫌，譯者也就不推薦鏈接了。

我朝著成為一名前端開發者的方向努力了，但我現在感覺力不從心。

我很理解你的心情。這本來就不是一件容易的事情，而且任何口口聲聲說著學前端開發很容易的人自己其實都不怎麼樣，要麼就是想要騙你錢。假如你現在有些不知所措，那麼重新思考一下這些問題：

不忘初心

問問你自己，你甚至可以寫下來！你當初為什麼要決定走上這條路？你的想法仍然沒有改變么？那麼為什麼要停下來呢！？繼續迎難而上吧！

腳踏實地

現在你已經考慮了很多，腦子裡想到了最壞的結果，也期冀最好的願景，還有現實中最可能發生的情況。你完全可以把這些想法都記錄下來。沒有必要畏懼，面對現實，腳踏實地地一步步走下去。

歡迎在評論區分享你的心得體會。

歡迎關注我的專欄 從零學習前端開發

---

作者：phodal
鏈接：前端技能路線詳解：真正的從入門到放棄 - Phodal - 手工藝人 - 知乎專欄
來源：知乎
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。

在完整APP的遷移之後，終於可以好好寫這些內容了。第一篇就是對之前的《前端技能圖譜》進行一些細緻的解釋。當然這些是個人的經驗，所以可存在一些區別，不過總的來說還是差不多的。

入門

在我理解下的基礎知識，就是我們可以寫一些基本的樣式，並能對頁面的元素進行操作。舉例來說，就是我們用Spring和JSP寫了一個博客，然後我們可以用jQuery來對頁面進行一些簡單的操作，並可以調用一些API。因此，我們需要基本的HTML / CSS知識。只是要寫好CSS並不是一件簡單的事，這需要很多實戰經驗。隨後，我們還需要有JavaScript的經驗，要不怎麼做前端呢？

同時，我們還需要對DOM有一些基礎的了解，才能做一些基本的操作，如修改顏色等等。在這種情況下，最簡單的方案就是使用jQuery這樣的工具。不過，如果可以自己操作DOM是再好不過的了。

中級篇

中級篇就更有意思了，現在我們就需要對頁面進行更複雜的操作。Ajax和JSON這兩個技能是必須的，當我們要動態的改變頁面的元素時，我們就需要從遠程獲取最新的數據結果。並且我們也需要提交表單到伺服器，RESTful就是必須要學會的技能。未來我們還需要Fetch API，ReactiveX這些技能。

除此我們還需要掌握好HTML的語義化，像DIV / CSS這也會必須會的技能，我們應該還會使用模板引擎和SCSS / SASS。而這個層面來說，我們開始使用Node.js來完成前端的構建等等的一系列動作，這時候必須學會使用命令行這類工具。並且，在這時候我們已經開始構建單頁面應用了。

高級篇

JavaScript是一門易上手的語言，也充滿了相當多的糟粕的用法。幾年前人們使用CoffeeScript編成成JavaScript來編寫更好的前端代碼，現在人們有了ES6、TypeScript和WebPack來做這些事。儘管現在瀏覽器支持不完善，但是他們是未來。同樣的還有某些CSS3的特性，其對於某些瀏覽器來說也是不支持的。而這些都是基於語言本來說的，要寫好代碼，我們還需要掌握面向對象編程、函數式編程、MVC / MVVM / MV*這些概念。作為一合格的工程師，我們還需要把握好安全性（如跨域），做好 授權（如HTTP Basic、JWT等等）。

工程化

這個標題好像是放錯了，這部分的內容主要都是自動構建的內容。首先，我們需要有基本的構建工具，無論你是使用gulp、grunt，還是只使用npm，這都不重要。重要的是，你可以自動化的完成構建的工具，編譯、靜態代碼分析（JSLint、CSS Lint、TSLint）、對代碼質量進行分析（如Code Climate，可以幫你檢測出代碼中的Bad Smell）、運行代碼中的測試，並生成測試覆蓋率的報告等等。這一切都需要你有一個自動構建的工作流。

兼容性

雖然我們離兼容IE6的時代已越來越遠了，但是我們仍然有相當多的兼容性工作要做。基本的兼容性測試就是跨瀏覽器的測試，即Chrome，IE，Firefox，Safari等等。除此還有在不同的操作系統上對同一瀏覽器的測試，某些情況下可能表現不一致。如不同操作系統的字體大小，可能會導致一些細微的問題。

而隨著移動設備的流行，我們還需要考慮下不同Android版本下的瀏覽器內核的表現不致，有時候還要一下不成器的Windows Phone。除此，還有同一個瀏覽器的不同版本問題，常見於IE。。

前端特定

除了正常的編碼之外，前端還有一些比較有意思的東西，如CSS3和JavaScript動畫。使用Web字體，可惜這個不太適合漢字使用。還有Icon字體，畢竟這種字體是矢量的。不過Icon字體還有一些問題，如瀏覽器對其的抗鋸齒優化，還有一個痛是你得準備四種不同類型的字體文件。因此，產生了一種東西SVG Sprite，在以前這就是CSS Sprite，只是CSS Sprite不能縮放。最後，我們還需要掌握一些基本的圖形和圖表框架的使用。

軟體工程

這一點上和大部分語言的項目一樣，我們需要使用版本管理軟體，如git、svn，又或者是一些內部的工具。總之你肯定要有一個，而不是 2016.07.31.zip這種文件。然後，你還需要一些依賴管理工具，對於那些使用Webpack、Browserify來將代碼編寫成前端代碼的項目來說，npm還是挺好用的。不過就個人來說，對於傳統的項目來說我總覺得bower有些難用。我們還需要模塊化我們的源碼文件，才能使其他人更容易開始項目。

調試

作為一個工程師來說，調試是必備的技能。大部分瀏覽器都自帶有調試工具，他們都不錯——如果你使用過的話。在調試的過程中，直接用Console就可以輸出值、計算值等等。如果你的項目在構建的過程中有一些問題，你就需要debugger這一行代碼了。

在一些調用遠程API的項目里，我們還需要一些更複雜的工具，即抓包工具。在調試移動設備時，像Wireshark、Charles這一類的工具，就可以讓我們看到是否有一些異常的請求。當然在這個時候，還有一個不錯的工具就是像Chrome自帶的遠程設備調試。對於移動網站來說，還要有Responsive視圖。

測試

我遇到的很多前端工程師都是不寫測試的，於是我便把它單獨地抽了出現。對於一個前端項目來說，正常情況下，我們要有單元測試、功能測試，還有要一些UI測試來驗證頁面間是否可以跳轉。對於依賴於第三方服務的應用來說，還要有一個Mock的服務來方便我們測試。如果是前後端分離的項目，我們還需要有集成測試。

性能與優化

要對Web應用進行性能優化，可能不是一件容易的事，有時候我們還知道哪些地方可以優化。這時候人們就可以使用Yahoo的YSlow，或者我最喜歡的Google PageSpeed來檢測頁面的一些問題，如有沒有開啟GZip、有沒有壓縮、合併、Minify JS代碼等等。

我們還應該藉助於NetWork這一類的工具，查看頁面載入時，一些比較漫的資源文件，並對其進行優化。在一些情況下，我們還需要藉助如Chrome的Timline、Profiel等工具來查看可以優化的地方。

設計

前端工程師還需要具備基本的UI技能。多數情況下拿到的只是一張圖，如果是一個完整的頁面，我們就需要快速分割頁面布局。而依賴於不同的頁面布局，如響應式、網格、FlexBox布局也會有不同的設計。而有些時候，我們就需要自己規劃，製作一個基本的線框圖（Wireframe）等等。

SEO

如果以搜索引擎作為流量來源，我們還需要考慮頁面的內容，除非你用的是競爭排名。像Sitemap可能就不是我們考慮的內容，而我們還要考慮很多點。首先，我們需要保證頁面的內容是對於搜索引擎是可見的，並且對應的頁面還要有基本的Title、Description和Keyword。然後在一些關鍵的字體，如欄目標題等等可以用H2之類的大字的地方就不要放過。同時在頁面設計的過程中，我們還需要考慮一些內部鏈接的建設。

它即可以提供頁面的可見度，又可以提高排名。最後，如果你是面向的是Google等支持結構化數據的搜索引擎，你還需要考慮一下MicroData / MicroFormat這一類東西。

原文首發於我的微信公眾號：http://mp.weixin.qq.com/s?__biz=MjM5Mjg4NDMwMA==mid=2652973836idx=1sn=da563bd65667417173e454f85488f17d#rd

---

Web開發高手的學習之路是如何煉成的

如果你已經是一名優秀的Web開發人員，那請路過即可。如果你還是一個準備入行或剛入行的菜鳥，那本文倒值得一讀。要成為一名優秀的Web開發人員，沒有捷徑可走，本文就是為那些還在苦苦尋找學習目標的人編寫的。
　　第一步：學好HTML
　　HTML(超文本標記語言)是網頁的核心，因此你首先應該學好它，不要害怕，HTML很容易學習的，但也很容易誤用，學懂容易要學精還得費點功夫，但學好HTML是成為Web開發人員的基本條件。
　　學習資源：
　　HTML Dog (HTML, CSS, and JavaScript Tutorials, References, and Articles)
　　HTML入門指南 (Dave Raggett"s Introduction to HTML)
　　W3C HTML學習教程 (http://www.w3schools.com/html/)
　　第二步：學好伺服器端腳本語言
　　伺服器端腳本編程也是Web開發人員的基本功之一，你只需挑選一個伺服器端腳本語言，然後學好它，目前流行的伺服器腳本語言有：
　　Java(http://http://www.mengkedu.com/)
　　Python (Welcome to Python.org)
　　Ruby (Ruby Programming Language)
　　第三步：學好SQL
　　要構建動態頁面就必須使用到資料庫，但這麼多資料庫產品，該如何是好呢?別擔心，它們都會遵循標準的SQL原則，學習SQL的資源包括：
　　W3C SQL學習教程 (http://www.w3schools.com/SQl/default.asp)
　　MySQL主頁 (MySQL)
　　SQL維基百科 (SQL)
　　第四步：學好CSS
　　涉及到網頁外觀時，就需要學習CSS了，它可以幫你把網頁做得更美觀。
　　學習資源：
　　HTML Dog (HTML, CSS, and JavaScript Tutorials, References, and Articles)
　　CSS禪意花園 (CSS Zen Garden: The Beauty of CSS Design)已有中文版圖書。
　　第五步：學好JavaScript
　　今天大部分Web開發人員都喜歡使用jQuery(jQuery)，學習JavaScript的基本語法，以及如何使用JavaScript編程將會提高你的技能。
　　學習資源：
http://webmonkey.com上的JavaScript學習資源 (http://www.webmonkey.com/tutorial/JavaScript_Tutorial)
　　W3C JavaScript學習教程 (http://www.w3schools.com/JS/default.asp)
　　第六步：學好正則表達式
　　雖然它並不像其它知識那麼重要，但學習了正則表達式後，如果使用得當將會節省你很多時間，從驗證到高亮顯示它夠能幫到你。
　　第七步：學習一點Unix和Linux的基本知識
　　這並不是必須的，但知道一點Linux命令不會傷害到你，或許你還不知道，大部分Web伺服器都運行在Unix和Linux平台上，如果我是你，我會去學習一些基本的Linux命令的。
　　第八步：了解Web伺服器
　　你不必在這上面花太多精力，但對Apache的基本配置，.htaccess配置技巧有一些掌握的話，將來必定受益，而且這方面的知識學起來也相對容易，不會花多長時間。
　　第九步：熟悉版本控制系統的用法
　　熟悉使用一種優秀的版本控制系統將很有用處，你在實際工作中就會發現精通一種版本控制系統是多麼幸福。
　　第十步：學好Web框架
　　當你掌握了HTML，伺服器端腳本語言，CSS和JavaScript後，就應該找一個Web框架加快你的Web開發速度，使用框架可以節約你很多時間，如果你使用Java，可選的框架有Spring，Hibernate，Mybatis等，Python程序員喜歡使用Django和 webpy，Ruby程序員喜歡使用RoR。
　　怎麼樣，從最簡單的HTML到Web框架，內容還是不少吧，要想精通這裡的每一樣技術，都得下苦功夫才行。
原文說實話忘記在哪裡看到的了 但是還是分享一下吧 我之前看了特意保存的一篇還不錯的

---

一、技術的必須的

作為一名最基礎的前端工程師你必須掌握HTML、CSS和JavaScript。三者必須同時精通，類似我字樣對前端知識一知半解的，一遇到問題就停下工作就四處搜索解決方案的，首先就算不上一個合格的前端人員。像我這樣的如果當了前端工程師那工期肯定是不能保證的。合格的前端工程師第一要學會的就是在沒有任何外來幫助的情況下（包括搜索引擎），能夠完成大多數任務。

以下知識點是作為一個前端工程師必須了解和熟悉的：

• DOM結構——兩個節點之間可能存在哪些關係以及如何在節點之間任意移動。
• DOM操作——怎樣添加、移除、移動、複製、創建和查找節點。
• 事件——怎樣使用事件以及IE和DOM事件模型之間存在哪些主要差別。
• XMLHttpRequest——這是什麼、怎樣完整地執行一次GET請求、怎樣檢測錯誤。
• 嚴格模式與混雜模式——如何觸發這兩種模式，區分它們有何意義。
• 盒模型——外邊距、內邊距和邊框之間的關係，IE &< 8中的盒模型有什麼不同。
• 塊級元素與行內元素——怎麼用CSS控制它們、它們怎樣影響周圍的元素以及你覺得應該如何定義它們的樣式。
• 浮動元素——怎麼使用它們、它們有什麼問題以及怎麼解決這些問題。
• HTML與XHTML——二者有什麼區別，你覺得應該使用哪一個並說出理由。
• JSON——它是什麼、為什麼應該使用它、到底該怎麼使用它，說出實現細節來。

上述這些知識點都應該是你「想都不用想」就知道的東西。除了上述的前端知識，也還需學會至少一門後端編程語言，讓你自己學會如何與後端進行更好的交互。

很多前端工程師對一些庫非常的熟悉，jQuery，Bootstrap等，但是對於庫的熟悉並不能提現你的優秀，整整優秀的是那些理解庫背後的機制，特別是能夠徒手寫出一個自己的庫的人。

真正合格的前端工程師是能實現具體的功能要求，而優秀的前端工程師需要解決的問題是尋找一個最優的解決方案。

二、溝通很重要

優秀的前端工程師需要具備良好的溝通能力，因為你的工作與很多人的工作息息相關。在任何情況下，前端工程師至少都要滿足下列四類客戶的需求。

1. 產品經理——這些是負責策劃應用程序的一群人。他們能夠想像出怎樣通過應用程序來滿足用戶需求，以及怎樣通過他們設計的模式賺到錢（但願如此）。一般來說，這些人追求的是豐富的功能。
2. UI設計師——這些人負責應用程序的視覺設計和交互模擬。他們關心的是用戶對什麼敏感、交互的一貫性以及整體的好用性。他們熱衷於流暢靚麗但並不容易實現的用戶界面。
3. 項目經理——這些人負責實際地運行和維護應用程序。項目管理的主要關注點，無外乎正常運行時間——應用程序始終正常可用的時間、性能和截止日期。項目經理追求的目標往往是盡量保持事情的簡單化，以及不在升級更新時引入新問題。
4. 最終用戶——當然是應用程序的主要消費者。儘管我們不會經常與最終用戶打交道，但他們的反饋意見至關重要；沒人想用的應用程序毫無價值。最終用戶要求最多的就是對個人有用的功能，以及競爭性產品所具備的功能。

不要在沒有作出評估之前就隨便接受某項任務。你必須始終記住，一定先搞清楚別人到底想讓你幹什麼，不能簡單地接受「這個功能有問題」之類的大概其的說法。而且，你還要確切地知道這個功能或設計的真正意圖何在。「加一個按鈕」之類的任務並不總意味著你最後會加一個按鈕。還可能意味著你會找產品經理，問一問這個按鈕有什麼用處，然後再找UI設計師一塊探討按鈕是不是最佳的交互手段。要成為優秀的前端工程師，這種溝通至關重要。

那麼，前端工程師應該最關注哪些人的意見呢？答案是所有這四類人。優秀的前端工程師必須知道如何平衡這四類人的需求和預期，然後在此基礎上拿出最佳解決方案。由於前端工程師處於與這四類人溝通的交匯點上，因此其溝通能力的重要性不言而喻。如果一個非常酷的新功能因為會影響前端性能，必須刪繁就簡，你怎麼跟產品經理解釋？再比如，假設某個設計如果不改回原方案可能會給應用程序造成負面影響，你怎麼才能說服UI設計師？作為前端工程師，你必須了解每一類人的想法從何而來，必須能拿出所有各方都能接受的解決方案。從某種意義上說，優秀的前端工程師就像是一位大使，需要時刻抱著外交官的心態來應對每一天的工作。

專業技術可能會引領你進入成為前端工程師的大門，但只有運用該技術創造的應用程序以及你跟他人並肩協同的能力，才會真正讓你變得優秀。

三、提升無止境

優秀的前端工程師應該具備快速學習能力。推動Web發展的技術並不是靜止不動的，這些技術幾乎每天都在變化，如果沒有快速學習能力，你就跟不上Web發展的步伐。你必須不斷提升自己，不斷學習新技術、新模式；僅僅依靠今天的知識無法適應未來。Web的明天與今天必將有天壤之別，而你的工作就是要搞清楚如何通過自己的Web應用程序來體現這種翻天覆地的變化。

四、前端開發知識架構

• 前端工程師
  • 瀏覽器
    • IE6/7/8/9
    • Firefox
    • Chrome/Safari/Opera
  • 編程語言
    • JavaScript/Node.js
    • JavaScript語言精粹
  • 切頁面
    • HTML/HTML5
    • CSS/CSS3
    • PhotoShop/Paint.net
  • 開發工具
    • IDE
      • VIM/Sublime Text2
      • Notepad++/EditPlus
      • WebStorm
    • 調試工具
      • Firebug/Firecookie
      • YSlow
      • IEDeveloperToolbar/IETester
      • Fiddler
    • 版本管理
      • Git/SVN
      • Github/Bitbucket/Google Code
  • 代碼質量
    • Coding style
      • JSLint/JSHint
      • CSSLint
      • Markup Validation Service
    • 單元測試
      • QUnit/Jasmine
      • Mocha/Should/Chai
    • 自動化測試
      • WebDriver
  • 前端庫/框架
    • jQuery/Underscore/Mootools/Prototype.js
    • YUI3/Dojo/ExtJS
    • Backbone/KnockoutJS/Emberjs
  • 前端標準/規範
    • HTTP1.1
    • ECMAScript3/5
    • W3C/DOM/BOM/XHTML/XML/JSON/JSONP
    • CommonJS/AMD
    • HTML5/CSS3
  • 性能
    • JSPerf
    • YSlow 35 rules
    • PageSpeed
    • HTTPWatch
    • DynaTrace』s Ajax
    • 高性能JavaScript
  • 編程知識儲備
    • 數據結構
    • OOP/AOP
    • 原型鏈/作用域鏈
    • 閉包
    • 函數式編程
    • 設計模式
    • Javascript Tips
  • 部署流程
    • 壓縮合併
      • YUI Compressor
      • Google Clousure Complier
      • CleanCSS/UglifyJS
    • 文檔輸出
      • JSDoc
      • Dox/Doxmate
    • 項目構建工具
      • make/Ant
      • GYP
      • Grunt
      • Yeoman
  • 代碼組織
    • 類庫模塊化
      • CommonJS/AMD
      • YUI3模塊
    • 業務邏輯模塊化
    • 文件載入
      • LABjs
      • SeaJS/Require.js
  • 安全
    • CSRF/XSS
    • ADsafe/Caja/Sandbox
  • 移動Web
    • HTML5/CSS3
    • 響應式設計
    • Zeptojs/iScroll
    • V5/Sencha Touch
    • PhoneGap
    • jQuery Mobile
  • JavaScript生態
    • MongoDB/CouchDB
  • 前沿技術社區/會議
    • D2/WebRebuild
    • NodeParty/W3CTech/HTML5夢工廠
    • JSConf/滬JS(JSConf.cn)
    • QCon/Velocity/SDCC
    • JSConf/NodeConf
    • YDN/YUIConf
  • 計算機知識儲備
    • 編譯原理
    • 計算機網路
    • 操作系統
    • 演算法原理
    • 軟體工程/軟體測試原理
  • 軟技能
    • 知識管理/總結分享
    • 溝通技巧/團隊協作
    • 需求管理/PM
    • 交互設計/可用性/可訪問性知識
  • 可視化
    • SVG/Canvas/VML
    • D3/Rapha?l/DataV
• 後端工程師
  • 編程語言
    • C/C++/Java/PHP/Ruby/Python/…
  • 資料庫
    • SQL
    • MySQL/MongoDB/Oracle
  • 操作系統
    • Unix/Linux/OS X/Windows
  • 數據結構

參考鏈接：

http://www.cn-cuckoo.com/2010/01/10/nicholas-c-zakas-talk-about-what-makes-a-good-front-end-engineer-1356.html

JacksonTian/fks · GitHub

如何成為一名優秀的web前端工程師（前端攻城師）？

---

坑的項目多了，自然就成高手了。

---

我說說我的看法，我覺得目前國內所謂前端工程師還是有好多分支的，有的前端在UED部門，有的在設計部門，有的在技術部門，所以首先要找好自己的定位，在技術部門的你就狂鑽研javascript，死扣兼容性問題， 在UED部門你就可以關注一些交互，提高自己的溝通技巧（因為我覺得產品和交互就是耍嘴皮子的），在設計部門你就扣css細節，像素級別的，關注各種布局和效果的技術實現，提高設計稿還原度和效率。

你要求一個前端，即能高效準確的還原設計稿，又精通瀏覽器兼容性問題，同時精通javascript，各種跟後台的數據交互，又廣泛涉獵產品和交互設計，能與交互設計是和產品唇槍舌戰。你當前端工程師是神啊～

---

99%的努力和1%的天分。

-----------

1%的天分最重要，沒有那%1，說啥都白搭。

---

首先，優秀的Web前端開發工程師要在知識體系上既要有廣度和深度！做到這兩點，其實很難。所以很多大公司即使出高薪也很難招聘到理想的前端開發工程師。技術非黑即白，只有對和錯，而技巧則見仁見智。
在以前，會一點Photoshop和Dreamweaver的操作，就可以製作網頁。
現在，只掌握這些已經遠遠不夠了。無論是開發難度上，還是開發方式上，現在的網頁製作都更接近傳統的網站後台開發，所以現在不再叫網頁製作，而是叫Web前端開發。
Web前端開發在產品開發環節中的作用變得越來越重要，而且需要專業的前端工程師才能做好。
Web前端開發是一項很特殊的工作，涵蓋的知識面非常廣，既有具體的技術，又有抽象的理念。簡單地說，它的主要職能就是把網站的界面更好地呈現給用戶。

其次，優秀的Web前端開發工程師應該具備快速學習能力。Web發展的很快，甚至可以說這些技術幾乎每天都在變化！如果沒有快速學習能力，就跟不上Web發展的步伐。前端工程師必須不斷提升自己，不斷學習新技術、新模式；僅僅依靠今天的知識無法適應未來。Web的明天與今天必將有天壤之別，而前端工程師的工作就是要搞清楚如何通過自己的Web應用程序來體現這種翻天覆地的變化。
說到這裡，我想起了一個大師說過的一句話：對於新手來說，新技術就是新技術。
對於一個高手來說，新技術不過是就技術的延伸。
再者，優秀的前端工程師需要具備良好的溝通能力，因為前端工程師至少都要滿足四類客戶的需求。
1、產品經理。這些是負責策劃應用程序的一群人。他們會想出很多新鮮的、奇怪的、甚至是不可是實現的應用。一般來說，產品經理都追求豐富的功能。
2、UI設計師。這些人負責應用程序的視覺設計和交互模擬。他們關心的是用戶對什麼敏感、交互的一貫性以及整體的好用性。一般來說，UI設計師於流暢靚麗、但並不容易實現的用戶界面，而且他們經常不滿前端工程師造成 1px 的誤差。
3、項目經理。這些人負責實際地運行和維護應用程序。項目管理的主要關注點，無外乎正常運行時間、應用程序始終正常可用的時間、性能和截止日期。項目經理追求的目標往往是盡量保持事情的簡單化，以及不在升級更新時引入新問題。
4、最終用戶。指的是應用程序的主要消費者。儘管前端工程師不會經常與最終用戶打交道，但他們的反饋意見至關重要。最終用戶要求最多的就是對個人有用的功能，以及競爭性產品所具備的功能。
Yahoo 公司 ，YUI 的開發工程師 Nicholas C. Zakas 認為：
前端工程師是計算機科學職業領域中最複雜的一個工種。絕大多數傳統的編程思想已經不適用了，為了在多種平台中使用，多種技術都借鑒了大量軟科學的知識和理念。成為優秀前端工程師所要具備的專業技術，涉及到廣闊而複雜的領域，這些領域又會因為你最終必須服務的各方的介入而變得更加複雜。專業技術可能會引領你進入成為前端工程師的大門，但只有運用該技術創造的應用程序以及你跟他人並肩協同的能力，才會真正讓你變得優秀。
————————————
關於書籍：
HTML、CSS 類別書籍，都是大同小異，在噹噹網、卓越網搜索一下很多推薦。如果感覺學的差不多了，可以關注一下《CSS禪意花園》，這個很有影響力。
Javascript 的書籍 推薦看老外寫的，國內很多 Javascript 書籍的作者對 Javascript 語言了解的都不是很透徹。
這裡推薦幾本 Javascript 書籍：
初級讀物：
《JavaScript高級程序設計》：一本非常完整的經典入門書籍，被譽為JavaScript聖經之一，詳解的非常詳細，最新版第三版已經發布了，建議購買。
《JavaScript王者歸來》百度的一個Web開發項目經理寫的，作為初學者準備的入門級教程也不錯。
中級讀物：
《JavaScript權威指南》：另外一本JavaScript聖經，講解的也非常詳細，屬於中級讀物，建議購買。
《JavaScript.The.Good.Parts》：Yahoo大牛，JavaScript精神領袖Douglas Crockford的大作，雖然才100多頁，但是字字珠璣啊！強烈建議閱讀。
《高性能JavaScript》：《JavaScript高級程序設計》作者Nicholas C. Zakas的又一大作。
《Eloquent JavaScript》：這本書才200多頁，非常短小，通過幾個非常經典的例子（艾米麗姨媽的貓、悲慘的隱士、模擬生態圈、推箱子遊戲等等）來介紹JavaScript方方面面的知識和應用方法。
高級讀物：
《JavaScript Patterns 》：書中介紹到了各種經典的模式，如構造函數、單例、工廠等等，值得學習。
《Pro.JavaScript.Design.Patterns》：Apress出版社講解JavaScript設計模式的書，非常不錯。
《Developing JavaScript Web Applications》：構建富應用的好書，針對MVC模式有較為深入的講解，同時也對一些流程的庫進行了講解。
《Developing Large Web Applications》：不僅有JavaScript方面的介紹，還有CSS、HTML方面的介紹，但是介紹的內容卻都非常不錯，真正考慮到了一個大型的Web程序下，如何進行JavaScript架構設計，值得一讀。
要做優秀的前端工程師，還需要繼續努力：《高性能網站建設指南》、《Yahoo工程師的網站性能優化的建議》、「YSLOW」性能優化建議、《網站重構》、《Web開發敏捷之道》、「 jQuery 庫」、「前端框架」、「HTML5」、「CSS3」。。。 這些都要深入研究！

萬事開頭難！如果你能到這個境界，剩下的路自己就可以走下去了。
人們常說：不想當裁縫的司機，不是個好廚師。
如果單純只是學習前端編程語言、而不懂後端編程語言（PHP、http://ASP.NET，JSP、Python），也不能算作是優秀的前端工程師。
在成為一個優秀的前端工程師的道路上，充滿了汗水和辛勞。
博客原文：如何成為一名優秀的web前端工程師（前端攻城師）？

---

順著職位名稱往後發展即可: web前端工程師→前端工程師→工程師→師。每一階段，先成為，再忘記。

---

小開為打算學習web的小夥伴們祭出一款「自製神器」——2017 最新 Web 開發者成長路線圖

這是一位來自迪拜的 Kamran Ahmed 為他的一位老教授製作的圖表，用來給學生授課交流。作者也將其放在了GitHub（ kamranahmedse/developer-roadmap） 上，分享給所有開發者。

前端路線圖

順便附加一個後端路線圖

DevOps 路線圖尚在製作中，作者後續還將為每個路線添加相關資源，有興趣的可以保持關注。

文章轉載自【開源中國社區】：自製「神器」，2017 最新 Web 開發者成長路線圖

---

我所遇到的前端程序員分兩種：
　　第一種一直在問：如何學習前端？
　　第二種總說：前端很簡單，就那麼一點東西。
　　我從沒有聽到有人問：如何做一名優秀、甚至卓越的WEB前端工程師。
　　何為：前端工程師？
　　前端工程師，也叫Web前端開發工程師。他是隨著web發展，細分出來的行業。
　　Web前端開發技術主要包括三個要素：HTML、CSS和JavaScript！
　　它要求前端開發工程師不僅要掌握基本的Web前端開發技術，網站性能優化、SEO和伺服器端的基礎知識，而且要學會運用各種工具進行輔助開發以及理論層面的知識，包括代碼的可維護性、組件的易用性、分層語義模板和瀏覽器分級支持等。
　　隨著近兩三年來RIA（Rich Internet Applications的縮寫，中文含義為：豐富的網際網路應用程序）的流行和普及帶來的諸如：Flash/Flex，Silverlight、XML和 伺服器端語言（PHP、http://ASP.NET，JSP、Python）等語言，前端開發工程師也需要掌握。
　　前端開發的入門門檻其實很低，與伺服器端語言先慢後快的學習曲線相比，前端開發的學習曲線是先快後慢。
　　HTML 甚至不是一門語言，他僅僅是簡單的標記語言！
　　CSS 只是無類型的樣式修飾語言。當然可以勉強算作弱類型語言。
　　Javascript 的基礎部分相對來說不難，入手還算快。
　　也正因為如此，前端開發領域有很多自學成「才」的同行，但大多數人都停留在會用的階段，因為後面的學習曲線越來越陡峭，每前進一步都很難。
　　Web前端技術有一些江湖氣，知識點過於瑣碎，技術價值觀的博弈也難分伯仲，即全局的系統的知識結構並未成體系，這些因素也客觀上影響了「正統 「前端技術的沉澱！而且各種「奇技淫巧」被濫用，前端技術知識的傳承也過於泛泛，新人難看清時局把握主次。因此，前端技術領域，為自己覓得一個靠譜的師 兄，重要性要蓋過項目、團隊、公司、甚至薪水。
　　另一方面，正如前面所說，前端開發是個非常新的職業，對一些規範和最佳實踐的研究都處於探索階段。
　　總有新的靈感和技術不時閃現出來，例如CSS sprite、負邊距布局、柵格布局等；
　　各種JavaScript框架層出不窮，為整個前端開發領域注入了巨大的活力；
　　瀏覽器大戰也越來越白熱化，跨瀏覽器兼容方案依然是五花八門。
　　為了滿足「高可維護性」的需要，需要更深入、更系統地去掌握前端知識，這樣才可能創建一個好的前端架構，保證代碼的質量。
　　隨著手持設備的迅猛發展，帶動了HTML5行業標準的快速發展。web領域的技術，大概有10年都沒有大的更新了！
　　現在市場很需要優秀的、高級的前端工程師。
　　一方面是因為這是一個比較新的細分行業，而且前端程序員大都自學一部分，知識結構不系統；另一方面，大學裡面沒有這種課程，最最重要的是：北大青鳥這類培訓機構也沒有專門的前端工程師的培訓課程！！
　　吳亮在《JavaScript 王者歸來》第一張的序裡面說：大多數程序員認為 Javascript 過於簡陋，只適合一些網頁上面花哨的表現，所以不願花費精力去學習，或者以為不學習就能掌握。
　　實際上，一門語言是否腳本語言，往往是她的設計目標決定，簡單與複雜並不是區分腳本語言和非腳本語言的標準。
　　事實上，在腳本語言裡面，Javascript 屬於相當複雜的一門語言，他的複雜度即使放在非腳本語言中來衡量，也是一門相當複雜的語言！
　　Javascript 的複雜度不遜色於 Perl 和 Python！
　　如何學習前端知識？
　　我們生活在一個充滿規則的宇宙裡面。社會秩序按照規則運行，計算機語言幾乎全部是規則的集合。計算機前輩們定義規則，規則約束我們，我們用規則控制數據。大部分時候，對數據的合理控制，來自於你對規則的掌握。
　　學習 HTML，CSS 應該先跟著書仔細、紮實的學一遍。然後就需要做大量的練習，做各種常規的、奇怪的、大量的布局練習來捆固、理解自己的知識。
　　而學習 Javascript 首先要知道這門語言可以做什麼，不能做什麼，擅長做什麼，不擅長做什麼！
　　如果你只想當一個普通的前端程序員，你只需要記住大部分 Javascript 函數，做一些練習就可以了。
　　如果你想當深入了解Javascript，你需要了解 Javascript 的原理，機制。需要知道他們的本源，需要深刻了解 Javascript 基於對象的本質。
　　還需要深刻了解瀏覽器宿主 下 的 Javascript 的行為、特性。
　　因為歷史原因，Javascript一直不被重視，有點像被收養的一般！ 所以他有很多缺點，各個宿主環境下的行為不統一、內存溢出問題、執行效率低下等問題。
　　作為一個優秀的前端工程師還需要深入了解、以及學會處理 Javascript 的這些缺陷。
　　那麼一名優秀的、甚至卓越的 前端開發工程師的具備什麼條件？
　　首先，優秀的Web前端開發工程師要在知識體系上既要有廣度和深度！做到這兩點，其實很難。所以很多大公司即使出高薪也很難招聘到理想的前端開發工程師。技術非黑即白，只有對和錯，而技巧則見仁見智。
　　在以前，會一點Photoshop和Dreamweaver的操作，就可以製作網頁。
　　現在，只掌握這些已經遠遠不夠了。無論是開發難度上，還是開發方式上，現在的網頁製作都更接近傳統的網站後台開發，所以現在不再叫網頁製作，而是叫Web前端開發。
　　Web前端開發在產品開發環節中的作用變得越來越重要，而且需要專業的前端工程師才能做好。
　　Web前端開發是一項很特殊的工作，涵蓋的知識面非常廣，既有具體的技術，又有抽象的理念。簡單地說，它的主要職能就是把網站的界面更好地呈現給用戶。
　　其次，優秀的Web前端開發工程師應該具備快速學習能力。Web發展的很快，甚至可以說這些技術幾乎每天都在變化！如果沒有快速學習能力，就跟 不上Web發展的步伐。前端工程師必須不斷提升自己，不斷學習新技術、新模式；僅僅依靠今天的知識無法適應未來。Web的明天與今天必將有天壤之別，而前 端工程師的工作就是要搞清楚如何通過自己的Web應用程序來體現這種翻天覆地的變化。
　　說到這裡，我想起了一個大師說過的一句話：對於新手來說，新技術就是新技術。
　　對於一個高手來說，新技術不過是舊技術的延伸。
　　再者，優秀的前端工程師需要具備良好的溝通能力，因為前端工程師至少都要滿足四類客戶的需求。
　　1、產品經理。這些是負責策劃應用程序的一群人。他們會想出很多新鮮的、奇怪的、甚至是不可能實現的應用。一般來說，產品經理都追求豐富的功能。
　　2、UI設計師。這些人負責應用程序的視覺設計和交互模擬。他們關心的是用戶對什麼敏感、交互的一貫性以及整體的好用性。一般來說，UI設計師侯傾向於流暢靚麗、但並不容易實現的用戶界面，而且他們經常不滿前端工程師造成 1px 的誤差。
　　3、項目經理。這些人負責實際地運行和維護應用程序。項目管理的主要關注點，無外乎正常運行時間、應用程序始終正常可用的時間、性能和截止日期。項目經理追求的目標往往是盡量保持事情的簡單化，以及不在升級更新時引入新問題。
　　4、最終用戶。指的是應用程序的主要消費者。儘管前端工程師不會經常與最終用戶打交道，但他們的反饋意見至關重要。最終用戶要求最多的就是對個人有用的功能，以及競爭性產品所具備的功能。
　　Yahoo 公司 ，YUI 的開發工程師 Nicholas C. Zakas 認為：
　　前端工程師是計算機科學職業領域中最複雜的一個工種。絕大多數傳統的編程思想已經不適用了，為了在多種平台中使用，多種技術都借鑒了大量軟科學 的知識和理念。成為優秀前端工程師所要具備的專業技術，涉及到廣闊而複雜的領域，這些領域又會因為你最終必須服務的各方的介入而變得更加複雜。專業技術可 能會引領你進入成為前端工程師的大門，但只有運用該技術創造的應用程序以及你跟他人並肩協同的能力，才會真正讓你變得優秀。
　　————————————
　　關於書籍：
　　HTML、CSS 類別書籍，都是大同小異，在噹噹網、卓越網搜索一下很多推薦。如果感覺學的差不多了，可以關注一下《CSS禪意花園》，這個很有影響力。
　　Javascript 的書籍 推薦看老外寫的，國內很多 Javascript 書籍的作者對 Javascript 語言了解的都不是很透徹。
　　這裡推薦幾本 Javascript 書籍：
　　初級讀物：
　　《JavaScript高級程序設計》：一本非常完整的經典入門書籍，被譽為JavaScript聖經之一，詳解的非常詳細，最新版第三版已經發布了，建議購買。
　　《JavaScript王者歸來》百度的一個Web開發項目經理寫的，作為初學者準備的入門級教程也不錯。
　　中級讀物：
　　《JavaScript權威指南》：另外一本JavaScript聖經，講解的也非常詳細，屬於中級讀物，建議購買。
　　《JavaScript.The.Good.Parts》：Yahoo大牛，JavaScript精神領袖Douglas Crockford的大作，雖然才100多頁，但是字字珠璣啊！強烈建議閱讀。
　　《高性能JavaScript》：《JavaScript高級程序設計》作者Nicholas C. Zakas的又一大作。
　　《Eloquent JavaScript》：這本書才200多頁，非常短小，通過幾個非常經典的例子（艾米麗姨媽的貓、悲慘的隱士、模擬生態圈、推箱子遊戲等等）來介紹JavaScript方方面面的知識和應用方法。
　　高級讀物：
　　《JavaScript Patterns 》：書中介紹到了各種經典的模式，如構造函數、單例、工廠等等，值得學習。
　　《Pro.JavaScript.Design.Patterns》：Apress出版社講解JavaScript設計模式的書，非常不錯。
　　《Developing JavaScript Web Applications》：構建富應用的好書，針對MVC模式有較為深入的講解，同時也對一些流程的庫進行了講解。
　　《Developing Large Web Applications》：不僅有JavaScript方面的介紹，還有CSS、HTML方面的介紹，但是介紹的內容卻都非常不錯，真正考慮到了一個大型的Web程序下，如何進行JavaScript架構設計，值得一讀。
　　要做優秀的前端工程師，還需要繼續努力：《高性能網站建設指南》、《Yahoo工程師的網站性能優化的建議》、「YSLOW」性能優化建議、《網站重構》、《Web開發敏捷之道》、「 jQuery 庫」、「前端框架」、「HTML5」、「CSS3」。。。 這些都要深入研究！
　　萬事開頭難！如果你能到這個境界，剩下的路自己就可以走下去了。
　　人們常說：不想當裁縫的司機，不是個好廚師。
　　如果單純只是學習前端編程語言、而不懂後端編程語言（PHP、http://ASP.NET，JSP、Python），也不能算作是優秀的前端工程師。
　　在成為一個優秀的前端工程師的道路上，充滿了汗水和辛勞。
　　—— 王子墨 寫於 Hong Kong, Kowloon
　　2012年10月28日 20:18
原文地址：（轉載）如何成為一名優秀的web前端工程師（前端攻城師）

---

1. 多嘗試，會折騰
2. 去一個好的團隊
3. 善用閱讀器，多關注牛人博客、twitter等
4. 去github關注相關感興趣項目，嘗試貢獻代碼
5. 寫博客，記錄問題，分享代碼。幫助其他人成長

---

"如何成為優秀的Web前端開發工程師「是一個很好說，但是卻很難做到的一件事，這就好比要回答「如何成為一個優秀的人」、「如何成為一個優秀的程序員」等等相關的問題。關於優秀的定義，也是仁者見仁。

有的人認為，我做前端的終極目標，就是將頁面布局做到極致，對於她來說，優秀就是能夠更加完美的還原PSD圖，能夠更加做好css兼容性方案，能夠充分利用模版的概念、組件的思想進行html結構設計。

---

前面大家說的很好了，小補充下：
1. 時刻保持一個學習，接受的心態，不斷獲取新知識。
2. 發現問題後，花時間去自己解決，不要第一時間去找人問詢，否則到最後自己什麼也記不住。

---

推薦閱讀：