Web前端知识技能大汇总

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//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

▪HTTPWatch

▪DynaTrace’s Ajax

▪高性能JavaScript

o SEO

o编程知识储备

▪数据结构

▪OOP/AOP

▪原型链/作用域链

▪闭包

▪编程范型

▪设计模式

▪Javascript Tips

o部署流程

▪压缩合并

▪YUI Compressor

▪Google Clousure Complier

▪UglifyJS

▪CleanCSS

▪文档输出

▪JSDoc

▪Dox/Doxmate/Grunt-Doxmate ▪项目构建工具

▪make/Ant

▪GYP

▪Grunt

▪Gulp

▪Yeoman

▪FIS

▪Mod

o代码组织

▪类库模块化

▪CommonJS/AMD

▪YUI3模块

▪业务逻辑模块化

▪bower/component

▪文件加载

▪LABjs

▪SeaJS/Require.js

▪模块化预处理器

▪Browserify

o安全

▪CSRF/XSS

▪CSP

▪Same-origin policy