Web培训

热门话题:

Web前端培训 > Web前端学习 > 正文

Web大前端学习路线图

发布：Web前端培训
来源：Web前端学习
时间：2022-12-05 14:11

Web前端学习路线。最近总是会看到很多人会问，我现在想学习Web前端开发，该如何下手，学习路线是怎样的？今天这篇文章，我来说说我自己对前端学习的理解，并结合一些面试中会常问到的问题来谈谈，如何才能在前端坑中，爬的游刃有Web前端基础首先前端的基础，相信大家闭着眼睛都能知道HTML+CSS+Javascript,但是它们的轻重缓急该如何去选择呢？我个人认为在学习优先级上

HTML>CSS>Javsscript,之所以这么排并不是因为Javascript最不重要，而是因为HTML和CSS的学习上可以不用花太多时间，而且我觉得Javascript是前端一切学习的基础。HTML与CSS可以在一起学习，因为HTML的标签只有配合CSS样式才能达成优美的页面效果，没有CSS的页面只能是很多年前的门户网站的样子。随着HTML5和CSS3的普及，以及浏览器对它们的支持，越来多的产品都选择HTML5

开发，HTML5甚至可以直接作为一个前端开发方向。

零基础学习web前端

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

cookie,localStorage,sessionStorage的区别

HTML5新特性canvas标签

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

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

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

元素水平垂直居中的实现

浏览器的几种盒模型

行内元素与块级元素

元素相对定位与绝对定位

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

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

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

this关键字输出问题

常用的事件类型

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

Javascript内存回收机制

Web前端学习路线：框架

说到框架学习，如果说JS框架的话，相信很多人一定会脱囗而出jQuery,这是很多当初进入前端开发领域一定会学习的内容，我也不例外。但是现在我却并不会推荐把很多的时间放在学习jQuery上，因为如果你深入学习之后会发现，对于jQuery的使用已经变少了。下面我们细细来说。针对HTML布局上，当然Bootstrap是不能少的，我们不用把每个类都研究的很透彻，但是对于常用的class一定要熟练使用。针对字体图标库上，推荐使用font-awaresome,还有阿里矢量图标库iconfont,都包含了非常实用的图标。其实重点想说的是对于前端MVVM框架的学习，相信很多人都知道就是AngularJS,Vue,React前端框架那么针对这些新兴的框架，我们该如何学习呢？

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

Web前端学习路线：AngularJS

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

Web前端学习路线：Vue

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

Web前端学习路线：React

React采用了VirtualDOM这一个很独特的概念，提高了页面渲染的效率。但是也是由于VirtualDOM的存在，在编程方式上，React和Vue,AngularJS稍有不同，如果习惯了vue开发，可能还不太习惯React的开发。在针对框架层面，在学习之后，应该能回答下面这些问题：

AngularJS和Vue的双向数据绑定的实现vuex工作机制React的VirtualDOM基本实现，如何自己实现一个VirtualDOM法

Web前端学习路线：模块化&组件化

前端开发已经从原来的整体化开发发展到现在的模块化开发，甚至是组件化开发，开发过程愈发精细，讲求的是代码的可复用性。以前一个页面从上到下一次编写的过程，现在已经发展为先将页面进行拆分成模块甚至是组件，不同的人关注不同的模块，组件，提高开发效率。在模块化开发中，不CommonJS，AMD和CMD规范，并且有不同的实现，比如RequireJS0对于模块化编程的规范已经有很多的文章有讲到，可以认真去学习下。构建工具前端开发是离不开构建工具的，自己写的代码如何打包压缩，ES6的代码如何编译成JS，Sass,|ess代码如何编译成原生CSS,这些都是构建工具去完成的。有了构建工具，可以极大的提高我们的开发速度，这里不得不提到的就是gulp+Webpack。

Web前端学习路线：Gulp

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

Web前端学习路线：Webpack

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

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

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

Web前端学习路线：全栈

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