前言

最近总是会看到后很多人会问，我现在想学习Web前端开发，该如何下手，学习路线是怎样的？今天这篇文章，我来说说我自己对前端学习的理解，并结合一些面试中会常问到的问题来谈谈，如何才能在前端坑中，爬的游刃有余？

Web前端

基础

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

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

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

1. cookie，localStorage，sessionStorage的区别

2. HTML5新特性canvas标签

3. 浏览器缓存机制，各有什么优缺点？

4. 如何看待HTML5的一些新特性？
   

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

1. 元素水平垂直居中的实现

2. 浏览器的几种盒模型

3. 行内元素与块级元素

4. 元素相对定位与绝对定位

5. 伪元素:before与::before差别以及用途
   

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

1. 常见的闭包问题，比如for循环内部执行输出函数

2. this关键字输出问题

3. 常用的事件类型

4. ajax建立过程，常用的状态码

5. 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上开源是项目也有很多，可以很容易掌握。感兴趣的可以关注下我自己用Vue开发的一个简书网站，下面是Github地址。

https://github.com/zhouxiongking/vue2.0-vuex2.0-demo-jianshu

• React

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

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

1. AngularJS和Vue的双向数据绑定的实现

2. Vuex工作机制

3. React的Virtual DOM基本实现，如何自己实现一个Virtual DOM算法
   

模块化&组件化

前端开发已经从原来的整体化开发发展到现在的模块化开发，甚至是组件化开发，开发过程愈发精细，讲求的是代码的可复用性。

以前一个页面从上到下一次编写的过程，现在已经发展为先将页面进行拆分成模块甚至是组件，不同的人关注不同的模块，组件，提高开发效率。

在模块化开发中，不得不提到CommonJS，AMD和CMD规范，并且有不同的实现，比如RequireJS。对于模块化编程的规范已经有很多的文章有讲到，可以认真去学习下。

构建工具

前端开发是离不开构建工具的，自己写的代码如何打包压缩，ES6的代码如何编译成JS，Sass，less代码如何编译成原生CSS，这些都是构建工具去完成的。

有了构建工具，可以极大的提高我们的开发速度，这里不得不提到的就是gulp+webpack。

Gulp

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

Webpack

而webpack的作用就是把所有浏览器端需要发布的静态资源做相应的准备，比如资源的解析、合并和打包，它提供了强大的加载器和插件机制，例如vue-loader提供了对vue的支持，babel-loader提供了对ES6的支持。

其他的构架工具还有工程化构建的Yeoman，Slush，FIS等。

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

1. Gulp和Webpack的不同

2. Webpack打包速度比较慢，可能原因是什么？有没有什么解决办法？

全栈

前端开发到最后就是要走全栈开发的道路了，全栈开发以NodeJS作为服务端语言，基于NodeJS实现的服务端框架有Express，KOA，目前也发展的越来越成熟。

既然讲到全栈开发，肯定会通过服务端语言操纵数据库，因此对于数据库的知识也肯定要掌握的。

总结

今天这篇文章主要通过自己对于前端学习的一些看法，可能有些片面，希望能给你带来帮助。