前端开发知识结构

前端工程师

浏览器 IE6/7/8/9/10/11 (Trident) Firefox (Gecko) Chrome/Chromium (Blink) Safari (WebKit) Opera (Blink) 编程语言 JavaScript/Node.js CoffeeScript TypeScript 切页面 HTML/HTML5 CSS/CSS3 Sass/LESS/Stylus/postCSS PhotoShop/Paint.net/Fireworks/GIMP/Sketch

开发工具

编辑器和 IDE

VIM/Sublime Text2 Notepad++/EditPlus WebStorm Emacs EmacsWiki Brackets Atom Lime Text Light Table Codebox TextMate Neovim Komodo IDE / Edit Eclipse Visual Studio/Visual Studio Code NetBeans Cloud9 IDE HBuilder Nuclide VS code

调试工具

Firebug/Firecookie YSlow IEDeveloperToolbar/IETester Fiddler Chrome Dev Tools Dragonfly DebugBar Venkman Charles ###版本管理 Git/SVN/Mercurial Github/GitLab/Bitbucket/Gitorious/GNU Savannah/Launchpad/SourceForge/TeamForge ###代码质量 Coding style JSLint/JSHint/jscs/ESLint CSSLint Markup Validation Service HTML Validators ###单元测试 QUnit/Jasmine Mocha/Should/Chai/Expect Unit JS ###自动化测试 WebDriver/Protractor/Karma Runner/Sahi phantomjs SourceLabs/BrowserStack

前端库/框架

jQuery/Underscore/Mootools/Prototype.js YUI3/Dojo/ExtJS/KISSY Backbone/KnockoutJS/Emberjs AngularJS Batarang Bootstrap Semantic UI Juice UI Web Atoms Polymer Dhtmlx qooxdoo React Brick vue.js

前端标准/规范

HTTP/1.1: RFCs 7230-7235 HTTP/2 ECMAScript3/5 ECMAScript6 W3C: DOM/BOM/XHTML/XML/JSON/JSONP/... CommonJS Modules/AMD HTML5/CSS3 Semantic Web MicroData RDFa Web Accessibility WCAG Role Attribute WAI-ARIA 性能 JSPerf YSlow 35 rules PageSpeed HTTPWatch DynaTrace's Ajax 高性能 JavaScript SEO

编程知识储备

数据结构

OOP/AOP 原型链/作用域链 闭包

编程范型

设计模式

Javascript Tips

部署流程

压缩合并 YUI Compressor Google Clousure Complier UglifyJS CleanCSS

文档输出

JSDoc Dox/Doxmate/Grunt-Doxmate 项目构建工具 make/Ant GYP Grunt Gulp Yeoman FIS Mod ES6 ＋ 转换器 Traceur Babel

代码组织

类库模块化

CommonJS/AMD YUI3 模块 webpack

业务逻辑模块化

bower/component

文件加载

LABjs SeaJS/Require.js 模块化预处理器 Browserify

安全

CSRF/XSS CSP Same-origin policy ADsafe/Caja/Sandbox 移动 Web HTML5/CSS3 响应式网页设计 Zeptojs/iScroll V5/Sencha Touch PhoneGap jQuery Mobile W3C Mobile Web Initiative W3C mobileOK Checker Open Mobile Alliance React Native 前沿技术社区/会议 D2/WebRebuild NodeParty/W3CTech/HTML5 梦工厂 JSConf/沪 JS(JSConf.cn) QCon/Velocity/SDCC JSConf/NodeConf CSSConf YDN/YUIConf HybridApp WHATWG MDN codepen w3cplus CNode 计算机知识储备 编译原理 计算机网络 操作系统 算法原理 软件工程/软件测试原理 Unicode 软技能 知识管理/总结分享 沟通技巧/团队协作 需求管理/PM 交互设计/可用性/可访问性知识 可视化 SVG/Canvas/VML SVG: D3/Raphaël/Snap.svg/DataV Canvas: CreateJS/KineticJS WebGL/Three.JS 后端工程师

编程语言

C/C++/Java/PHP/Ruby/Python/... 网页服务器 Nginx Apache Lighttpd 数据库 SQL MySQL/PostgreSQL/Oracle/DB2 MongoDB/CouchDB 数据缓存 Redis Memcached 文件缓存/代理 Varnish Squid 操作系统 Unix/Linux/OS X/Windows 数据结构

前端书籍推荐

CSS

Eric Meyer 谈 CSS（卷二）★★★ CSS 权威指南 （第 3 版）★★ 精通 CSS★★★ HTML & CSS 设计与构建网站 ★ JavaScript

JavaScript & jQuery 交互式 Web 前端开发 ★ JavaScript DOM 编程艺术 （第 2 版）★ JavaScript 高级程序设计（第 3 版）★★ 锋利的 jQuery★★ 高性能 JavaScript★★★ JavaScript 语言精粹 ★★★ JavaScript 权威指南 ★★★ 编写可维护的 JavaScript★★★ JAVASCRIPT 语言精髓与编程实践 ★★★ Effective Javascript★★★ Secrets of the JavaScript Ninja★★★ JavaScript 模式 ★★★ JavaScript 设计模式 ★★★★ 基于 MVC 的 JavaScript Web 富应用开发 ★★★ 性能实践

高性能网站建设指南 ★ 高性能网站建设进阶指南 ★★ Web 性能实践日志 ★★★ Web 性能权威指南 ★★★ 版本控制工具

版本控制之道 (git)★★ Pro Git★★★ Git 权威指南 ★★★★ 后端书籍推荐

Linux 管理

Linux 系统管理技术手册 鸟哥的 Linux 私房菜 Linux 101 Hacks UNIX Shell Scripting The Linux Command Line Linux Network Administrator's Guide Linux 编程

Linux 程序设计 Linux 系统编程 Unix 环境高级编程 Unix 编程艺术 The Linux Programming Interface 程序员的自我修养 深入理解 Linux 内核 Unix 网络编程 TCP/IP 高级编程 C/C++

Linux C 编程一站式学习 C 和指针 C 陷阱与缺陷 C 专家编程 C 语言核心技术 彻底搞定 C 指针 征服 C 指针 C++编程思想 高质量程序设计指南---C/C++语言 Inside the C++ Object Model A Tour of C++ The C++ Programming Language The C++ Standard Library - A Tutorial and Reference The C++ Standard (INCITS/ISO/IEC 14882-2011) Overview of the New C++ 前端工作面试

前端工作面试问题 前端开发面试题（中文）

前端指南 [read] 成为 Web 开发者 [read] Isobar 前端代码标准 [read] Web 基本原理 [read] 前端课程 [read] freeCodeCamp [interact] Planing a frontend JS Application [watch] So, You Want to be a frontend Engineer [watch] Front End Web Development Career Kickstart [watch][$] 前端 Web 开发入门 [watch][$] frontend Web Development Quick Start With HTML5, CSS, and JavaScript [watch][$] Web 开发介绍 [watch][$] 前端 Web 开发基本原理 [watch][$] Lean frontend Engineering [watch][$] A Baseline for frontend [JS] Developers: 2015 [read] 了解前端 Web 开发 [watch][$] 前端开发精通 [watch][$] 没有学位的前端 Web 开发者 [watch][$] 译者补充: 成为一名优秀的 Web 前端开发者 What makes a good front end engineer? How to become a web developer