原文文章：前端工程師手冊
前端知識點
HTML + CSS
對Web標準的理解、瀏覽器內核差異、兼容性、hack、CSS基本功：佈局、盒子模型、選擇器優先級及使用、HTML5、CSS3、移動端
- 一些自適應或垂直水平居中問題彙總
- Normal Flow
- Containing Block
- Margin Collapse
- BFC
- Baseline
- Writing Mode
- unicode-bidi
JavaScript
補充一下JS的深入理解，參考湯姆大叔的博客: 深入理解JavaScript系列，理解一些原理性質的東西。別停留在使用上，不然面試的時候很容易吃虧。那些你覺得不在意的東西，往往會是你成功的阻礙。
數據類型、面向對象、繼承、閉包、插件、作用域、跨域、原型鏈、模塊化、自定義事件、內存泄漏、事件機制、異步裝載回調、模板引擎、Nodejs、JSON、ajax等。
JS的知識點：
1、DOM結構 —— 兩個節點之間可能存在哪些關係以及如何在節點之間任意移動。
2、DOM操作 —— 如何添加、移除、移動、複製、創建和查找節點等。
3、事件 —— 如何使用事件，以及IE和標準DOM事件模型之間存在的差別。
4、XMLHttpRequest —— 這是什麼、怎樣完整地執行一次GET請求、怎樣檢測錯誤。
5、嚴格模式與混雜模式 —— 如何觸發這兩種模式，區分它們有何意義。
6、盒模型 —— 外邊距、內邊距和邊框之間的關係，及IE8以下版本的瀏覽器中的盒模型
7、塊級元素與行內元素 —— 怎麼用CSS控制它們、以及如何合理的使用它們
8、浮動元素 —— 怎麼使用它們、它們有什麼問題以及怎麼解決這些問題。
9、HTML與XHTML —— 二者有什麼區別，你覺得應該使用哪一個並說出理由。
10、JSON —— 作用、用途、設計結構。
基礎知識
- JavaScript的基本數據類型
- 內置對象的常用方法
- 理解事件機制
- 理解原型繼承
- 理解作用域問題
- 理解模塊化
- 性能優化
- 知道基本的編程語法，比如循環，判斷，try/catch 等等
- 理解包括多種函數定義以及賦值的方式，包括匿名函數
- 理解基本的命名空間，全局（window）空間以及對象空間（不包括閉包）
- 理解上下文的角色以及 this 變量的使用
- 理解各種對象以及函數的初始化和聲明方式
- 理解 javascript 比較操作符，如<, >, ==, ===，以及對象和字符串比較的原理和對象映射
- 理解對象屬性和函數的數組索引，以及這和真實的數組之間的區別。
中級知識
- 理解常用庫的實現原理，比如選擇器部分，事件綁定部分
- 檢測瀏覽器類型與版本
- 瞭解特性檢測
- 理解定時器，以及它的工作原理，包括何時以及如何使用定時器來異步執行方法調用
- 關於回調的深度支持，以及如何通過 call 和 apply 方法來控制上下文和函數參數傳遞
- 理解 JSON 標記以及 eval 函數
- 理解閉包以及他們如何影響你的代碼效率
- AJAX 以及對象序列化
高級知識
- 理解方法的 arguments 變量，包括如何使用它來通過 arguments.length 重載函數，以及通過 arguments.callee 來進行遞歸調用，需要注意使用這個特性有一定的危險性，因爲 ECMAScript 5 的 Strict 模式不支持此功能，但 jQuery 和 Dojo 都用到了它。
- 高級閉包比如 self-memoizing 函數，partially applied 函數，以及最可愛的 (function(){})() 調用。
- 函數以及 HTML prototype，prototype chain，以及如何使用基本的javascript對象和函數（比如 Array）來簡化代碼。
- 對象類型以及 instanceof 的使用
- 正則表達式和表達式編譯
- With 語句以及爲什麼不要使用它們
- 最困難的部分，知道如果利用所有這些工具，併產生處乾淨，整潔，健壯，快速，可維護以及兼容不同瀏覽器的代碼。
和web相關的知識
- 如何高效的操作 Dom（添加，刪除以及更新），還有如何通過使用 document fragments 這樣的工具來最小化瀏覽器的 re-flows。
- 瀏覽器的 DOM 元素屬性提取（比如，style，position等等），jQuery 和 Dojo 都可以很好的完成這些工作，儘管如此，理解從 CSS 和 style 標籤中提取屬性的差異，以及如何計算 position 和 size 還是很重要的。
- 誇瀏覽器的事件處理，綁定，反綁定，冒泡，以及如何取得期望的回調上下文。在一次，現成的框架也可以很好的處理這些事情，但是你應該對 IE 瀏覽器和 W3C 標準瀏覽器之間的不同有所瞭解。
- 正則表達式選取 DOM 節點
- 瀏覽器功能檢測以及智能降級
其他
HTTP、WEB安全、正則、優化、重構、響應式、團隊協作、可維護、SEO、UED、架構、職業生涯
參考資料
- 我所瞭解的CSS
- 你不知道你不懂 javascript
- 代碼之謎
- 湯姆大叔的博客: 深入理解JavaScript系列
- JavaScript核心
- Sit The Test: 提供一些知識點的測試，包含html, css, js
最後上兩張圖(祝大家早日成爲一個優秀的程序員)：
