前端搬运工：零基础的前端开发初学者应如何系统地学习？前端掌握技能的学习路线

前端小伙伴们：【刚入门，但迷茫人群】，请认真读完 下面的 淘宝web 大神总结，如果你对前端是真爱的话，并且坚信可以作为职业去改变你的生活，慢慢日积月累，按这个来吧，真的！
上半部分是 技术路线， 下半部分是掌握的知识框架+面面俱到，欢迎转载，但请注明出处！JS前端实用开发QQ群 ：147250970 欢迎加入~！张帅，大前端（前端变化太快，以下内容我会不定期更新，第三方网站请不要转载，如果实在想转载，请只转载摘要，并保留原文链接，谢谢）网站开发开发大致分为前端和后端，前端主要负责实现视觉和交互效果，以及与服务器通信，完成业务逻辑。其核心价值在于对用户体验的追求。可以按如下思路学习系统学习：基础知识：1. html + css 这部分建议在 w3school 在线教程 上学习，边学边练，每章后还有小测试。
之后可以模仿一些网站做些页面。2. javascript 要学的内容实在很多，如果没有其他编程语言的基础的话，学起来可能要费些力，还是建议先在 w3school上学习。之后建议马上看《javascript语言精粹》，js是一门很混乱的语言，这本书能够帮助你区分哪些是语言的精华，哪些是糟粕，对于语言精华，应该深入学习。糟粕部分能看懂别人写的代码就行，自己就不用尝试了。对于习惯看视频学习的同学，以上内容也可以在 慕课网-国内最大的IT技能学习平台 上学习。虽然我没用过，但好几位同学推荐过了，大概看了下，内容还不错。进阶：有了以上基础，就可以进行一般的静态网页设计，不过对于复杂的页面还需要进一步学习。1. css。截至今日（2015.12.08），天猫、淘宝、支付宝都已停止对ie6,7的支持，未来相信大多数网站都会停止对ie6，7的支持，ie8的市场份额也不像两年前那么高了，webkit内核已成为市场主流。对于css的学习，我推荐分三块：“基础概念”，“css2.1规范”，“css3规范”。必看 精通CSS（第2版）
(豆瓣)，看完这本书你应该对：盒子模型，流动，block，inline，层叠，样式优先级，等概念非常了解了。这本确实有些年头了，但基础概念部分讲述非常清晰，可以称之为经典。ie6，7相关的内容可以不看。css3的部分可以参考：CSS3实用指南
(豆瓣)。这本书同样有些老，只是最新出版的书中没发现有特别好的。2. javascript。上面提到内容还不足以让你胜任js编程。在有了基础之后，进一步学习内容包括：a) 框架。推荐 zepto，简单易用，在w3school简单学习js后，直接上手 zepto 即可完成一些简单的项目。zepto 源码简单清晰，也适合新手阅读。补充： 可以使用 codecademy 学习
javascript，zepto，用户体验真的很好（感谢 TonyOuyang ）。最近比较热门的框架是React, VUE, Angular这些, 根据需要稍作了解即可。随着ie浏览器市场份额的下降，以及移动端的发展，标准原生js已经可以在实际项目中使用（目前还需要借助es5shim、babel等），重点还是ES5,
ES6, ES7。b) javascript 语言范式 。这个名字可能并不恰当，只是我找不到可以描述“面向对象”，“函数式”这个两个概念的概念。javascript不完全是一个面向对象的语言，它的很多设计理念都有函数编程语言的影子，甚至说如果你不用面向对象，完全可以把它理解成一门函数式编程语言。javascript的很多语言特性，都是因为他具有函数式语言的特点才存在的。这部分推荐先学习面向对象的基本理论，对封装，继承，多态等概念要理解，维基百科，百度百科会是你的帮手，另外推荐《object oriented javascript》，应该有中文版。对与函数式编程可以参考这篇文章：JavaScript
中的函数式编程实践c) javascript 语言内部机制。必须弄清如下概念：js中变量的作用域，变量传递方式，函数的定义环境与执行环境，闭包，函数的四种调用方式（一般函数，对象的方法，apply，call），以及四种调用方式下，‘this'指向的是谁。这部分内容你会在《javascript语言精粹》中详细了解。d) dom编程，这个web前端工程师的核心技能之一。必读《dom编程艺术》，另外《高性能javascript》这本书中关于dom编程的部分讲的也很好。e) ajax编程，这是另一核心技术。ajax建议在网上查些资料，了解这个概念的来龙去脉，百度百科，维基百科上的内容就足够了。真正编程是很容易的，如今几乎所有框架都对ajax有良好的封装，编程并不复杂。另外，ajax未来几年会被 Fetch
Standard 取代，也需要了解。另外关于xhr2，cors（跨站资源共享），formData文件上传，也需要了解。f) es5, es6。现在开发js大部分基于es5的，ie8以下通过es5-shim。但利用一些工具，现在已经可以直接写es6代码了，尤其在reactjs，nodejs类型的项目中。对于从es5，es6每个阶段js发生了哪些变化都需要系统学习，学习顺序建议是 JavaScript基础 -> es5 -> es6，越靠前的越重要。一些参考链接：ECMAScript
5 compatibility tableECMAScript
6入门ES5
« 张鑫旭3. html5。需要了解html都提供了哪些api，然后项目中用起来。这部分没有什么难理解的，关键在于能用html5解决业务问题，以及不支持html5的浏览器的降级方案。这部分体现了前端的一个思想：面向未来编程，今早将新技术引入业务中来，而不是过分考虑兼容性问题，进而导致面向过去编程。再进一阶 · 代码层面：有了以上知识，对于大多数小型网站，你应该已经可以写出能够工作的代码了。但要想成为更专业的前端，你还需继续努力。更高的要求大概还有四方面：1易维护，2可测试，3高性能，4低流量（移动端）。1. 易维护。对于页面你该理解‘样式’，‘数据’，‘行为’三者分离，对应的当然就是css,html,js。对于js代码，你最好了解设计模式，重构，MVC等内容。2. 可测性。3. 高性能。必读《高性能javascript》4. 低流量。移动端关注比较多。再进一阶 · 工程层面：前端项目同样面临软件生命周期的各个环节，首先是代码管理，你必须学会使用svn和git。其次是代码的构建，如今前端代码构建已经不是简单的压缩一下了，需要进行依赖管理、模块合并、各种编译，必须要学会使用grunt、gulp等前端构建工具。然后呢？以上内容只是简单说了前端学习的顺序。前端工程师应该有的知识结构请参考这里：JacksonTian/fks · GitHub补充：对于前段开发，基本内容就这些了，可以根据自己的兴趣爱好选择性学习以下内容。1. 交互设计。大公司依然有专业人士搞这些，不过不懂交互的前端一定不是好前端。推荐《简约至上》。2. 后端。应该说前段工程师必须至少了解一门后端语言，不过如果爱好也可深入学习，入手难度比较低的应该是php了。这部分由可分为基于页面，基于框架两种。大型项目都是基于框架开发的，建议至少了解一个MVC框架，比如php的ci, yii, yaf 等，好还框架的设计思想都大同小异。如今NodeJs在大公司已经得到普遍的使用，推荐大家使用在Node上使用Express框架做一些后端服务的开发。3. Android和ios开发。时至今日，前端的工作领域已经非常广泛，native的界面开发本质上也是前端开发，个大公司都面临着Native环境和web环境页面同时维护的问题，如果能够在技术上得到统一，将会有巨大的价值。对于学有余力的同学，应该了解Native开发的基本流程，至少了解到界面构建的技术。4. 如果你能够认真看到这里，说明你对前端有真爱，最后说一个编程习惯的问题，绝对是保你工作平安，少出故障。代码提交前必须做的三个事情：A. git diff（svn diff）,检查所有变更；B. 跑一边单元测试；C. 手动运行一遍所有demo.如果你以上内容你都已掌握，想加入一个牛B的前端团队，可以私信我。坐标：杭州·天猫·前端（以上内容最初发布于2012年上半年，已经更新过几次了，我会持续维护，希望对后来人有帮助。加油、共勉！最后更新时间：2016-3-26 09:42）-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------还记得@jayli 的这幅前端知识结构图么。

图片的形式具有诸多的不便。缺失源图的我们，无法为此图贡献些什么，随着时间的迁移，或许有些技术点会发生改变，所以有了这个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开发工具编辑器和IDEVIM/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 styleJSLint/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
AngularJSBatarangBootstrap
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 WebMicroData
RDFaWeb AccessibilityWCAG
Role Attribute
WAI-ARIA性能JSPerf
YSlow 35 rules
PageSpeed
HTTPWatch
DynaTrace's Ajax
高性能JavaScriptSEO
编程知识储备数据结构
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移动WebHTML5/CSS3
响应式网页设计
Zeptojs/iScroll
V5/Sencha Touch
PhoneGap
jQuery Mobile
W3C Mobile Web Initiative
W3C mobileOK Checker
Open Mobile Alliance
React Native前沿技术社区/会议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++

前端工作面试

前端工作面试问题
前端开发面试题（中文）

内容贡献者

除了感谢Jayli提供了知识结构图的原本来，还感谢以下的内容贡献者们，结果由

git-summary

生成于2014-01-03：

project  : fks
repo age : 1 year, 3 months
active   : 53 days
commits  : 108
files    : 4
authors  :
56  Jackson Tian            51.9%
9  吴晓兰               8.3%
5  liyinkan                4.6%
3  chriscai                2.8%
3  fengxiaolong            2.8%
3  XiNGRZ                  2.8%
2  monkadd                 1.9%
2  Johnny                  1.9%
2  weiwenqing              1.9%
2  Yinkan Li               1.9%
2  Copypeng                1.9%
2  左岸                  1.9%
2  Jakukyo Friel           1.9%
2  Glowin                  1.9%
1  李亚川               0.9%
1  Evan You                0.9%
1  Mickey                  0.9%
1  Mickey-                 0.9%
1  Qi Junyuan              0.9%
1  browsnet                0.9%
1  doabit                  0.9%
1  guoxiangyang            0.9%
1  linkgod                 0.9%
1  popomore                0.9%
1  vipzhicheng             0.9%
1  zhaqiang                0.9%
1  Colin Luo               0.9%