前端技能图谱

基础

HTML / CSS

JavaScript

Node.js

正规表达式

数据格式（如JSON、XML）

RESTful API交互（如jQuery Ajax，Fetch API，ReactiveX）

命令行

中级

ES6 / CoffeScript / TypeScript

SCSS / SASS

CSS3

HTML语义化

面向对象编程

函数式编程

MVC / MVVM / MV*

矢量图形 / 矢量图形动画（如SVG）

单页面应用

安全性（如跨域）

授权（如HTTP Basic、JWT等等）

工程化

代码质量（如JSLint / ESLint / TSLint / CSLint）

代码分析（如Code Climate）

测试覆盖率

构建系统（gulp、grunt、webpack等等）

自动构建（脚本）

兼容性

跨浏览器测试 （Chrome，IE，Firefox，Safari等等）

跨平台测试（Windows、GNU/Linux，Mac OS等等）

跨设备测试（Desktop，Android，iOS，Windows Phone）

跨版本测试（同一个浏览器的不同版本）

前端特定

CSS / CSS3 动画

JavaScript 动画

Web字体嵌入

Icon 字体

图形和图表

CSS Sprite（如glue）

DOM操作（如jQuery、React等等）

模板引擎（如JSX、Handlebars、JSP、Mustache等等）

软件工程

版本管理（如git、svn）

包管理（如npm、bower）

依赖管理

模块化（如CommonJS、WebPack）

调试

浏览器调试

Debug工具

Wireshark / Charles抓包

远程设备调试（如Chrome Inspect Devices）

测试

单元测试

服务测试

UI测试

集成测试

性能与优化

PageSpeed / Yslow 优化

加载优化（如gzip压缩、缓存等等）

性能测试（特别是移动Web）

可用性

压缩（如Minify、Uglify、CleanCSS等等）

设计

切页面

线框图（Wireframe）

响应式设计

网格布局（Grid Layout）

Flexbox布局

SEO

Sitemap（站点地图）

内部链接建设

MicroData / MicroFormat

页面静态内容生成