在正文开始前，我还是先说一下我个人对于前端职业发展前景的看法。希望对那些站在前端学习起点，或者已经在路上，但犹豫不决的同学有所启发。
总的来说，马上要2020年，初级前端在市场上是供大于求的，而高级前端依然是供小于求。这个判断主要是通过这些年面试的情况来看，没有全面的数据支撑，仅代表我个人观点。
初级前端供大于求。在培训机构和互联网公司的共同推动下，市场的初级前端很多。相比我2011年回答这个问题时，互联网公司在前端工程师的招聘要求高了很多。我毕业那年只是在学校里做了一个“图书管理系统”，边做边学搞了4个月，就可以拿到百度、淘宝的offer，而如今能做到这一点的候选人实在太多了。
高级前端供小于求。本质上因为互联网公司的发展速度高于市场上的前端工程师的平均成长速度。所以，虽然新手多了，企业招人依然困难。比如，天猫消费者端的导购页面，为了提高购买转化率，这些年来，在导购效率、用户体验维度做了非常多系统级体验优化方案，复杂度很高；又比如，阿里巴巴供应链平台，为了构建一套适用于阿里所有零售场景的供应链解决方案，同样在系统架构、用户体验、体验与研发效率的平衡等维度做了大量封装、抽象。这些是企业的高速发展的必然结果，然而市场上能够满足这样场景的同学，真的不容易找。
所以，到了2020年，那些打算通过这篇文档，开始自己前端职业生涯的同学，我希望大家，在起点处就做好了从初级跨入高级的准备。为了验证自己是否真的准备好了，可以尝试反复问自己这这个问题：你是否真的对前端感兴趣？至少说出3个能说服自己的理由。（如果是因为不喜欢现在工作，又听说前端简单才来学的，可以掉头回去了）。

二、基础
html + css

这部分建议在 w3school 在线教程 上学习，边学边练，每章后还有小测试。 学习过程中请打开chrome浏览器调试工具，直接命令行在内做些练习。

javascript
要学的内容实在很多，如果没有其他编程语言的基础的话，学起来可能要费些力，还是建议先在 w3school上学习。之后建议马上看《javascript语言精粹》，js是一门很混乱的语言，这本书能够帮助你区分哪些是语言的精华，哪些是糟粕，对于语言精华，应该深入学习。

数据结构和算法（
正如开篇的分析，目前市场缺的是高级前端，初级到高级的门槛不在未来，而是在过去的大学基础课。
前端为什么要学这些？因为这些都是稍微复杂一点的场景解决问题的必备武器。比如，把一个列表形式的地址数据，以树形渲染到页面，或者反过来；又比如，把一个多级嵌套的数据对象，转化成扁平的map结构再提交到服务器。更关键的，数据结构和算法，是计算机的思维方式，尤其是分治递归的思想，影响到代码实现、模块设计、乃至到系统设计。

关于浏览器兼容性。webkit内核已成为市场主流，ie6、7已成为历史，ie8、9的市场份额在进一步缩小，总之兼容IE已不在是前端工程师面试需要考察的点。

2. javascript
上面提到内容还不足以让你胜任js编程。在有了基础之后，进一步学习内容包括：
2.1. 简单框架。推荐先学 zepto，简单易用，在w3school简单学习js后，直接上手 zepto 即可完成一些简单的项目。zepto 源码简单清晰，也适合新手阅读。补充： 可以使用 codecademy 学习 javascript，zepto，用户体验真的很好。学习zepto只是为了快速上手开发项目，获得成就感。同时还是要关注JS原生编程的能力，尤其随着低端浏览器份额的下降，很多 zepto API 已经可以被原生浏览器api替代。以天猫消费者端 h5页面为例，主要就是靠 原生JS + 少量 zepto api 的方式开发完成，配合pwa等浏览器最新api就可以开发出极致的用户体验

2.2. 复杂框架。是指 react、vue、angular 等不直接操作dom的框架。这类框架建议js基础打扎实后再学习。

复杂框架是用来解决复杂问题的。对于电商无线端导购页面来说原生JS足以。对于类似商家管理系统这类交互复杂，开发量大的系统，才适合用这类框架。对于这些框架核心在于理解理念，不要只停留在会用的层面。

javascript不完全是一个面向对象的语言，它的很多设计理念都有函数编程语言的影子，甚至说如果你不用面向对象，完全可以把它理解成一门函数式编程语言。javascript的很多语言特性，都是因为他具有函数式语言的特点才存在的。这部分推荐先学习面向对象的基本理论，对封装，继承，多态等概念要理解

2.4. js 语言内部机制。

2.5. dom编程，这个web前端工程师的核心技能之一。

2.6. 网络编程，这部分相对简单，就这些关键字，自己搜索学习即可：fetch，websocket，jsonp，cors，formData。

2.7. es5, es6。现在开发js大部分基于es5的，ie8以下通过es5-shim。但利用一些工具，现在已经可以直接写es6代码了，尤其在reactjs，nodejs类型的项目中。对于从es5，es6每个阶段js发生了哪些变化都需要系统学习，学习顺序建议是 JavaScript基础 -> es5 -> es6，越靠前的越重要。

3. html5
需要了解html都提供了哪些api，然后项目中用起来。这部分没有什么难理解的，关键在于能用html5解决业务问题，以及不支持html5的浏览器的降级方案。这部分体现了前端的一个思想：面向未来编程，尽早将新技术引入业务中来，而不是过分考虑兼容性问题，进而导致面向过去编程。