前端领域的发展非常迅猛,大前端的时代到来了,据说每隔12-24个月,前端的难度将增加一倍,从下面的技术栈就可以看出前端领域的丰富度和复杂度
核心概念
HTML
|-- DOM
|-- Element
|-- Attribute
JavaScript
|-- 原型 Prototype
|-- 作用域 Scope
|-- 闭包 Closure
|-- JSON
|-- AJAX
CSS
|-- 选择器 Selector
|-- 优先级
|-- 特性 Specificity
|-- 盒子模型
渲染引擎
|-- Trident (IE)
|-- Blink / prev. WebKit (Chrome)
|-- Gecko (Firefox)
|-- WebKit (Safari)
|-- Blink / prev. Presto (Opera)
|-- EdgeHTML (Edge)
脚本引擎
|-- JScript (IE8- / ASP)
|-- Chakra (IE9+ / Edge)
|-- V8 (Chrome / Opera / Nodejs / MongoDB)
|-- SpiderMonkey (Firefox)
|-- Nitro (Safari)
编译任务
|-- 精简
|-- 编译
|-- 合并
|-- 混淆
|-- 图像优化
|-- 单元测试
包管理
|-- npm
|-- Bower
编译工具
|-- Grunt
|-- Gulp
|-- Brunch
|-- Yeoman
|-- Broccoli
调试
|-- Developer Tools
|-- Firebug
基础工具
|-- Node.js
|-- Phantom.js
|-- fibjs
库
|-- jQuery
|-- Prototype
|-- Zepto
|-- MooTool
框架
|-- AngularJS
|-- Backbone
|-- Knockout
|-- Ember
|-- React
|-- polymer
|-- Deft.js
|-- Vue
UI框架
|-- Bootstrap
|-- Semantic UI
|-- Foundation
|-- Material UI
|-- jQuery UI
手机 UI框架
|-- jQuery Mobile
|-- Jo
|-- Dojo Mobile
|-- Lungo
CSS3 动画
|-- Animate.css
|-- bounce.js
|-- Effeckt.css
|-- move.js
CSS 预处理器
LESS
|-- LESS
|-- Hat
Sass(SCSS)
|-- Compass
|-- Bourbon
|-- Gumby
Stylus
|-- nib
质量控制
|-- JSLint
|-- JSHint
|-- jscs
|-- Closure Linter
测试工具
|-- QUnit
|-- Jasmine
|-- Mocha
|-- Selenium
|-- WebDriverIO
|-- Karma
|-- nodeunit
|-- tape
在线测试工具
|-- Sauce Labs
|-- Browser Stack
|-- Browser Shots
|-- Browser Sandbox
|-- Cross Browser Testing
模块化
|-- ES6 Module
|-- CommonJS
|-- webpack
|-- browserify
|-- AMD
|-- RequireJS
|-- UMD
|-- umd
WebSocket
|-- Socket.io
|-- web-socket-js
数据可视化
|-- D3
|-- Echarts
|-- HighCharts
|-- Vis.js
|-- Flot
WebGL
|-- Three.js
|-- Babylon.js
|-- Pixi.js
模板引擎
|-- Handlebars
|-- Haml
|-- Slim
|-- Jade
|-- Ejs
|-- Spacebars
|-- mustache
移动应用开发
|-- PhoneGap / Cordova
|-- MUI
|-- React Native
|-- Ionic