# 【xxx】前端技能汇总（Jackson Tian） 前端工程师们，珍重！ > Frontend Knowledge Structure 项目起源 还记得@jayli 的这幅前端知识结构图么.fks/images/uploads/wangbixi/2013/11/fks500x453.jpg/images/uploads/wangbixi/2013/11/fks.jpg 图片的 Frontend Knowledge Structure 项目起源 还记得@jayli 的这幅前端知识结构图么.[![fks](/images/uploads/wangbixi/2013/11/fks-500x453.jpg)](/images/uploads/wangbixi/2013/11/fks.jpg) 图片的形式具有诸多的不便。缺失源图的我们，无法为此图贡献些什么，随着时间的迁移，或许有些技术点会发生改变，所以有了这个github项目。我们可以通过协作的方式来共同维护这个项目。Git的历史记录也可以见证前端行业的一些变迁。 尽管会变成文字的方式来维护这些内容，但是我承诺写一个小工具帮大家生成更好玩的图形（基于DataV项目）。 前端开发知识结构 - 前端工程师 - 浏览器 - IE6/[7](http://www.microsoft.com/zh-cn/download/details.aspx?id=2 "连结")/[8](http://windows.microsoft.com/zh-CN/internet-explorer/downloads/ie-8 "连结")/[9](http://windows.microsoft.com/zh-CN/internet-explorer/downloads/ie-9/worldwide-languages "连结")/[10](http://windows.microsoft.com/zh-cn/windows-8/internet-explorer "连结") - [Firefox](http://www.mozilla.org/en-US/ "连结") - [Chrome](http://www.google.com/chrome "连结")/[Safari](http://www.apple.com/safari/ "连结")/[Opera](http://www.opera.com/ "连结") - 编程语言 - [JavaScript](https://developer.mozilla.org/en-US/docs/JavaScript "连结")/[Node.js](http://nodejs.org/ "连结") - [CoffeeScript](http://coffeescript.org/ "连结") - [TypeScript](http://www.typescriptlang.org/ "连结") - 切页面 - [HTML](http://www.w3.org/html/ "连结")/HTML5 - [CSS/CSS3](http://www.w3.org/Style/CSS/ "连结") - [PhotoShop](http://www.photoshop.com/products/photoshop "连结")/[Paint.net](http://www.getpaint.net/ "连结")/[Fireworks](http://www.adobe.com/cn/products/fireworks.html "连结") - 开发工具 - IDE - [VIM](http://www.vim.org/ "连结")/[Sublime Text2](http://www.sublimetext.com/ "连结") - [Notepad++](http://notepad-plus-plus.org/ "连结")/[EditPlus](http://www.editplus.com/ "连结") - [WebStorm](http://www.jetbrains.com/webstorm/ "连结") - [Emacs](http://www.gnu.org/software/emacs/ "连结") [EmacsWiki](http://emacswiki.org/ "连结") - 调试工具 - [Firebug](http://getfirebug.com/ "连结")/[Firecookie](https://addons.mozilla.org/en-US/firefox/addon/firecookie/ "连结") - [YSlow](http://developer.yahoo.com/yslow/ "连结") - [IEDeveloperToolbar](http://www.microsoft.com/en-us/download/details.aspx?id=18359 "连结")/[IETester](http://www.my-debugbar.com/wiki/IETester/HomePage "连结") - [Fiddler](http://www.fiddler2.com/fiddler2/ "连结") - [Chrome Dev Tools](https://developers.google.com/chrome-developer-tools/ "连结") - 版本管理 - [Git](https://github.com/JacksonTian/fks/blob/master/git-scm.com/ "连结")/[SVN](http://subversion.apache.org/ "连结") - [Github](https://github.com/ "连结")/[Bitbucket](https://bitbucket.org/ "连结")/[Google Code](http://code.google.com/hosting/ "连结") - 代码质量 - Coding style - [JSLint](http://www.jslint.com/ "连结")/[JSHint](http://www.jshint.com/ "连结") - [CSSLint](http://csslint.net/ "连结") - [Markup Validation Service](http://validator.w3.org/ "连结") - 单元测试 - [QUnit](http://qunitjs.com/ "连结")/[Jasmine](http://pivotal.github.com/jasmine/ "连结") - [Mocha](http://visionmedia.github.com/mocha/ "连结")/[Should](https://github.com/visionmedia/should.js/ "连结")/[Chai](http://chaijs.com/ "连结")/[Expect](https://github.com/LearnBoost/expect.js/ "连结") - 自动化测试 - [WebDriver](http://docs.seleniumhq.org/docs/03_webdriver.jsp "连结")/[Karma Runner](https://github.com/karma-runner/karma "连结") - 前端库/框架 - [jQuery](http://jquery.com/ "连结")/[Underscore](http://underscorejs.org/ "连结")/[Mootools](http://mootools.net/ "连结")/[Prototype.js](http://www.prototypejs.org/ "连结") - [YUI3](http://yuilibrary.com/projects/yui3/ "连结")/[Dojo](http://dojotoolkit.org/ "连结")/[ExtJS](http://www.sencha.com/products/extjs "连结") - [Backbone](http://backbonejs.org/ "连结")/[KnockoutJS](http://knockoutjs.com/ "连结")/[Emberjs](http://emberjs.com/ "连结") - [AngularJS](http://angularjs.org/ "连结") - [Batarang](https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk "连结") - [Bootstrap](http://getbootstrap.com/ "连结") - 前端标准/规范 - [HTTP1.1](http://www.w3.org/Protocols/rfc2616/rfc2616.html "连结") - [ECMAScript3/5](http://www.ecma-international.org/publications/standards/Ecma-262.htm "连结") - [W3C/DOM/BOM/XHTML/XML/JSON/JSONP](http://www.w3.org/TR/ "连结") - [CommonJS Modules](http://wiki.commonjs.org/wiki/Modules/1.0 "连结")/[AMD](https://github.com/amdjs/amdjs-api/wiki/AMD "连结") - [HTML5](http://www.w3.org/html/wg/drafts/html/master/ "连结")/[CSS3](http://www.w3.org/Style/CSS/specs.en.html "连结") - 性能 - [JSPerf](http://jsperf.com/ "连结") - [YSlow 35 rules](http://developer.yahoo.com/performance/rules.html "连结") - [PageSpeed](https://developers.google.com/speed/pagespeed/ "连结") - [HTTPWatch](http://www.httpwatch.com/ "连结") - [DynaTrace's Ajax](http://www.compuware.com/application-performance-management/dynatrace-ajax-download.html "连结") - [高性能JavaScript](http://book.douban.com/subject/5362856/ "连结") - 编程知识储备 - 数据结构 - OOP/AOP - [原型链](http://net.tutsplus.com/tutorials/javascript-ajax/prototypes-in-javascript-what-you-need-to-know/ "连结")/作用域链 - [闭包](http://www.jibbering.com/faq/notes/closures/ "连结") - 函数式编程 - [设计模式](http://addyosmani.com/resources/essentialjsdesignpatterns/book/ "连结") - [Javascript Tips](http://sanshi.me/articles/JavaScript-Garden-CN/html/index.html "连结") - 部署流程 - 压缩合并 - [YUI Compressor](http://developer.yahoo.com/yui/compressor/ "连结") - [Google Clousure Complier](https://developers.google.com/closure/compiler/ "连结") - [UglifyJS](https://github.com/mishoo/UglifyJS "连结") - [CleanCSS](https://github.com/GoalSmashers/clean-css "连结") - 文档输出 - [JSDoc](http://code.google.com/p/jsdoc-toolkit/ "连结") - [Dox](https://github.com/visionmedia/dox "连结")/[Doxmate](https://github.com/JacksonTian/doxmate "连结") - 项目构建工具 - [make](http://www.gnu.org/software/make/ "连结")/[Ant](http://ant.apache.org/ "连结") - [GYP](http://code.google.com/p/gyp/ "连结") - [Grunt](http://gruntjs.com/ "连结") - [Yeoman](http://yeoman.io/ "连结") - 代码组织 - 类库模块化 - [CommonJS](http://www.commonjs.org/ "连结")/AMD - [YUI3模块](http://yuilibrary.com/projects/yui3/ "连结") - 业务逻辑模块化 - [bower](https://github.com/twitter/bower "连结")/[component](https://github.com/component/component "连结") - 文件加载 - [LABjs](http://labjs.com/ "连结") - [SeaJS](http://seajs.org/ "连结")/[Require.js](http://requirejs.org/ "连结") - 模块化预处理器 - [Browserify](https://github.com/substack/node-browserify "连结") - 安全 - [CSRF](http://en.wikipedia.org/wiki/Cross-site_request_forgery "连结")/[XSS](http://en.wikipedia.org/wiki/Cross-site_scripting "连结") - ADsafe/Caja/Sandbox - 移动Web - HTML5/CSS3 - 响应式设计 - [Zeptojs](http://zeptojs.com/ "连结")/[iScroll](http://cubiq.org/iscroll "连结") - V5/[Sencha Touch](http://www.sencha.com/products/touch "连结") - [PhoneGap](http://phonegap.com/ "连结") - [jQuery Mobile](http://jquerymobile.com/ "连结") - 前沿技术社区/会议 - [D2](http://d2forum.org/ "连结")/[WebRebuild](http://www.webrebuild.org/ "连结") - NodeParty/[W3CTech](http://w3ctech.com/ "连结")/[HTML5梦工厂](http://www.html5dw.com/ "连结") - [JSConf](http://jsconf.com/ "连结")/[沪JS(JSConf.cn)](http://jsconf.cn/ "连结") - QCon/Velocity/SDCC - [JSConf](http://jsconf.com/ "连结")/[NodeConf](http://www.nodeconf.com/ "连结") - [CSSConf](http://cssconf.com/ "连结") - YDN/YUIConf - 计算机知识储备 - 编译原理 - 计算机网络 - 操作系统 - 算法原理 - 软件工程/软件测试原理 - 软技能 - 知识管理/总结分享 - 沟通技巧/团队协作 - 需求管理/PM - 交互设计/可用性/可访问性知识 - 可视化 - SVG/Canvas/VML - [D3](http://d3js.org/ "连结")/[Raphaël](http://raphaeljs.com/ "连结")/[DataV](http://datavlab.org/datavjs/ "连结") - 后端工程师 - 编程语言 - C/C++/Java/PHP/Ruby/Python/... - 服务器 - [Nginx](http://nginx.org/en/ "连结") - [Apache](http://httpd.apache.org/ "连结") - 数据库 - SQL - MySQL/PostgreSQL/Oracle - [MongoDB](http://www.mongodb.org/ "连结")/[CouchDB](http://couchdb.apache.org/ "连结") - 数据缓存 - [Redis](http://redis.io/ "连结") - [Memcached](http://memcached.org/ "连结") - 文件缓存/代理 - [Varnish](https://www.varnish-cache.org/ "连结") - [Squid](http://www.squid-cache.org/ "连结") - 操作系统 - Unix/Linux/OS X/Windows - 数据结构 前端书籍推荐 ★越少越简单,越适合入门 CSS - [CSS权威指南 （第3版）](http://book.douban.com/subject/2308234/ "连结")★★ - [精通CSS](http://book.douban.com/subject/4736167/ "连结")★★★ JavaScript - [JavaScript DOM编程艺术 （第2版）](http://book.douban.com/subject/6038371/ "连结")★ - [JavaScript高级程序设计（第3版）](http://book.douban.com/subject/10546125/ "连结")★★ - [锋利的jQuery](http://book.douban.com/subject/10792216/ "连结")★★ - [高性能JavaScript](http://book.douban.com/subject/5362856/ "连结")★★★ - [JavaScript语言精粹](http://book.douban.com/subject/3590768/ "连结")★★★ - [JavaScript权威指南](http://book.douban.com/subject/10549733/ "连结")★★★ - [编写可维护的JavaScript](http://book.douban.com/subject/21792530/ "连结")★★★ - [JAVASCRIPT语言精髓与编程实践](http://book.douban.com/subject/3012828/ "连结")★★★ - [Effective Javascript](http://www.amazon.com/Effective-JavaScript-Specific-Software-Development/dp/0321812182 "连结")★★★ - [Secrets of the JavaScript Ninja](http://book.douban.com/subject/3176860/ "连结")★★★ - [JavaScript设计模式](http://book.douban.com/subject/3329540/ "连结")★★★★ 后端书籍推荐 Linux管理 - [Linux 系统管理技术手册](http://book.douban.com/subject/3042029/ "连结") - [鸟哥的 Linux 私房菜](http://book.douban.com/subject/4889838/ "连结") - [Linux 101 Hacks](http://www.thegeekstuff.com/linux-101-hacks-free-ebook-non-english/ "连结") - [UNIX Shell Scripting](http://book.douban.com/subject/3519360/ "连结") - [The Linux Command Line](http://book.douban.com/subject/6806862/ "连结") Linux编程 - [Linux程序设计](http://book.douban.com/subject/4831448/ "连结") - [Linux系统编程](http://book.douban.com/subject/3907181/ "连结") - [Unix环境高级编程](http://book.douban.com/subject/1788421/ "连结") - [Unix编程艺术](http://book.douban.com/subject/1467587/ "连结") - [The Linux Programming Interface](http://book.douban.com/subject/4292217/ "连结") - [程序员的自我修养](http://book.douban.com/subject/3652388/ "连结") - [深入理解Linux内核](http://book.douban.com/subject/2287506/ "连结") - [Unix网络编程](http://book.douban.com/subject/1500149/ "连结") - [TCP/IP高级编程](http://book.douban.com/subject/1088054/ "连结") C/C++ - [Linux C编程一站式学习](http://book.douban.com/subject/4141733/ "连结") - [C和指针](http://book.douban.com/subject/3012360/ "连结") - [C陷阱与缺陷](http://book.douban.com/subject/2778632/ "连结") - [C专家编程](http://book.douban.com/subject/2377310/ "连结") - [C语言核心技术](http://book.douban.com/subject/2226913/ "连结") - [彻底搞定C指针](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved=0CDEQFjAA&url=http%3A%2F%2Fblogimg.chinaunix.net%2Fblog%2Fupfile2%2F110210170023.pdf&ei=P95mUfrmNKKriALS04HAAw&usg=AFQjCNEzB88PnpfL0fRgJDkP3O9TlBPswA&sig2=isyd4ktsByNBMa5M9EPhRQ&bvm=bv.45107431,d.cGE&cad=rjt "连结") - [征服C指针](http://book.douban.com/subject/21317828/ "连结") - [C++编程思想](http://book.douban.com/subject/1094797/ "连结") - [高质量程序设计指南---C/C++语言](http://book.douban.com/subject/2116929/ "连结") --- **分类**：建站 **作者**：子龙 **链接**：https://octohz.com/p/3157