前端技能汇总 Frontend Knowledge Structure

项目起源

还记得@jayli 的这幅前端知识结构图么。

前端技能汇总 Frontend Knowledge Structure_第1张图片

图片的形式具有诸多的不便。缺失源图的我们,无法为此图贡献些什么,随着时间的迁移,或许有些技术点会发生改变,所以有了这个GitHub项目。我们可以通过协作的方式来共同维护这个项目。Git的历史记录也可以见证前端行业的一些变迁。

可视化效果

前端开发知识结构

  • 前端工程师

    • 浏览器
      • IE6/7/8/9/10/11 (Trident)
      • Firefox (Gecko)
      • Chrome/Chromium (Blink)
      • Safari (WebKit)
      • Opera (Blink)
    • 编程语言
      • JavaScript/Node.js
      • CoffeeScript
      • TypeScript
    • 切页面
      • HTML/HTML5
      • CSS/CSS3
      • Sass/LESS/Stylus/postCSS
      • PhotoShop/Paint.net/Fireworks/GIMP/Sketch
    • 开发工具
      • 编辑器和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
    • 代码质量
      • Coding style
        • JSLint/JSHint/jscs/ESLint
        • CSSLint
        • Markup Validation Service
        • HTML Validators
      • 单元测试
        • QUnit/Jasmine
        • Mocha/Should/Chai/Expect
        • Unit JS
      • 自动化测试
        • WebDriver/Protractor/Karma Runner/Sahi
        • phantomjs
        • SourceLabs/BrowserStack
    • 前端库/框架
      • 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
      • vue.js
    • 前端标准/规范
      • HTTP/1.1: RFCs 7230-7235
      • HTTP/2
      • ECMAScript3/5
      • ECMAScript6
      • W3C: DOM/BOM/XHTML/XML/JSON/JSONP/...
      • CommonJS Modules/AMD
      • HTML5/CSS3
      • Semantic Web
        • MicroData
        • RDFa
      • Web Accessibility
        • WCAG
        • Role Attribute
        • WAI-ARIA
    • 性能
      • JSPerf
      • YSlow 35 rules
      • PageSpeed
      • 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模块
        • webpack
      • 业务逻辑模块化
        • bower/component
      • 文件加载
        • LABjs
        • SeaJS/Require.js
      • 模块化预处理器
        • Browserify
    • 安全
      • CSRF/XSS
      • CSP
      • Same-origin policy
      • ADsafe/Caja/Sandbox
    • 移动Web
      • HTML5/CSS3
      • 响应式网页设计
      • Zeptojs/iScroll
      • V5/Sencha Touch
      • PhoneGap
      • jQuery Mobile
      • W3C Mobile Web Initiative
      • W3C mobileOK Checker
      • Open Mobile Alliance
    • 前沿技术社区/会议
      • D2/WebRebuild
      • NodeParty/W3CTech/HTML5梦工厂
      • JSConf/沪JS(JSConf.cn)
      • QCon/Velocity/SDCC
      • JSConf/NodeConf
      • CSSConf
      • YDN/YUIConf
      • HybridApp
      • WHATWG
      • MDN
      • codepen
      • w3cplus
      • CNode
    • 计算机知识储备
      • 编译原理
      • 计算机网络
      • 操作系统
      • 算法原理
      • 软件工程/软件测试原理
      • Unicode
    • 软技能
      • 知识管理/总结分享
      • 沟通技巧/团队协作
      • 需求管理/PM
      • 交互设计/可用性/可访问性知识
    • 可视化
      • SVG/Canvas/VML
      • SVG: D3/Raphaël/Snap.svg/DataV
      • Canvas: CreateJS/KineticJS
      • WebGL/Three.JS
  • 后端工程师

    • 编程语言
      • C/C++/Java/PHP/Ruby/Python/...
    • 网页服务器
      • Nginx
      • Apache
      • Lighttpd
    • 数据库
      • SQL
      • MySQL/PostgreSQL/Oracle/DB2
      • MongoDB/CouchDB
    • 数据缓存
      • Redis
      • Memcached
    • 文件缓存/代理
      • Varnish
      • Squid
    • 操作系统
      • Unix/Linux/OS X/Windows
    • 数据结构

前端书籍推荐

★越少越简单,越适合入门,★多的要么是难度比较高,要么是比较适合在后面看,比如讲性能之类的书.

CSS

  • Eric Meyer 谈 CSS(卷二)★★★
  • CSS权威指南 (第3版)★★
  • 精通CSS★★★
  • HTML & CSS设计与构建网站★

JavaScript

  • JavaScript & jQuery交互式Web前端开发★
  • JavaScript DOM编程艺术 (第2版)★
  • JavaScript高级程序设计(第3版)★★
  • 锋利的jQuery★★
  • 高性能JavaScript★★★
  • JavaScript语言精粹★★★
  • JavaScript权威指南★★★
  • 编写可维护的JavaScript★★★
  • JAVASCRIPT语言精髓与编程实践★★★
  • Effective Javascript★★★
  • Secrets of the JavaScript Ninja★★★
  • JavaScript模式★★★
  • JavaScript设计模式★★★★
  • 基于MVC的JavaScript Web富应用开发★★★

性能实践

  • Web性能实践日志★★★
  • Web性能权威指南★★★

版本控制工具

  • 版本控制之道 (git)★★
  • Pro Git★★★
  • Git权威指南★★★★

后端书籍推荐

Linux管理

  • Linux 系统管理技术手册
  • 鸟哥的 Linux 私房菜
  • Linux 101 Hacks
  • UNIX Shell Scripting
  • The Linux Command Line
  • Linux Network Administrator's Guide

Linux编程

  • Linux程序设计
  • Linux系统编程
  • Unix环境高级编程
  • Unix编程艺术
  • The Linux Programming Interface
  • 程序员的自我修养
  • 深入理解Linux内核
  • Unix网络编程
  • TCP/IP高级编程

C/C++

  • Linux C编程一站式学习
  • C和指针
  • C陷阱与缺陷
  • C专家编程
  • C语言核心技术
  • 彻底搞定C指针
  • 征服C指针
  • C++编程思想
  • 高质量程序设计指南---C/C++语言
  • Inside the C++ Object Model
  • A Tour of C++
  • The C++ Programming Language
  • The C++ Standard Library - A Tutorial and Reference
  • The C++ Standard (INCITS/ISO/IEC 14882-2011)
  • Overview of the New C++

前端工作面试

  • 前端工作面试问题
  • 前端开发面试题(中文)

转: https://github.com/JacksonTian/fks#frontend-knowledge-structure    http://html5ify.com/fks/

 

你可能感兴趣的:(前端技能汇总 Frontend Knowledge Structure)