Web前端知识技能大汇总

项目起源

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

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

　　可视化效果

　前端开发知识结构

前端工程师
- 浏览器
  - IE6/7/8/9/10/11 (Trident)
  - Firefox (Gecko)
  - Chrome/Chromium (Blink)
  - Safari (WebKit)
  - Opera (Blink)
- 编程语言
- 切页面
  - HTML/HTML5
  - CSS/CSS3
  - Sass/LESS/Stylus
  - 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
  - 调试工具
  - 版本管理
    - Git/SVN/Mercurial
    - Github/GitLab/Bitbucket/Gitorious/GNU Savannah/Launchpad/SourceForge/TeamForge
- 代码质量
  - Coding style
  - 单元测试
    - QUnit/Jasmine
    - Mocha/Should/Chai/Expect
    - Unit JS
  - 自动化测试
- 前端库/框架
  - 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
- 前端标准/规范
  - HTTP/1.1: RFCs 7230-7235
  - HTTP/2
  - ECMAScript3/5
  - W3C: DOM/BOM/XHTML/XML/JSON/JSONP/…
  - CommonJS Modules/AMD
  - HTML5/CSS3
  - Semantic Web
    - MicroData
    - RDFa
  - Web Accessibility
- 性能
- SEO
- 编程知识储备
  - 数据结构
  - OOP/AOP
  - 原型链/作用域链
  - 闭包
  - 编程范型
  - 设计模式
  - Javascript Tips
- 部署流程
  - 压缩合并
  - 文档输出
    - JSDoc
    - Dox/Doxmate/Grunt-Doxmate
  - 项目构建工具
    - make/Ant
    - GYP
    - Grunt
    - Gulp
    - Yeoman
    - FIS
    - Mod
- 代码组织
  - 类库模块化
    - CommonJS/AMD
    - YUI3模块
  - 业务逻辑模块化
    - 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

　　JavaScript

　　性能实践

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

　　版本控制工具

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

　后端书籍推荐

　　Linux管理

　　Linux编程

　　C/C++

　前端工作面试

前端工作面试问题

Web前端知识技能大汇总的更多相关文章

整理六百篇web前端知识混总
9个有用的和免费的工具来支持动态网页开发 8个基本的引导工具的网页设计师 11款CSS3动画工具的开发 2016年某前端群题目答案参考 9最好的JavaScript压缩工具创建响应式布局的10款优秀 ...
web前端知识体系总结
1. 前言大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...
自己总结的web前端知识体系大全【欢迎补充】
1. 前言大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...
WEB前端知识体系脑图
说在开始的话: 我上大学那会,虽说主要是学Java语言,但是web前端也稍微学了一些,那时候对前端也没多在意,因为涉入的不深,可以搞一个差不多可以看的界面就可以了,其他也没过多在意. 因为稍微了解一点 ...
web前端知识体系大全
1. 前言大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...
web前端知识体系小结（转）
1. 前言大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...
Web前端知识体系精简
Web前端技术由html.css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知 ...
（转）web前端知识精简
Web前端技术由 html.css 和 javascript 三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学 ...
Web前端知识体系
看到一篇不错的文章,拿来收藏和分享. 原文:http://mp.weixin.qq.com/s/UFTfdE7LYhHquWEzwZKLCQ Web前端技术由html.css和 javascript三 ...

随机推荐

张小龙《微信背后的产品观》之PPT完整文字版
微信回顾 433天,一亿用户成为移动互联网的新入口启动(2010年11月19日) 用户数突破1亿 1.0 1月26日 2.0 5月10日语音对讲 2.5 8月3日查看那附近的人 3.0 10月 ...
SpringMVC配置入門
我的開發環境開發工具: springsource-tool-suite-2.9.0 JDK版本: 1.6.0_29 tomcat版本:apache-tomcat-7.0.26 本文地址: ...
github 仓库管理
一.远程仓库有master和dev分支1. 克隆代码 git clone https://github.com/master-dev.git # 这个git路径是无效的,示例而已 2. 查看所有分支 ...
对angular实现延迟加载template和controller
1.在lib目录中添加 script.js 文件,并在index.html其他<script>之前引用之: <script src="lib/script.js" ...
Jquery插件实现点击获取验证码后60秒内禁止重新获取
通过jquery.cookie.js插件可以快速实现“点击获取验证码后60秒内禁止重新获取(防刷新)”的功能先到官网(http://plugins.jquery.com/cookie/ )下载coo ...
h5自动生成工具
一.前言写了很多h5之后,对于写手写html和css已经麻木的我决定动手写个工具自动生成h5结构和样式.其实这个想法由来已久,但总是觉得自己技术不够,所以一直没实行.直到某天我真的写够了,我决定动手 ...
RHEL5.8设置OpenSSH的X11 Forwarding功能
X11的Forwarding功能需要在SSH中进行设置,RedHat Enterprise Linux5.8默认使用的而是OpenSSH,现将设置方法记录如下: OpenSSH配置文件路径: /etc ...
C#中手工进行声明式验证，从此远离if验证
今天在一个ASP.NET MVC Controller Action中写代码时,需要对ViewModel的字段进行验证.但这个Action处理的是手工编写的ajax请求(不是表单提交),无法使用ASP ...
切身体验苹果Reminders的贴心设计
今天吃晚饭时在iPhone的Reminders上添加了一个任务并且设定了时间. 回来后忘了这个任务,在iPad上看优酷视频时,iPad上的Reminders突然跳出提示框,优酷视频随之暂停. MacB ...
使用 Microsoft Fakes 进行单元测试
本文为 Dennis Gao 原创技术文章,发表于博客园博客,未经作者本人允许禁止任何形式的转载. 在编写单元测试时,我们会遇到不同的外部依赖项,大体上可以分为两类: 依赖于接口或抽象类依赖于具体类 ...

Web前端知识技能大汇总

项目起源

前端开发知识结构

前端书籍推荐

CSS

JavaScript

性能实践

版本控制工具

后端书籍推荐

Linux管理

Linux编程

C/C++

前端工作面试

Web前端知识技能大汇总的更多相关文章

随机推荐

热门专题

　前端开发知识结构

　前端书籍推荐

　　CSS

　　JavaScript

　　性能实践

　　版本控制工具

　后端书籍推荐

　　Linux管理

　　Linux编程

　　C/C++

　前端工作面试