最近老是会看到后不少人会问，我如今想学习Web前端开发，该如何下手，学习路线是怎样的？今天这篇文章，我来讲说我本身对前端学习的理解，并结合一些面试中会常问到的问题来谈谈，如何才能在前端坑中，爬的游刃有余？ 前端
推荐一个web前端学习 QQ群606721798，欢迎你们加入，天天晚上在腾讯课堂都有一个技术学习课,会有老师分享干货,帮助你们分析解答问题vue
Web前端webpack
基础
首先前端的基础，相信你们闭着眼睛都能知道HTML+CSS+Javascript，可是它们的轻重缓急该如何去选择呢？我我的认为在学习优先级上HTML > CSS > Javsscript，之因此这么排并非由于Javascript最不重要，而是由于HTML和CSS的学习上能够不用花太多时间，并且我以为Javascript是前端一切学习的基础。web
在这里我仍是要推荐下我本身建的web前端开发学习群：617327703，群里都是学web前端开发的，若是你正在学习前端 ，小编欢迎你加入，今天分享的这个案例已经上传到群文件，你们都是软件开发党，不按期分享干货（只有前端软件开发相关的），包括我本身整理的一份2018最新的前端进阶资料和高级开发教程，欢迎进阶中和进想深刻前端的小伙伴。面试
HTML与CSS能够在一块儿学习，由于HTML的标签只有配合CSS样式才能达成优美的页面效果，没有CSS的页面只能是不少年前的门户网站的样子。随着HTML5和CSS3的普及，以及浏览器对它们的支持，越来多的产品都选择用HTML5开发，HTML5甚至能够直接做为一个前端开发方向。ajax
我以为学习了HTML后，面对这样的问题，应该不会被难到。算法
cookie，localStorage，sessionStorage的区别数据库
HTML5新特性canvas标签编程
浏览器缓存机制，各有什么优缺点？gulp
如何看待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上开源是项目也有不少，能够很容易掌握。感兴趣的能够关注下我本身用Vue开发的一个简书网站。
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
gulp是一种任务驱动型的构建工具，经过管道处理数据流，提升了数据处理速度，并且其提供的一系列插件也很方便使用。
Webpack
而webpack的做用就是把全部浏览器端须要发布的静态资源作相应的准备，好比资源的解析、合并和打包，它提供了强大的加载器和插件机制，例如vue-loader提供了对vue的支持，babel-loader提供了对ES6的支持。
其余的构架工具还有工程化构建的Yeoman，Slush，FIS等。
在学习了经常使用的构建工具后，应该能够回答出下面的问题。
Gulp和Webpack的不一样
Webpack打包速度比较慢，可能缘由是什么？有没有什么解决办法？
全栈
前端开发到最后就是要走全栈开发的道路了，全栈开发以NodeJS做为服务端语言，基于NodeJS实现的服务端框架有Express，KOA，目前也发展的愈来愈成熟。
既然讲到全栈开发，确定会经过服务端语言操纵数据库，所以对于数据库的知识也确定要掌握的。
总结 今天这篇文章主要经过本身对于前端学习的一些见解，可能有些片面，但愿能对你们有所帮助