前端技能树

大前端：

1. HTML
2. CSS
3. JavaScript
4. 工具
5. 后端
6. 性能
7. 测试
8. 开发守则
9. 用户体验

HTML：

1. HTML语义化
2. HTML5
3. DOCTYPE
4. SEO
5. Wap
6. SVG/VML

CSS：

1. CSS2（布局方式、CSS权威指南、通用样式）
2. CSS3（new selector、new css style）
3. IE通用Bug（双倍边距、…）
4. IE hack方式（条件注释、CSS hack）
5. 图片（IE png8透明、css font icon、css spirite、图片格式与压缩率的关系、预设值width/height提升性能）

JavaScript：

1. 安全相关（跨站脚本攻击）
2. 基础知识（DOM、兼容性bug、BOM、跨域相关）
3. Good parts
4. nodejs
5. coffee script
6. 设计模式
7. 熟悉一门框架（jQuery/YUI/Moontool）
8. 新技术（WebWorker、WebSocket、localStorage、Canvas、Audio/Video、SVG、ECMAScript 5、History api、File api、Geolocation API、Drag&Drop、Messaging、Offline cache、其他）

DOM：DOM Traversal、事件、其他、Rang api

BOM：XMLHttpRequest、CSS Object Model、其他

工具：

1. 开发工具（编辑器、firebug/Web developer、chrome默认工具、fiddler/其他代理工具、jslint/jsdev）
2. 构建工具（G-build、Google、YUI compressor、uglifyjs）
3. 测试工具
4. 学习工具（信息记录[workflowy.com、EverNote、zootool]、信息获取[RSS（google reader）、Twitter、新浪微博]）
5. 版本管理工具（SVN、git、hg）

后端：

1. 熟悉Django/Ruby on rails类似的后端WEB框架
2. Linux(Ubuntu等)
3. Nodejs
4. HTTP协议及其相关网络知识（server push（socket io）、其他）
5. python/ruby/java/C#…
6. 模板引擎

性能：

1. 延迟加载（合理划分页面加载顺序）
2. 雅虎军规（连接数、不能迷信也不能完全不信）
3. js性能

测试：

1. 功能测试（兼容性测试、文字是无意义的英文、窗口放大缩小、文字超出容器、没有css/js时候（下载失败）、图片下载失败、其他…）
2. 性能测试（yslow、pageSpeed、showSlow等网站）
3. 自动化测试（selenium等）
4. 单元测试（Qunit、jasmine）

开发守则：

1. 优雅降级
2. 行为与样式分离
3. 命名规范
4. 依赖管理
5. 注释（清晰易懂、demo>描述）

用户体验：

1. 可用性
2. 交互体验
3. 基础的审美

参考文章：https://mp.weixin.qq.com/s/_hb3g6OT0gXb4n739TgXVg