一名合格的前端工程師的知識結構是怎樣的？
個人總結學習成長的軌跡是：
【1】能用html+css把頁面做出來，能用js實現動態效果。
【2】在1的基礎上保證瀏覽器兼容性。
【3】在2的基礎上開始出現代碼潔癖，代碼會逐漸趨向於簡潔高效
【4】在3的基礎上開始關注語義性、可用性和可重用性
【5】在4的基礎上開始關注頁面性能
【6】在5的基礎上開始費勁腦汁的去尋思怎麼能把開發效率也提升上來
【7】在6的基礎上，我操，HTML5來了，我操，CSS3也上了。得了，接著學去了
補充，如果你沒從前端中獲得快感，嗯，那你可以轉行了做為一個專職的頁面重構者，我們從事的工作簡單的說就是「將設計稿轉換成WEB頁面」，這一過程可以很簡單到直接把PSD從PS里導出成網頁；也可複雜到需要考慮頁面中每個標籤的使用，考慮「頁面性能」。以「前端工程師」為目標的同學可能會不願承認將頁面重構這塊分出來，但隨著工種的細分，加上頁面重構本身的專業性，獨立為一個職業也不是不可能，至少我現在從事的就是一個專職的職位。如果你覺得一個前端工程師必須去畫設計稿，可以不理會下面的內容。
單純的頁面重構，所涉及到的工作內容一般是「分析設計稿= &> 切圖= &> 寫HTML和CSS」，雖然看起來很少，但要做好這份工作，絕非所想的那麼容易。原因很簡單：工作內容單一，在時間和工作量上必會很苛刻，往往跟設計師的工作時間是3:1，即設計師給三天的時間，製作只給一天的時間完成；在這種工作強度下，很多人都是靠著對這份工作的喜愛在維持著，一旦工作熱情消失，很容易就會變得枯燥，保持熱情也成了重構工作者（也許是所有參加工作的人）應該具備的能力。
跟「前端工程師」所要求的有所不同，「頁面重構」雖然也是「前端工程師」的一個範疇，在職業化中，對專職的頁面重構者，要求當然也更高。不單是做出頁面，而是做出好頁面。又引出另一個話題，「何為好頁面？」，一般包括下面幾點：
1. 結構完整，可通過標準驗證
2. 標籤語義化，結構合理
3. 充分考慮到頁面在站點中的「作用和重要性」，並對其進行有針對性的優化
很多同學多少都遇到過方向不明，不知道自己應該提高些什麼，我們可以從「分析設計稿= &> 切圖= &> 寫HTML和CSS」這個工作內容，針對每一點提出一些要求，以方便我們分析自己的能力水平，為繼續提高確定個方向：
一，設計稿的分析
設計稿的分析是指對設計稿如何製作成頁面的分析，即哪一塊的內容可以做為公共的部分、哪一塊的內容結構可以如何實現等。對設計稿的分析能力可以劃分成下面的幾個階段：
1. 能分清設計稿中的公共與私有的部分
2. 在1的基礎上對各部分的實現方式有一個初步的方案（包括如何切圖、寫結構、寫樣式）
3. 在1的基礎上，準確的給出各部分的實現方案（包括如何切圖、寫結構、寫樣式）
4. 在3的基礎上，能同時考慮方案的擴展性、復用性及頁面性能（包括如何切圖、寫結構、寫樣式）
5. 在4的基礎上，考慮整站的結構分布（包括文件分布、目錄結構）
上面這些都是在還沒開始動手製作之前所要做的。
二，切圖
切圖是指將設計稿切成便於製作成頁面的圖片。都有個誤區，覺得切圖就是把圖片切出來，其實並不完全是這樣，還包括把切出來的圖片合併到一起，怎麼切、從哪切才能將性能最大化，說「切圖是一門藝術」完全不為過。切圖也可以劃分成幾個階段：
1. 切成所需要的圖片（如何將需要的部分切出來）
2. 在1的基礎上，對切出來的圖片進行一些優化（包括壓縮文件大小、選擇圖片類型）
3. 在2的基礎上，規劃切出來的圖片（包括文件分布）
4. 在3的基礎上，考慮整體的性能（包括合併圖片、壓縮文件大小）
HTML和CSS的編寫
HTML和CSS的編寫是指將上面完成的內容，通過HTML和CSS的編寫，將設計稿轉換成WEB頁面最重要的一塊，也是我們所要重點掌握的內容，把它們放在一起，是因為它們相互的關聯性太強，HTML的寫法會影響到CSS的寫法，它又可以劃分成下面幾個階段：
1. 還原設計稿視覺效果，並通過標準驗證（HTML）
2. 在1的基礎上，實現多瀏覽器的兼容（HTML）
3. 在2的基礎上，標籤語義化（HTML）
4. 在3的基礎上，選擇較優的實現方式（包括模塊化結構，方便程序腳本使用，HTML和CSS）
5. 在4的基礎上，考慮到擴展性、復用性和可維護性（HTML和CSS）
6. 在5的基礎上，考慮到整站的樣式分布（包括如何實現分布）
7. 在6的基礎上，樣式寫法的優化（包括技巧的應用）
是對所遇到問題的解決能力，這一點在不同的階段都可能會遇到，所以沒有寫到上面。
如果你已經達到或超過3、4、5，恭喜你，你已經是一個職業的「頁面重構工作者」了。為了我們自身的發展，關注新技術、技術創新、提高用戶體驗、審美觀、程序腳本的實現方式等，也是十分必要的。大家一起進步吧。
哪裡需要這麼多知識。只要深入一兩點，就很優秀了。
比如老道，你讓他切頁面去？他不會。但他是世界級的前端楷模。我不是正經的前端工程師，不過有幸服務於瀏覽器廠商，一直希望加強瀏覽器廠商同廣大前端開發者之間的交流和溝通，自己也在博客上翻譯和寫了一些關於火狐對於開發者特性支持的文章。期間也接觸過不多的前端工程師，並且試著為前端工程師做一些交流的報告，我個人體會前端部分的知識體系其實是很龐大的，因為瀏覽器涉及到的技術特別龐雜，試著看能不能在這裡描述清楚。
對於前端來說，他要面對的最直接的東西就是瀏覽器，而跟瀏覽器進行交互的內容基本的就包括HTML+JavaScript+CSS，然而從網路流行第一天開始，這類代碼絕大部分是通過拷貝粘貼的方式進行傳播，以至於JavaScript成為了世界上最被誤解的一門語言（老道說的）等等，此外，隨著很多前端IDE環境的出現，前端代碼的質量更是參差不齊，尤其是Frontpage。不過看到很讓人高興的就是，越來越多的前端不再使用IDE來進行開發或者前端IDE正在變得越來越規範。圍繞著HTML+JavaScript+CSS本身有很多的話題可以討論，因為這三個都不是簡單幾句話就能夠說清楚的事情。
簡單的使用他們，不管是拷貝粘貼，還是使用IDE都並不妨礙前端製作出正常工作的頁面，但是這隻能步入初學者的行列，不過可能並不妨礙成為一個合格的前端。
真正理解這些技術並不是簡單的事情，但是個人覺得想進入下一個階段，需要對瀏覽器有基本的理解。這三個技術是瀏覽器最直接面對的代碼，而瀏覽器同前端開發者之間溝通的方式是通過一系列邏輯上的概念或者隱喻，例如HTML對應的DOM結構，CSS的Box Model等，理解了這些邏輯上的概念介面，可以讓前端開發者更容易理解自己正在做的事情。而這些概念的理解需要計算機等學科的基礎知識。
例如DOM其實來自於數據結構樹的抽象，文檔數據模型基本上是一個非常穩定的抽象模型，使用樹型結構來描述一個HTML/XML的文檔數據，然後通過瀏覽器實現的DOM API來操控這個樹型邏輯結構——瀏覽器內部不一定是使用樹來做具體實現，但是在瀏覽器同前端溝通的時候通過這種邏輯結構，或者隱喻為文檔樹；在例如CSS的盒子模型，其實瀏覽器基本上也是提供這個邏輯概念讓前端更好的理解渲染過程，通過觀察一個前端寫代碼時候就能判斷出他是否理解這個盒子模型，在製作Layout過程中，如果他只是通過各種IDE或者類似於Firebug之類的可視化工具去調整布局參數的話，那可能就沒有很深的理解，加入遵循的Grid布局的話，也只是簡單的利用那個Grid的幾個計算公式——不過很多工具或者框架的出現就是用來幫助做這個的，嘿嘿；另外一種人可能會提前進行計算，他能夠知道自己進行寬度和高度設定之後，布局會是什麼樣子。
優化前端代碼是更高級的一個階段，這個階段的修鍊可能需要更加了解瀏覽器的很多實現細節，以及不同瀏覽器之間的實現差異——面對不兼容問題的本質。還拿CSS的布局為例，瀏覽器中有個很重要的概念或者階段就是渲染/布局過程，簡單說布局過程就是瀏覽器在把所有內容繪畫到顯示屏上的過程，而這個過程就是瀏覽器計算各種元素幾何關係的過程，這些幾何關係包括長、寬、頂點坐標，瀏覽器將解析HTML生成的DOM樹轉化為渲染樹——WebKit中的RenderTree，Gecko中的FrameTree等等，對於Block和Inline型元素幾何關係計算方式會有所不同，從而會影響到父級元素的幾何關係計算，這個渲染過程在火狐中被成為Reflow，WebKit中為Layout，這個過程是佔用CPU資源的，所以，對於布局方面的優化就需要理解這個過程，例如，在代碼中，建議不要一句一句的為某個元素設定CSS屬性，而建議一起把打包的CSS屬性賦予某個元素，就是因為這個賦值可能會引起瀏覽器的Reflow過程，從而影響使用體驗；或者比如JavaScript語言中，對於一個屬性的查詢過程是需要在他的所有Prototype Chain或者Scope Chain中做遍歷的，所以會有使用局部變數的建議從而避免糟糕的多次遍歷等等。
總結一下上面這一堆，也許是因為這個純粹是個人摸索過來的經驗，同大家的學習過程可能非常不同，我可能偏向從瀏覽器那邊過來的，但是經過一些交流之後，覺得這可能會是一個進階的有效途徑，希望能夠對大家有所幫助，不過畢竟我不是正經的前端，沒有更多的實戰經驗，如果有啥問題，歡迎批評指正，:)
就像造房子打地基房梁，要穩固，紮實。
什麼叫穩固紮實。
比方說你聽說ES6 module很牛B，import export用得溜，於是你覺得模塊化就是這個。問你怎麼配合IIFE，closure來模塊化，你說不知道，過時的沒鳥用。
又比方說你聽說Redux很牛B，上來一同dispatcher reducer，於是你覺得模塊通信就它了。問你能不能搞EventBus，來Observable data，你說不火沒鳥用。
再比方說你用jQuery，三下五除二搞定carousel圖片論滾，於是你覺得搞定收工。讓你擴展下，你說怎麼搞，插件寫的就這樣；自己來寫個，算了。
你跟個tutorial搞定一個nodejs app，用最新koa 2，你覺得牛B就它了，問你裡面模式是什麼，怎麼知道效率好不好，怎麼benchmark，怎麼torch圖發現瓶頸，你說差不多就行，那個不要緊，以後再說。
你沒學會JS編程，你只是學會了JS編程的「樣子」。
作者：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
2017年的回答
推薦 @phodal 大神的技能圈（前端技能圖譜）
A Skill List for Web Developerphodal/skillwheel
2012年的回答
引用兩位大神的圖：
http://www.flickr.com/photos/kejun/3114605967/
http://weibo.com/1700082927/xC029u1n8
由我整理的面試題中抽取的部分片段，完整版請看：
Front-end-Developer-Questions markyun/My-blog · GitHub
前端開發工程師應該具備的基礎知識體系大綱：
HTMLCSS：
對Web標準的理解、瀏覽器內核差異、兼容性、hack、CSS基本功：布局、盒子模型、選擇器優先順序及使用、document flow（文檔流）、清除浮動，hasLayout 和 塊格式化上下文 (block-formattin contexts) 、reflowrepaint、硬體加速、HTML5（離線 存儲，多媒體，Web Sockets ,Web Workers，History API2D/3D 繪圖）、CSS3、Flexbox、CSS預編譯、動畫、響應式布局、移動端開發
JavaScript：
數據類型、面向對象、數組、DOM、BOM、Function、繼承、閉包、內置對象、作用域、跨域、原型鏈、、JSON、XMLHttpRequest、 RegExp、模塊化、內存泄漏、事件機制、非同步裝載回調、模板引擎、前端MVC、NodeJS、JSON、ajax、框架、演算法等
其他（前端工程化代碼規範預編譯前端框架安全優化重構）：
HTTP、 ES6、 ES7、React、 VUE、Angular、Backbone、Underscore、Flux、Web Component、handlebars、Gulp/Grunt、Git、CDN、WEB安全、性能優化、項目重構、團隊協作、SEO、UED、技術架構、快速學習能力
前端可深入的領域（來源玉伯）：
前後端分離、前端工程化、前端質量體系、前端工具與生態圈、數據可視化、下一代類庫框架、前端服務化、前端安全、設計工業化、跨平台解決方案。
作為一名前端工程師，無論工作年頭長短都應該必須掌握的知識點：
此條由 王子墨 發表在 攻城師的實驗室
1、DOM結構 —— 兩個節點之間可能存在哪些關係以及如何在節點之間任意移動。
2、DOM操作 ——如何添加、移除、移動、複製、創建和查找節點等。
3、事件 —— 如何使用事件，以及IE和標準DOM事件模型之間存在的差別。
4、XMLHttpRequest —— 這是什麼、怎樣完整地執行一次GET請求、怎樣檢測錯誤。
5、嚴格模式與混雜模式 —— 如何觸發這兩種模式，區分它們有何意義。
6、盒模型 —— 外邊距、內邊距和邊框之間的關係，及IE8以下版本的瀏覽器中的盒模型
7、塊級元素與行內元素 —— 怎麼用CSS控制它們、以及如何合理的使用它們
8、浮動元素 ——怎麼使用它們、它們有什麼問題以及怎麼解決這些問題。
9、HTML與XHTML ——二者有什麼區別，你覺得應該使用哪一個並說出理由。
10、JSON —— 作用、用途、設計結構。
--------------------------------------------------------------------------------------------------------------
下面是些亂七八糟的東西，隨意看看就好。
- 前端工程師
- 瀏覽器
- 編程語言
- 切頁面
- 開發工具
- 代碼質量
- 前端庫/框架
- 前端標準/規範
- 性能
- 編程知識儲備
- 部署流程
- 代碼組織
- 前沿技術社區/會議
- 軟技能
- 可視化
kejun的前端工程師應該關注的思維導圖我覺得是比較全面的了。
http://blog.csdn.net/spring21st/archive/2011/05/09/6407187.aspx
比程序員更懂設計，比設計師更懂編程。
實際上這問題是說前端工程師職場生存技能。之前那個思維導圖，也是在自己迷茫時理清頭緒的工具，工程師職能的形成千萬別只適用於你所在的公司，我曾見過多名某國內名企出來的工程師，職能太單一了，再呆下去真的就廢了。
前端工程師單從知識結構上講要博聞強識，掌握技術的通用性，自己積累的技術可以幫任何一家公司解決問題這很重要。到一家新公司，你的技術可以互補或完善已有的技術體系，而不是覆蓋已有的技術體系。
前端工程師要在自己的職業生涯中，逐步形成、完善、更新自己的技術體系。這個體系具體說來就是我的那個思維導圖大體總結的。積累幾個開源項目、做好自己的知識管理、有架構意識、善用工具和溝通能力、協作精神等職場必備技能。沒寫完~
知識在於活學活用，這篇《前端知識庫》前段時間在阿里云云棲社區上非常的火熱，推薦給樓主和各位同學作為學習資料使用：前端知識庫-博客-雲棲社區-阿里雲
前端開發全面知識庫，包括HTML5，CSS3和js的基本框架知識，以及DOM和BOM操作的基礎知識和一些基本工具和IDE。學習本篇，你將了解到以下知識。
核心 Core
HTML5
W3C http://www.w3school.com.cn/html5/
W3C https://www.w3.org/html/ig/zh/wiki/HTML5
菜鳥教程 http://www.runoob.com/html/html5-intro.html
HTML5中文門戶 http://www.html5cn.org/
CSS3
W3C CSS教程 http://www.w3school.com.cn/css/index.asp
W3C CSS3教程 http://www.w3school.com.cn/css3/index.asp
菜鳥教程CSS教程 http://www.runoob.com/css/css-tutorial.html
菜鳥教程CSS3教程 http://www.runoob.com/css3/css3-tutorial.html
CSS參考手冊 http://css.doyoe.com/
JS
W3C http://www.w3school.com.cn/js/
菜鳥教程 http://www.runoob.com/js/js-tutorial.html
廖雪峰js教程 http://www.liaoxuefeng.com
js標準參考教程-阮一峰http://javascript.ruanyifeng.com/
jQuery
W3C http://www.w3school.com.cn/jquery/
菜鳥教程 http://www.runoob.com/jquery/jquery-tutorial.html
極客學院 http://wiki.jikexueyuan.com/project/jquery-tutorial/
廖雪峰 http://www.liaoxuefeng.com/wiki/
參考手冊 http://www.css88.com/jqapi-1.9/
參考手冊 http://www.runoob.com/manual/jquery/
ES6
阮一峰ES6 http://es6.ruanyifeng.com/
極客學院 http://wiki.jikexueyuan.com/project/es6/
JavaScript 標準參考 阮一峰http://javascript.ruanyifeng.com/advanced/ecmascript6.html
插件
parallel.js: 前後端通用的一個並行庫
zepto: 用於現代瀏覽器的兼容 jQuery 的庫
totoro: 穩定的跨瀏覽器測試工具
TheaterJS: 一個用於模擬人輸入狀態的 JS 庫
stellar.js: 前端用於實現非同步滾動效果的庫，現已不再維護
skrollr: 另一款實現一步滾動的開源庫，使用人數眾多，可實現各種狂拽酷炫掉渣天的前端效果，看真相
Framework7: 前端框架，是開發人員可以基於 web 技術構建 IOS7 程序
regulex: 用於生成 正則表達式 的可視化流程圖
markdown-it: 新型 Markdown 解析器，快速，支持插件
multiline: 用於 Javascript 中的多行文本，類似於 Ruby 的 HERE Doc
screenfull.js: 全屏插件，支持各大瀏覽器
lunr.js: 類似於 Solr, 但是用於瀏覽器上的全文搜索引擎，可以為 JSON 創建索引，離線也可以使用
jquery.hotkeys: jQuery 插件，用於綁定熱鍵
breach_core: Javascript 編寫的 Browser (瀏覽器)
octocard: 用於生成 Github 信息卡片的庫
github-cards: 用於生成 Github 信息卡片的庫
money.js: 輕量級貨幣轉換庫，web 和 node 皆可用
accounting.js: 輕量級的數字、貨幣轉換庫
javascript-algorithms: Javascript 實現的各種演算法集合
lazy.js: 類似於 underscore, 但是會延遲執行，某些場景下，性能會有很大的提升
seajs: 前端模塊載入器，解決模塊化、依賴等問題
jQuery-One-Page-Nav: 單頁應用中一個用於處理導航欄的庫
js.js: Javascript 實現的 javascript JIT
jquery-ui: jQuery 團隊開發的 UI 相關的前端庫，功能強大
todomvc: 分別基於 AngularJS/EmberJS/Backbone等實現的 TODO List, 幫助開發者選擇前端 MVC 庫
localForage: Mozilla 出品，用於離線存儲，基於IndexedDB, WebSQL 或者 localStorage, 提供一致的介面
EventEmitter: 瀏覽器版的 EventEmitter
jquery.serializeJSON: jQuery 插件，用於將 form 表單序列化成 JSON 數據
knockout: 前端 MVVM 框架，用於開發富前端應用
mermaid: 可以根據文本生成流程圖，類似於 Markdown 的語法
js-sequence-diagrams: 另一款可以根據文本生成流程圖的庫，類似於 Markdown 的語法
flow: 一個用來檢測 Javascript 語法錯誤的庫， Facebook 出品
zoomooz: jQuery 插件，用來處理瀏覽器縮放
fancyBox: 一個用於放大縮小圖片、Web 內容或者多媒體元素的庫，優雅大方
mithril.js: 輕量型前端 MVC 框架，部分使用場景下性能優於 Angular.js 和 React
backbone: 強大的前端 MVC 庫，鼻祖級前端庫，最初為了配合 Rails 來模塊化前端應用，兼容性良好 (兼容到 IE6)，插件豐富，性能良好
jquery.smartbanner: smartbanner 是從 IOS6 開始支持的一個新特性, 這個插件提供了對早期 IOS4/5 和 Android 的支持
jquery.scrollTo: 在頁面上以一個元素為起始以動畫的方式移動(ScrollTo)到另一個元素， 支持回退等
jScrollPane: 自定義的滾動條，讓所有瀏覽器都顯示一樣的滾動條
onepage-scroll: 提供類似於 iPhone6 展示頁類似的效果，適用於單頁應用，兼容到 IE8
scrollMonitor: 前端插件用來監控元素的滾動事件(進入、退出等)，性能很好
ScrollMagic: 神奇的滾動交互效果插件，可以在滾動的過程中設置各種各樣的動態效果
infinite-scroll: 滾動載入，滾動到最下到自動載入， Paul Irish 大神之作
animatable: 僅僅依靠 border-width 和 background-position 實現的各種動態效果，看真相
Fluidbox: 頁面上內嵌圖片的放大縮小效果，類似於 Medium 中的效果
jquery-validation: jQuery 的一個插件，用於校驗 Form 表單
BigVideo.js: jQuery 的一個插件, 用於實現大背景(視頻、圖片)效果
emscripten: 一款基於 LLVM, 可以將 C/C++ 轉換成 Javascript 的工具，使得 Javascript 可以近乎 Native 的速度
qrcode-generator: 各種語言的二維碼生成工具
device.js: 一個可以檢測設備類型的工具，可以讓我們根據不同的設備來為其定製響應的 Javascript 和 CSS
jquery-qrcode: jQuery 插件，用來生成二維碼
Wookmark-jQuery: jQuery 的一個插件，可以用來實現瀑布流的效果
isotope: 可以用來過濾、排列布局，實現美觀的動態布局切換效果，Demo
lazysizes: 功能強大的圖片延遲載入工具，可以首先載入一個低質量的圖片，然後再載入高質量的圖片
progressbar.js: 簡潔美觀的進度條，扁平化
pigshell: 一個由 Javascript 實現的Shell, 將互聯網當做一個大的文件系統, 通過 cd/ls/cat…..等命令, 可以訪問 Facebook/Twitter/Google Drive 等網路服務
spectrum: Js實現的顏色選擇器 (Colorpicker)
jQuery.countdown: jQuery 倒計時插件
summernote: WYSIWYG 富文本編輯器
awesomplete: 非常輕型的一個自動補全 JS 庫, 沒有任何依賴, 配置簡單, 美觀
switchery: IOS 7 上 Switch 的 JS 實現, 支持 IE8 及以上瀏覽器
trix: Basecamp 公司出品的富文本編輯器，簡潔小巧
sensor.js: 在智能移動設備瀏覽器上，通過HTML5的api使用移動設備的功能。定位、運動、傾斜等
hyhyhy: 用於創建 基於 HTML5 的 演示文稿
swipebox: jQuery 插件，用於處理移動端的觸摸事件
FileAPI: 前端用戶處理文件（拖放、多文件上傳等）
Sortable: 現代瀏覽器上用於實現元素拖拽排序的功能，支持 Meteor, AngularJS, React，不依賴 jQuery
Swiper: 用於實現瀏覽器上的滑動切換效果，支持硬體加速
matter-js: 2D 物理效果引擎，碰撞、彈跳等
jQTouch: 用於輔助創建手機端的 Web 應用，支持主題、Zepto.js 等
snabbt.js: 一個利用 Javascript 和 CSS transform 的 animation 庫
c3: 基於 D3 的圖表庫
echarts: 企業級圖表庫，百度開發
parallax.js: 一個用於響應智能手機 orientation 的庫
jQuery-Animate-Enhanced: jQuery 動畫庫的一個增強，用於現代瀏覽器
wysihtml: 富文本編輯器，適用於現代瀏覽器
slip: 一個通過滑動或者拖拽來操控列表的庫
evil-icons: 一個矢量圖庫，提供 Ruby/Node 等支持
PhotoSwipe: JS 的一個圖片展示庫
focusable: 是頁面上一個元素高亮的庫，有圖有真相
firefox.html: Firefox 在瀏覽器端的實現 —— HTML 版的 Firefox
jquery-mobile: jQuery 團隊開發的用於輔助手機端 web app 開發的庫，基於 HTML5
mobile-angular-ui: 基於angularjs和bootstarp的web app開發框架
interact.js: 一個適用於現代瀏覽器的，用於處理 手勢、拖放、縮放等的庫
rebound-js: 實現部分物理效果，Facebook 出品
basket.js: 基於 LocalStorage 的資源載入器，可以用來緩存 script 和 css, 手機端使用速度快於瀏覽器直接緩存
iscroll: 高性能的滾動(scroll)處理庫，功能強大，支持各種事件，不依賴任何的庫，且插件豐富, 大眾點評的手機端列表滾動就是用這個庫處理的
metrics-graphics: 基於 D3 的圖表庫，簡潔、高效，Mozilla 出品
accessible-html5-video-player: Paypal 出品的 Video 播放器
loading: 幾種 Loading 效果，基於 SVG
flippant.js: 一款能夠漂亮的網頁元素翻轉效果庫，代碼許久不更新，不過作為源碼學習還是不錯的
move.js: 基於 CSS3 的前端動畫框架
scrollReveal.js: 使元素以非常酷帥的方式進入畫布 (Viewpoint)，看 Demo
Modernizr: 一個用來檢測 HTML5 和 CSS3 支持情況的庫
foundation: 另一款前端模版框架，類似於 Bootstrap
Flat-UI: Bootstrap 的一款主題，簡潔美觀
iCheck: 一款漂亮的 Checkbox 插件
Swipe: 非常輕量級的一個圖片滑動切換效果庫, 性能良好, 尤其是對手機的支持, 壓縮後的大小約 5kb
slick: 功能異常強大的一個圖片滑動切換效果庫
SocialButtons: 漂亮的社交按鈕
sweetalert: 一個非常美觀的用於替換瀏覽器默認 alert 的庫
web-animations-js: Javascript 實現的 Web Animation API
vivus: 可以動態描繪 SVG 的 JS 庫, 支持多種動畫
plyr: 輕量, 小巧, 美觀的 HTML5 視頻播放器
timesheet.js: 基於 HTML5 CSS3 時間表
slideout: 一個非常美觀的側滑菜單
包管理工具 Package Managers
NPM
菜鳥教程NPM 使用介紹 http://www.runoob.com/nodejs/nodejs-npm.html
淘寶 NPM 鏡像 https://npm.taobao.org/
npm 模塊安裝機制簡介 http://www.ruanyifeng.com/blog/2016/01/npm-install.html
npm包搜索地址 https://www.npmjs.com/
Bower
Bower中文網 http://www.bowercn.com/
Bower：客戶端庫管理工具-阮一峰 http://javascript.ruanyifeng.com/tool/bower.html
Yarn
yarn中文網 https://yarnpkg.com/zh-Hans/快速、可靠、安全的依賴管理
YARN 簡介 https://www.ibm.com/developerworks/cn/data/library/bd-yarn-intro/
編輯器 Text Editors
WebStorm
官網下載 http://www.jetbrains.com/webstorm/download
VScode
官網下載 https://code.visualstudio.com/
vscode 插件精選 - 獻給所有前端工程師https://segmentfault.com/a/1190000006697219
SublimeText
官網下載 https://www.sublimetext.com/
SublimeCodeIntel: Sublime Text 的代碼補全工具，支持多種語言
Emmet：一個用於提高開發效率的編輯器插件，前身是Zen coding
SublimeLinter: 一個提供代碼質量檢測的插件
SublimeTmpl：快速新建指定的模版文件
Syntax-highlighting-for-Sass：sass代碼高亮插件
MarkdownEditing: Sublime Text 強大的 Markdown 擴展, 提供快捷鍵, 主題等
ApplySyntax: 輔助檢測語法插件
CTags: Sublime Text Ctags 支持插件, 需要安裝 ctags
sublime-react: React 代碼高亮
Atom
官網下載 https://atom.io/
HBuilder
官網下載 http://www.dcloud.io/
JS框架 JS Frameworks
Backbone
Backbone.js API中文文檔http://www.css88.com/doc/backbone/
AngularJs
中文官方文檔https://angular.cn/
angularjs中文網http://www.apjs.net/
angularjs教程http://www.angularjs.net.cn/
Angular 基礎入門http://www.cnblogs.com/micua/p/angular-essential.html
angular-masonry: Masonry 的 AngularJS 插件，用於瀑布流
angular-schema-form: 根據 JSON 生成響應的 Form 表單
restangular: Angular 中用來處理 RESTful API 的插件，可替代 $resource
ng-cordova: Cordova 常用組件的 Angular 版本
angular-translate: Angular 的國際化 (I18n)
ng-inspector: Chrome 插件，用於調試 Angular
angularjs-style-guide: AngularJS 代碼風格
ngReact: React 的 Angular 插件，可以在 Angular 中使用 React Components
material: Google Material Design 效果的 Angular 實現
angular-local-storage: Angular 插件, 提供了對 localStorage 的友好支持, 並對不支持的瀏覽器使用 cookie 優雅降級
angular-filter: 一組有用的 Angular Filters
bindonce: Angular 插件, 用於減少 Watcher 的數量, 提升性能
React
英文官方文檔https://facebook.github.io/react/docs/hello-world.html
中文官方文檔http://reactjs.cn/react/docs/getting-started-zh-CN.html
gitbooks手冊https://hulufei.gitbooks.io/react-tutorial/content/introduction.html
阮一峰react入門http://www.ruanyifeng.com/blog/2015/03/react.html
阮一峰React Router入門http://www.ruanyifeng.com/blog/2016/05/react_router.html
React Router 中文文檔https://react-guide.github.io/react-router-cn/
react-redux 中文文檔http://cn.redux.js.org/docs/react-redux/index.html
阮一峰Redux 入門教程http://www.ruanyifeng.com/blog react: React 框架源代碼
react-native: Facebook 出品的使用 React 開發 IOS 原生應用的框架
react-hot-loader: 實時調整 React 組件效果
grunt-react: React 的 Grunt 組件, 用於將 JSX 編譯成 JS
touchstonejs: 基於 React 的手機應用前端框架
essential-react: 基於 React, ES6, React-Router的一個應用腳手架
react-router: React 路由解決方案
Vue
vue官方http://cn.vuejs.org/
vuex官方http://vuex.vuejs.org/zh-cn/
vue-router官方https://router.vuejs.org/zh-cn/
UI框架 UI Frameworks
Bootstrap
最受歡迎的 HTML、CSS 和 JS 框架 http://v3.bootcss.com/
Ionic
一款接近原生的Html5移動App開發框架 會html css js就可以開發apphttp://www.ionic.wang/
Foundation
Foundation 中文網 迄今為止最好的響應式前端框架http://www.foundcss.com
FrozenUI
移動端服務的前端框架http://frozenui.github.io/
materializecss
基於Material Design的主流前端響應式框架http://www.materializecss.cn/
mui
最接近原生APP體驗的高性能前端框架http://dev.dcloud.net.cn/mui/
AntDesign
和react配合的UI框架https://ant.design
eleme
和vue配合的UI框架http://element.eleme.io/
JS預處理 JS Preprocessors
TypeScript
TypeScript 入門教程 菜鳥教程http://www.runoob.com/
TypeScript中文網https://www.tslang.cn/
TypeScript教程gitbookhttps://www.gitbook.com/
CoffeeScript
CoffeeScript 中文http://coffee-script.org/
CoffeeScript 實用手冊 極客學院http://wiki.jikexueyuan.com/project/coffeescript/
過程自動化 Process Automation
Grunt
Grunt中文網http://www.gruntjs.net/
Gulp
gulp.js 中文網http://www.gulpjs.com.cn/
gulp詳細入門教程http://www.ydcss.com/
前端構建工具gulpjs的使用介紹及技巧http://www.cnblogs.com/2050/p/4198792.html
Gulp開發教程https://www.w3ctech.com/topic/134
模板引擎 Templating
Handlebars
handlebarsjs官網http://handlebarsjs.com/
Handlebars中文文檔http://www.360doc.com/content/
Handlebars.js 中文文檔http://keenwon.com/992.html
Handlebars的使用方法文檔整理http://www.tuicool.com/articles/fqQFN3
Haml
haml官方文檔https://github.com/haml/haml
haml入門http://blog.csdn.net/napoay/article/details/50491363
Jade
Jade 官方的英文文檔http://www.w3cplus.com/html/how-to-use-jade.html
Jade的使用http://www.w3cplus.com/html/how-to-use-jade.html
帶你學習Jade模板引擎視頻http://www.imooc.com/learn/259
構建工具 Build Tools
RequireJS
RequireJS 英文網http://requirejs.org/
RequireJS 中文網http://requirejs.cn/
require.js的用法-阮一峰http://www.ruanyifeng.com/blog
seajs
seajs文檔http://seajs.org/docs/
SeaJS從入門到原理http://www.tuicool.com/articles/FfEJv2u
Browserify
官網http://browserify.org/
githubhttps://github.com/substack/node-browserify/
Webpack
Webpack 中文指南http://webpackdoc.com/
webpack的實例http://www.vichily.com
webpack的入門http://www.vichily.com
一小時包教會 —— webpack 入門指南http://www.w2bc.com/Article/50764
CSS預處理器 CSS Preprocessors
Sass
sass入門http://www.w3cplus.com/sassguide/
sass參考手冊http://sass.bootcss.com/docs/sass-reference/
SASS用法指南-阮一峰http://www.ruanyifeng.com/blog/
Less
less中文網http://lesscss.cn/
less快速入門http://less.bootcss.com/
stylus
stylus中文文檔-張鑫旭http://www.zhangxinxu.com/jq/stylus/
何為：前端工程師？
前端工程師，也叫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），也不能算作是優秀的前端工程師。
在成為一個優秀的前端工程師的道路上，充滿了汗水和辛勞。
1.掌握前端基礎技術
HTML CSS JavaScript 所謂掌握，我認為要了解到大部分東西在各瀏覽器差異、存在問題及解決方案
2.前端技術的理論知識
一個東西，不在於你會用就完了。
舉個最簡單的例子，css的清除浮動，很多人只知道copy這個代碼、那代碼可以搞定，但卻不分析原因，不知道在什麼情況下用什麼方式可以更好的解決。
3.了解前端的其他相關知識的了解。
其他js框架 http1.1協議 wpo mobile seo Flash/AS 等
4.工具的使用
開發工具 debug工具 偷懶用的工具等
5.了解後端語言
最少要到知道怎樣配合工作，不然就真的是頁面仔
以上 我認為應該是普遍認同的合格的前端工程師
加上我的要求1.一門後端語言的
最少要達到寫小項目的使用水平。
2.前端分析能力
其實差不多就是wpo
我學過shell 主要用於寫跑靜態資源引用、使用情況統計，不要只迷戀瀏覽器
3.產品層面
我突然不知道應該怎樣描述比較好。Orz 意識吧！
html作為一門規範性語言，自然w3c的規範標準是最重要的。然後才應該是client端，這裡的client端可以是任何能夠解析它的東東，比如ie，ff，chrome等，甚至你可以自己寫個瀏覽器來解析。client端解析實現是很有意思的比如holly能解析vxml，從文字變成聲音（當然語音識別就不擴展了）；瀏覽器能把html標籤變成看得見的網頁元素；wml??? 所以做為前端，了解各種主流瀏覽器的解析差異就顯得很重要，比如了解瀏覽器內核。隨著RIA的流行，ecmascript規範類語言開始越來越流行，這裡包括javascript，actionscript等。
javascript個人覺得它是一門很有藝術感的語言。閉包，原型鏈，js o?o?p思想，以及合理設計命名空間機構，都是很有意思的。隨著HTML5的推出，不少公司已經開始慢慢使用。比如我們經常看到的蘋果主站，google 首頁logo等，當然我自己公司也在開發中使用。js在這場革命顯得更加重要，比如js和html5的canvas，websocket等配合，再加上css3，你可以在web上弄出很牛的東西。
actionscript是也非常熱的一門語言，我覺得html5是不可能取代flash的，至少在n多年內是不可能的。as不僅僅是用來做一些動畫效果，它的用途是廣泛的。比如與FMS組成強大的流媒體slution，可以通過socket與伺服器維持長鏈接，實現各種1對1，1對多通信。甚至實現並發。當然as和js之間也是可以互相通信的。所以我覺得前端這些應該是需要掌握的。一個問題有很多的解法，關鍵在於怎麼實現最簡單，最容易維護，而不是哪種語言好。所以掌握的知識多了，路也就寬了。^_^
我覺前端還需要掌握一些其他方面的東西，比如php，jee，優化，操作系統等等， 好累啊不寫了。
CS基礎打好，少寫頁面切圖這些沒技術含量的東西，張口閉口CS理論，不關注展現只在乎功能，別人就會覺得你很牛
了解ECMA標準，至少可以在有疑惑的時候找到原因；熟悉語言的特性，包括作用域，對象模型等等；至少精通一門第三方庫；活躍於某些開源社區；獨立完成過一個大中型網站的前端架構和實現
本人太菜，不過個人覺得：基本必須會的是：html+css+javascript，這是看家的，沒有這個完全吃不開。另外，一些常用的框架至少的聽說過吧，最好能熟練應用jquery什麼的，熟悉一些後台的東西，不至於和寫後台的人無法交流；不過我覺得對於前台，美感也是很重要的一個東西吧，沒有這個，覺得永遠傑出不了。
- 頁面製作中的HTML、CSS等，這裡要明晰W3C標準，知道多瀏覽器內核（IE、Webkit、移動設備等）的差異、對HTML和CSS的最新技術（如HTML5等）有一定了解。對HTML的語義理解，對頁面架構有一定心得，對頁面的設計中的漸進和退化有了解。
- 前端語言里需要精通Javascript，這裡的不只是要能夠拿來主義的使用現成的輪播圖、導航菜單等效果，還要對Javascript的對象、prototype、結構、DOM操作等有清晰的認識；熟悉Jquery等流行JS框架。
- 了解幾種伺服器端語言，如java c# php 等。掌握Javacript與伺服器端語言（C#、php等）的交互。
雜項：
Flash/Flex：工作中經常用這些會打雜。
SEO：對SEO有一定了解，明白前端技術中的各種實現方式對SEO的影響。
UltraEdit / Notepad++ / Editplus ：手寫代碼編輯器。
Firebug：調試利器。
推薦閱讀：
※如何在一個月之內從零基礎成為初級CSS前端開發工程師？
※前端工程師是一個無關緊要的職位嗎？
※前端現在怎麼這麼多人？
※如何系統地學習Node.js？
※如何看待 TJ 宣布退出 Node.js 開發，轉向 Go？
TAG:Web開發 | 前端開發 | JavaScript | 前端工程師 |