随着最近几年来互联网的迅猛发展和普及，Web前端工程师已经成为互联网时代软件产品研发中不可缺少的一种专业的研发角色。总是会看到很多人问，我现在想学习Web前端开发该如何下手？学习路线是怎样的？

一、基础

首先前端的基础，相信大家闭着眼睛都能知道HTML+CSS+Javascript，但是它们的轻重缓急该如何去选择呢？柠檬认为在学习优先级上HTML > CSS > Javsscript，之所以这么排并不是因为Javascript最不重要，而是因为HTML和CSS的学习上可以不用花太多时间，而且柠檬觉得Javascript是前端一切学习的基础。

HTML与CSS可以在一起学习，因为HTML的标签只有配合CSS样式才能达成优美的页面效果，没有CSS的页面只能是很多年前的门户网站的样子。随着HTML5和CSS3的普及，以及浏览器对它们的支持，越来多的产品都选择用HTML5开发，HTML5甚至可以直接作为一个前端开发方向。

柠檬觉得学习了HTML后，面对这样的问题，应该不会被难到。

• cookie，localStorage，sessionStorage的区别；
• HTML5新特性canvas标签；
• 浏览器缓存机制，各有什么优缺点？
• 如何看待HTML5的一些新特性？

学习了CSS之后，面对这样的问题，也应该不会被难到。

• 元素水平垂直居中的实现；
• 浏览器的几种盒模型；
• 行内元素与块级元素；
• 元素相对定位与绝对定位；
• 伪元素:before与::before差别以及用途；

学习了Javascript后，面对这样的问题，应该不会被难到。

• 常见的闭包问题，比如for循环内部执行输出函数；
• this关键字输出问题；
• 常用的事件类型；
• ajax建立过程，常用的状态码；
• Javascript内存回收机制；

二、框架

说到框架学习，如果说JS框架的话，相信很多人一定会脱口而出jQuery，这是很多当初进入前端开发领域一定会学习的内容，我也不例外。但是现在柠檬却并不会推荐把很多的时间放在学习jQuery上，因为如果你深入学习之后会发现，对于jQuery的使用已经变少了。下面柠檬细细来说。

针对HTML布局上，当然Bootstrap是不能少的，我们不用把每个类都研究的很透彻，但是对于常用的class一定要熟练使用。

针对字体图标库上，推荐使用font-awaresome，还有某宝图标库iconfont，都包含了非常实用的图标。其实重点想说的是对于前端MVVM框架的学习，相信很多人都知道就是AngularJS，Vue，React。

那么针对这些新兴的框架，我们该如何学习呢？

首先有一点，ES6是一定要去学习的，在Vue2.X，AngularJS2，React中都对ES6提供了原生的支持，以后很多新的特性肯定也会使用ES6的语法去编写。

AngularJS

AngularJS在由AngularJS1升级到AngularJS2以后，完全是一个新的东西，原来在AngularJS1中的controller，service，filter等内容在AngularJS2中都变成一个个的module，component。所以如果还没学过AngularJS部分内容的同学可以直接选择学习AngularJS2。但是需要注意的是AngularJS2是以Typescript语言编写的，所以对Typescript的学习就必不可少了。

Vue

柠檬认为Vue学习是相对来说成本比较低的框架，目前官方文档已经很详细，关于Vue全家桶的内容像Vue-resource，Vue-router，Vuex等越来越完善，而且在Github上开源是项目也有很多，可以很容易掌握。

React

React采用了Virtual DOM这一个很独特的概念，提高了页面渲染的效率。但是也是由于Virtual DOM的存在，在编程方式上，React和Vue,AngularJS稍有不同，如果习惯了Vue开发，可能还不太习惯React的开发。

在针对框架层面，在学习之后，应该能回答下面这些问题。

• AngularJS和Vue的双向数据绑定的实现；
• Vuex工作机制；
• React的Virtual DOM基本实现，如何自己实现一个Virtual DOM；

三、算法模块化&组件化

前端开发已经从原来的整体化开发发展到现在的模块化开发，甚至是组件化开发，开发过程愈发精细，讲求的是代码的可复用性。以前一个页面从上到下一次编写的过程，现在已经发展为先将页面进行拆分成模块甚至是组件，不同的人关注不同的模块，组件，提高开发效率。在模块化开发中，不得不提到CommonJS，AMD和CMD规范，并且有不同的实现，比如RequireJS。对于模块化编程的规范已经有很多的文章有讲到，可以认真去学习下。

四、构建工具

前端开发是离不开构建工具的，自己写的代码如何打包压缩，ES6的代码如何编译成JS，Sass，less代码如何编译成原生CSS，这些都是构建工具去完成的。有了构建工具，可以极大的提高我们的开发速度，这里不得不提到的就是gulp+Webpack。

gulp是一种任务驱动型的构建工具，通过管道处理数据流，提高了数据处理速度，而且其提供的一系列插件也很方便使用。

而Webpack的作用就是把所有浏览器端需要发布的静态资源做相应的准备，比如资源的解析、合并和打包，它提供了强大的加载器和插件机制，例如vue-loader提供了对vue的支持，babel-loader提供了对ES6的支持。其他的构架工具还有工程化构建的Yeoman，Slush，FIS等。

在学习了常用的构建工具后，应该可以回答出下面的问题。

• Gulp和Webpack的不同；
• Webpack打包速度比较慢，可能原因是什么？有没有什么解决办法？

五、全栈

Web前端开发到最后就是要走全栈开发的道路了，全栈开发以NodeJS作为服务端语言，基于NodeJS实现的服务端框架有Express，KOA，目前也发展的越来越成熟。既然讲到全栈开发，肯定会通过服务端语言操纵数据库，因此对于数据库的知识也肯定要掌握的。

给自己半年的时间去尽心尽力的学习Web前端开发，按照上面的学习路线，一步一步来，扎实掌握Web前端发技术才是找到高薪工作的重要法宝！

柠檬为大家准备了一些web、Bootstrap、CSS、Mybatis、HTML、jQuery的学习教程分享，希望可以帮助到大家。

获取方式：请大家转发+关注并私信小编关键词：“资料”即可获取前端自学教程一套。