Frontend Knowledge Structure

前端知识结构图

可视化效果

代码质量

• Coding style
• JSLint/JSHint/jscs
• CSSLint
• Markup Validation Service
• HTML Validators
• 单元测试
• QUnit/Jasmine
• Mocha/Should/Chai/Expect
• Unit JS
• 自动化测试
• WebDriver/Protractor/Karma Runner/Sahi
• phantomjs
• SourceLabs/BrowserStack

性能

• JSPerf
• YSlow 35 rules
• PageSpeed
• HTTPWatch
• DynaTrace's Ajax
• 高性能JavaScript

编程知识储备

• 数据结构
• OOP/AOP
• 原型链/作用域链
• 闭包
• 编程范型
• 设计模式
• Javascript Tips

部署流程

• 压缩合并
• YUI Compressor
• Google Clousure Complier
• UglifyJS
• CleanCSS
• 文档输出
• JSDoc
• Dox/Doxmate/Grunt-Doxmate
• 项目构建工具
• make/Ant
• GYP
• Grunt
• Gulp
• Yeoman
• FIS
• Mod

代码组织

• 类库模块化
• CommonJS/AMD
• YUI3模块
• 业务逻辑模块化
• 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

前沿技术社区/会议

• D2/WebRebuild
• NodeParty/W3CTech/HTML5梦工厂
• JSConf/沪JS(JSConf.cn)
• QCon/Velocity/SDCC
• JSConf/NodeConf
• CSSConf
• YDN/YUIConf
• HybridApp
• WHATWG

计算机知识储备

• 编译原理
• 计算机网络
• 操作系统
• 算法原理
• 软件工程/软件测试原理
• Unicode

软技能

• 知识管理/总结分享
• 沟通技巧/团队协作
• 需求管理/PM
• 交互设计/可用性/可访问性知识

可视化

• SVG/Canvas/VML
• SVG: D3/Raphaël/Snap.svg/DataV
• Canvas: CreateJS/KineticJS
• WebGL/Three.JS

<br />
来源：Frontend Knowledge Structure