Web前端知识技能大汇总
项目起源
图片的形式具有诸多的不便。缺失源图的我们，无法为此图贡献些什么，随着时间的迁移，或许有些技术点会发生改变，所以有了这个GitHub项目。我们可以通过协作的方式来共同维护这个项目。Git的历史记录也可以见证前端行业的一些变迁。 可视化效果
前端开发知识结构
?
前端工程师
o 浏览器
? IE6/7/8/9/10/11 (Trident) ? Firefox (Gecko)
? Chrome/Chromium (Blink) ? Safari (WebKit) ? Opera (Blink) o 编程语言
JavaScript/Node.js ? CoffeeScript ? TypeScript o 切页面
? HTML/HTML5 ? CSS/CSS3
? Sass/LESS/Stylus
? PhotoShop/Paint.net/Fireworks/GIMP/Sketch o 开发工具
? 编辑器和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
? 调试工具
? Firebug/Firecookie ? YSlow
? IEDeveloperToolbar/IETester ? Fiddler
? Chrome Dev Tools ? Dragonfly ? DebugBar ? Venkman
? 版本管理
? Git/SVN/Mercurial
? Github/GitLab/Bitbucket/Gitorious/GNU Savannah/Launchpad/SourceForge/TeamForge
o 代码质量
? 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
o 前端库/框架
? 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 o 前端标准/规范
? HTTP/1.1: RFCs 7230-7235 ? HTTP/2
? ECMAScript3/5
? W3C: DOM/BOM/XHTML/XML/JSON/JSONP/… ? CommonJS Modules/AMD ? HTML5/CSS3 ? Semantic Web
? MicroData ? RDFa
? Web Accessibility
? WCAG
? Role Attribute ? WAI-ARIA
o 性能
? JSPerf
? YSlow 35 rules ? PageSpeed
?
o o
o
o
o
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
代码组织
? 类库模块化
? CommonJS/AMD ? YUI3模块
? 业务逻辑模块化
? bower/component
? 文件加载
? LABjs
? SeaJS/Require.js
? 模块化预处理器
? Browserify
安全
? CSRF/XSS ? CSP
? Same-origin policy
?
ADsafe/Caja/Sandbox
o 移动Web
? HTML5/CSS3 ? 响应式网页设计 ? Zeptojs/iScroll ? V5/Sencha Touch ? PhoneGap
? jQuery Mobile
? W3C Mobile Web Initiative ? W3C mobileOK Checker ? Open Mobile Alliance o 前沿技术社区/会议
? D2/WebRebuild
? NodeParty/W3CTech/HTML5梦工厂 ? JSConf/沪JS(JSConf.cn) ? QCon/Velocity/SDCC ? JSConf/NodeConf ? CSSConf ? YDN/YUIConf ? HybridApp ? WHATWG ? MDN ? codepen ? w3cplus ? CNode o 计算机知识储备
? 编译原理 ? 计算机网络 ? 操作系统 ? 算法原理
? 软件工程/软件测试原理 ? Unicode o 软技能
? 知识管理/总结分享 ? 沟通技巧/团队协作 ? 需求管理/PM
? 交互设计/可用性/可访问性知识 o 可视化
? SVG/Canvas/VML
? SVG: D3/Rapha?l/Snap.svg/DataV ? Canvas: CreateJS/KineticJS ? WebGL/Three.JS
? 后端工程师
o 编程语言
?