编程：前端技术图谱

前端技能图谱

• 基础

  • HTML / CSS
  • JavaScript
  • DOM

• 中级篇

  • 数据格式（如JSON、XML）
  • RESTful API交互（如jQuery Ajax，Fetch API，ReactiveX）
  • 正则表达式
  • HTML语义化
  • 命令行
  • Node.js
  • DIV / CSS
  • SCSS / SASS
  • 矢量图形 / 矢量图形动画（如SVG）
  • 单页面应用

• 高级篇

  • ES6 / TypeScript
  • CSS3
  • 面向对象编程
  • 函数式编程
  • MVC / MVVM / MV*
  • 安全性（如跨域）
  • 授权（如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
  • 页面静态内容生成
  • H1、H2、H3和strong使用
  • Title、Description优化
  • 页面静态内容生成

html5知识库

知识图谱由前端技术专家、CSDN博客专家侯志强（@yisuowushinian）绘制，全栈工程师、架构师、Android和HTML5专家张西涛（@offbye）、Html5研发工程师谷震平（@guzhenping）等多位HTML5领域专家、开发高手担任特邀编辑参与内容审核，已收录各核心技术点下精华文章145篇及其他优秀学习资源（视频课程、实践Demo、图书）。想为HTML知识库贡献一份力，马上申请成为HTML5知识库特邀编辑>>

内容精选：

HTML5+CSS3实现类似网易云音乐的移动版播放器
逼真的HTML5 3D水波动画 可多视角浏览
HTML5 Canvas绘制转盘抽奖
HTML网页之坦克大战游戏
让HTML5来为你定位
炫酷实用的10个HTML5动画应用
HTML5 3D衣服摇摆动画特效
避坑宝典：如何选择HTML5游戏引擎
Hybrid H5跨平台性思考
HTML5游戏开发专题视频集

Css3知识库

知识图谱由前端技术专家、CSDN博客专家侯志强（@yisuowushinian）绘制，目前各知识节点下的优秀文章已提取完成，进一步的内容筛优正在进行。

Javascript知识库

知识图谱由Java高级工程师王成委（@jaune161）绘制，腾讯前端高级工程师黄丹华（@danhuang2012），东南大学移动通信国家重点实验室研究生肖果平（@i10630226），CSDN专栏达人、前端技术开发者李刚（@ligang2585116），前端技术开发者袁康（@u011043843）等多位领域专家、开发高手，担任特邀编辑参与内容审核，已收录各核心技术点下精华文章1000多篇及其他优秀学习资源（视频课程、实践Demo、图书）。想为JavaScript知识库贡献一份力，马上申请成为JavaScript知识库特邀编辑>>

内容精选：

全面解析JavaScript中的事件绑定、事件冒泡、事件捕获和事件执行顺序
利用滚动事件window.onscroll与position：fixed写兼容IE6的回到顶部组件
解析Javascript事件冒泡机制
深入了解JavaScript闭包及其机制
JavaScript中的event对象之总结
全面解析Javascript中事件捕获、事件冒泡以及事件委托机制

jQuery知识库

图谱由CSDN博客专家郭晓湉（@XTQueen_up）绘制，网易杭州研究院前端开发工程师刘放（@mevicky）、CSDN博客专家胡旭（@itmyhome）、广发证券前端开发工程师李泽扬、CSDN博客专家吴士龙（@u013047005）等多位领域专家、开发高手，担任特邀编辑参与内容审核，已收录各核心技术点下精华文章300多篇及其他优秀学习资源（视频课程、实践Demo、图书）。想为jQuery知识库贡献一份力，马上申请成为jQuery知识库特邀编辑>>

内容精选：

jQuery+Ajax实现Select动态定数据
一步一步带你了解jQuery过滤选择器：基本过滤选择器、内容过滤选择器、可见性过滤选择器
使用jQuery.makeArray() 将多种类型转换成JavaScript原生Array
jQuery案例分析：Item9动画效果实现过程
使用jQuery让事件动起来

Node.js知识库

知识图谱由腾讯前端高级工程师黄丹华（@danhuang2012）绘制，《Nodejs开发加密货币》作者朱志文（@imfly）、杭州聚火瓶技术有限公司技术负责人李智（@www19940501a）、深圳塔塔互动网络科技技术合伙人稻帅（@enson16855）、CSDN专栏作者李锴（@u010668495）等多位领域专家、开发高手，担任特邀编辑参与内容审核，已收录各核心技术点下精华文章200多篇及其他优秀学习资源（视频课程、实践Demo、图书）。想为Node.js知识库贡献一份力，马上申请成为Node.js知识库特邀编辑>>

内容精选：

为高负载网络优化Nginx和Node.js
深入理解Node.js异步编程
Node.js错误处理最佳实践
Node.js的Connect框架的代码重写与改进
深入理解Node.js的HTTP模块
Node.js应用之静态文件分发器

AngularJS知识库

知识图谱由广发证券前端开发工程师李泽扬绘制，CSDN专栏达人孙华强（@sunhuaqiang1)、江荣波（@Rongbo_J）等多位领域专家、开发高手，担任特邀编辑参与内容审核，已收录各核心技术点下精华文章300多篇及其他优秀学习资源（视频课程、实践Demo、图书）。想为AngularJS知识库贡献一份力，马上申请成为AngularJS知识库特邀编辑>>

内容精选：

深入理解AngularJS UI-Router
跨域解决方案——使用AngularJS和jQuery进行Ajax请求的差异
AngularJS在大型单页面应用中的性能优化
Grunt搭建AngularJS项目
AngularJS指令参数详解
AngularJS中Provider、Service和Factory之间的不同
Angular自定义指令
AngularJS的启动过程分析
AngularJS中的Transclude

React知识库

知识图谱由蚂蚁金服前端工程师林展新绘制，jQuery WeUI作者李宏训（@lihongxun945）、React技术开发者李明明（@limm33）、移动开发者余勃（@yubo_725）等多位领域专家、开发高手，担任特邀编辑参与内容审核，已收录各核心技术点下精华文章300多篇及其他优秀学习资源（视频课程、实践Demo、图书）。想为React知识库贡献一份力，马上申请成为React知识库特邀编辑>>