漫谈Web前端学习路线，前端学习路漫漫
前言
最近总是会看到后很多人会问，我现在想学习Web前端开发，该如何下手，学习路线是怎样的？今天这篇文章，我来说说我自己对前端学习的理解，并结合一些面试中会常问到的问题来谈谈，如何才能在前端坑中，爬的游刃有余？
Web前端
基础
首先前端的基础，相信大家闭着眼睛都能知道HTML+CSS+Javascript，但是它们的轻重缓急该如何去选择呢？我个人认为在学习优先级上HTML > CSS > Javsscript，之所以这么排并不是因为Javascript最不重要，而是因为HTML和CSS的学习上可以不用花太多时间，而且我觉得Javascript是前端一切学习的基础。
在这里我还是要推荐下我自己建的web前端开发学习群：617327703，群里都是学web前端开发的，如果你正在学习前端 ，小编欢迎你加入，今天分享的这个案例已经上传到群文件，大家都是软件开发党，不定期分享干货（只有前端软件开发相关的），包括我自己整理的一份2018最新的前端进阶资料和高级开发教程，欢迎进阶中和进想深入前端的小伙伴。
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上开源是项目也有很多，可以很容易掌握。感兴趣的可以关注下我自己用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，目前也发展的越来越成熟。
既然讲到全栈开发，肯定会通过服务端语言操纵数据库，因此对于数据库的知识也肯定要掌握的。
总结
今天这篇文章主要通过自己对于前端学习的一些看法，可能有些片面，希望能给你带来帮助。
漫谈Web前端学习路线，前端学习路漫漫相关推荐
- 根据SecWIki给出的Web安全工程师的学习路线的学习经历
一直对Web安全问题有很大的兴趣,之前一直不知道该从何学起,就学习了一些自认为基础的知识,比如HTML,JS和PHP,只是大概的看了一遍,并没有亲自动手操作多少,所以还处在萌新的水平. SecWiki ...
- python学习路线-2020年 Python学习路线及学习目标规划 拿走不谢!
找不到完整的学习路线?小编分享2020年Python学习路线及学习目标规划拿走不谢,Python作为今年来特别受欢迎的编程语言,是AI时代头牌语言AI领域的敲门砖,Python已经入驻小学生教材,将来 ...
- Java：计算机编程语言Java的简介、安装(编程环境/工具)、学习路线(如何学习Java以及几十项代码编程案例分析)之详细攻略
Java:计算机编程语言Java的简介.安装(编程环境/工具).学习路线(如何学习Java以及几十项代码编程案例分析)之详细攻略 目录 Java的简介 1.Java的工作原理--基于Eclipse等编 ...
- 2020年最新Python学习路线及学习目标规划 拿走不谢!
找不到完整的学习路线?本文分享2020年Python学习路线及学习目标规划拿走不谢,Python作为今年来特别受欢迎的编程语言,是AI时代头牌语言AI领域的敲门砖,Python已经入驻小学生教材,将来 ...
- Unity3D 之 学习路线与学习经验分享
转自:https://blog.csdn.net/qq_22521529/article/details/83108837 Unity3D学习路线与学习经验分享 该博文出自作者15游02 丁祺,是一篇 ...
- 第1讲 Java学习路线怎么学习Java
第1讲 Java学习路线&怎么学习Java 1 概述 学过一段时间的同学一定会觉得Java学习最头疼的不是语法结构的繁杂,而是Java本身体系结构的庞大.以至于自己不知道接下去该 ...
- 零基础学习前端：学习路线、学习计划、实战项目和面试题简历分享。
前端简单概括就是所有你可见的效果呈现都可囊括到前端范畴,前端是一个没有任何竞争的方向,它的不可替代性是其他方向所没有的,比如后端,你可以用 Java.PHP.C#.Go.Ruby 等语言开发.前端相较 ...
- 个人前端学习路线之学习视频资源分享
个人前端学习路线之资源分享 本人2019年6月份毕业于安徽省合肥学院计算机科学与技术系网络工程专业,目前是一本院校.在学校的时候大一大二的时候基本都是玩游戏待在宿舍里,大学前两年是没学习到什么东西,到 ...
- java学习路线_java学习路线_我的入坑路
java详细路线: 网上有很多学习路线,当初,我就是受这个学习路线的影响入坑的. 既然看到标题为我的java学习路,那就给大家看下我是怎么走过来的. 阶段一_JavaSE 入门推荐书:java开发实战 ...
- web后端开发学习路线_学习后端Web开发的最佳方法
web后端开发学习路线 My previous article described how you can get into frontend development. It also discuss ...
最新文章
- 数字三角形:顺推法（一维数组）
- 为什么说 Java 是按值传递的？
- Hadoop之HDFS读写数据流程
- curl 请求日志_HTTP入门（一）：在Bash中curl查看请求与响应
- 微信小程序入门四：实现table效果
- python sum 数组原理_Python – Sum 4D数组
- 同步时序逻辑与异步时序逻辑
- 搭建elasticsearch可视化插件
- Linux php5 curl 扩展
- DIY一块单面1TB高速NVMe SSD， SM2262EN量产开卡软件+JMS583转接
- 【更新于2019】SCI EI 索引最新查询方法（已验证有效）
- 数据可视化｜用散点图进行数据分析
- php 图片 字母识别,PHP图片文字识别（OCR）
- 植物大战僵尸 辅助 总结
- 一个程序员竟然喜欢上了写诗
- 四、文件管理（三）文件系统
- 多重积分MULTIPLE INTEGRALS
- 不同类型怎么选择服务器
- 推荐给比较好用FF插件
- python字符串模糊匹配 - FuzzyWuzzy