现在做网页前端的学习路线是什么

初学者必看干货web前端学习路线图，随着移动互联网的发展，web前端逐渐受到企业的重视，前端开发人员的薪资也水涨船高，越来越多的人看好前端行业的发展，想要转行加入。下面，给大家分享一份web前端学习路线图，希望对初学者有所帮助。

Web前端行业的发展，让前端人员能完成比以前更多的职责范围，所以未来前端可以宽口径就业，前景非常好。除此之外，目前web前端工程师日均岗位缺口超50000，平均薪资10820元/月。

对于零基础的人而言，要怎么学习web前端呢？

1、前端页面重构。主要内容为PC端网站布局、Photoshop工具及切图、H5移动端网页布局、HTML5CSS3新特性与交互。学习目标是完成PC端网站布局，可实现响应式布局，一套代码适配PC端、移动端、平板设备等。

2、前后端网页交互。主要内容为JavaScript语法全面进阶、ES6到ES10新语法实践、jQuery应用及插件使用、设计模式及插件编写、封装JS工具库及WebAPIS、AJAXPHPMySQL前后端交互、前端工程化与模块化应用以及PC端全栈开发项目等。学习目标是可以掌握前端工程化工具，如git、gulp、webpack等，搭建项目及开发项目。

3、Nodejs前端框架。主要内容为Nodejs全面进阶、Koa2MongoDB搭建服务、Vuejs框架、Reactjs框架、小程序云开发与小程序框架、原生APP与混合APP、数据可视化与桌面应用等。学习目标是掌握桌面应用及可视化大数据，实现复杂数据展示类项目，能够独立完成前后台相关功能，胜任HTML5全栈开发工程师职位。

很多学习web前端的朋友都希望在学成后能找到一份满意的工作，所以我们在学习过程中一定要注意实战经验的积累，如果你所学的东西对企业没有用，那你所做的一切都是无用功。

电脑软件的前端是基于本地容器创建的，由于各种编程语言在实现上并不完全统一，所以不同的编程语言有不同的编写方式和呈现效果，而网页前端是基于统一的标准（Html）创建的，而且是远程加载本地呈现的方式。

以Java语言为例，如果要创建一个本地的呈现界面可以使用Swing的方式来创建，需要了解图形容器（JFrame）、图形布局（FlowLayout、BorderLayout、GridLayout等）、图形组件（JButton、JTextField、JChoice等），另外还需要掌握Swing的事件处理方式，看一个例子：

这个例子演示了如何使用SwingAPI创建一个菜单，当然也可以采用Swing创建出非常复杂的图形界面，但是需要按照SwingAPI的规范来进行创建。采用这种方式创建的界面虽然可以创建出用户体验度比较高的软件，但是这种方式也有很多弊端，比如依赖于本地容器的支持，往往需要按照本地运行环境，另外各个语言之间也有不同的呈现方式，目前大部分PC端软件都采用Web方式来开发。

网页前端采用的技术是统一的，以Html、CSS、JavaScript为基础标准进行代码的编写，编写好的文件部署在前端服务器上（Nginx），然后等待用户的请求。用户在前端服务器上发起的操作往往由后端的Web服务器进行处理，处理后的数据再由前端页面进行呈现，目前Web开发的前端和后端往往分别进行部署和开发，这种方式比较适合大规模并发访问的情况。看一个简单的例子：

目前移动端的开发还是需要学习本地开发的方式，比如在Android系统下要采用Java进行Activity（界面）的开发，而iOS系统要采用OC或者Swift进行界面开发，这种开发方式的用户体验还是比较不错的。

HTML5

HTML是超级文本标记语言，是为“网页创建和其他可在网页浏览器中看到的信息”设计的语言。HTML5是由万维网发布的最新的语言规范，是开放的Web网络平台的奠基石，所以做Web前端，精通HTML5是必须要掌握的一项技能。

CSS3

CSS即层叠样式表(Cascading StyleSheet)。在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。CSS3对于Web前端整个页面的设计是必备的技能。

JavaScript

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML(标准通用标记语言下的一个应用)网页上使用，用来给HTML网页增加动态功能，为用户提供更流畅美观的浏览效果。掌握了JavaScript，就可以给网页增加各种不同的动态效果，比如百叶窗特效，广告切换特效，浮动广告特效，上下无缝滚动特效等等。

web前端就是您打开网页，看到一切内容、、动态、特效等等这所有的东西都是由web前端来实现的，最开始的web前端都是静态的，内容文字这些，随着互联网的发展现在的web前端有更多的交互效果，功能更加强大。

前端，官方的定义是前端就是网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。用自己的话来说，前端是网页给访问网站的人看的内容和页面。那前端开发顾名思义就是这些内容和页面中代码的实现。不过现在的前端不完全就是网页设计，早年的网页设计主要是以和文字为主，用户使用网站的行为也以浏览为主。而现在的前端开发使得现代网页更加美观，交互效果显著，功能更加强大。所以现在的前端开发，运用到的知识面更加广泛，难度也更大。不过，无论怎么发展，HTML、CSS和JavaScript依然是整个前端开发的三大基石。所以不论题主是想做移动前端开发还是web前端开发，这三样基础技术都必须熟练掌握。1，HTML是网页的核心，是一种制作网页页面的标准语言，可以消除不同计算机之间信息交流的障碍。因此，它是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言，学好HTML是成为Web开发人员的基本条件。HTML是一种标记语言，能够实现Web页面并在浏览器中显示。2，CSS是用来进行网页风格设计，页面制作完成当然需要美化，这时候就会用到CSS，它可以网页外观做的更加美观。3，JavaScript主要目的是为了解决服务器端语言，为客户提供更流畅的浏览效果。加入JavaScript，是为了提供了数据验证的基本功能。学会这些，当然也只是开始，这都是最基础的部分。学无止境，要想学好前端，就要付出百倍的努力。

只给浏览器肯定用得上的数据。后端服务往往不知道前端具体需要哪些数据，给的数据冗余，如果去掉不必要的数据，可以节省数据传输时间。

先展示用户第一眼看到的界面，然后懒加载其余部分。不管页面有多大，用户同一时间看到的也就屏幕那么大，先把用户第一眼看到的数据加载展示了，能打打提高感知性能。

缓存数据。这个缓存可以放在浏览器端，比如用Service Worker的Cache Storage，也可以在服务器端，比如常用的图表的显示，可以在服务器端预先计算出接过来，省去浏览器的计算时间

关于这个问题，太多人在问了。我这几年一直都在从事web前端应用方面的培训普及工作，期间还公开出版过几本书，现提两点看法供参考。

第一，前端应用涉及的知识点太多，一定要首先找个靠谱的书籍或者教程（不要太厚、太长的）先对前端有个整体的认识，千万不要一头扎进某个方面学个一年半载。这样的做法，你所看到的将始终是眼前的这一小部分的“点”，而看不到“面”！而且，单纯的学习某一方面知识，很容易让人产生倦怠感，学着学着可能就要放弃了！

比如，在你对前端知识体系毫无了解的情况下，先来系统学习html的数十个甚至上百个标签，你能体会到每个标签在前端项目中的真正用途吗？你最多只是会用这些标签而已，却无法拓展自己的思路，更不可能对这些标签将来的用途有着深刻的理解。假如，你先有了一部分“面”上的知识，也简单知道了html、css和javascript在前端项目中是如何各司其职的，并对它们的用法有了初步的了解，那么，在重新学习html标签时，你可能就会思考：这个标签的样式该怎么设置？如何给这个标签添加一些事件以便让它触发某种操作行为？这样的学习就不再是一个个孤立的知识点了，而是把它们都融合起来了，学习过程也会变的更加有趣！

这种学习方法，正是本人一直倡导的“由面到点”，然后再“由点到面”。因此，我的建议是：在有了一种总体性（“面”）的概念认知之后，你才会知道其中每个具体的“点”将用到哪里，这个“点”究竟是应该浅尝辄止还是要继续追本溯源。只有这样，才不会把时间浪费在很多琐碎的、有些甚至永远都用不到的知识点中，也才能以最具效率的方式帮助自己确定最终需要努力的方向。当以这样的方式学习时，你眼中的CSS和JavaScript可能都不再是独立的语言，也许只是页面中普通的<style></style>、<script></script>标签元素而已，这样才能真正的做到融会贯通！

第二，前端应用是离不开html、css和javascript三大基础的。在有了“面”上的初步知识之后，其实就可以找个前端框架先来练手一个小项目了。在练手的过程中，碰到没有用到的html标签属性、css样式设置方法或者不懂的js语法规则时再来找对应的基础知识学。这种“边干边学”的方式是最有效的，千万不要拿一整块的时间来系统学习某一方面的基础知识，否则你又将大概率的陷入到“从入门到放弃”的恶性循环中。

为什么要强调使用前端框架呢？这是因为，它可以让初学者暂时摆脱漫长且繁杂的学习过程，快速看到开发成果，从而增强继续学习的信心。待有了一定的感性认知与经验积累之后，回头再去看html、css和javascript三大基础，相信你一定会不时发出这样的感慨：原来是这样啊！这种“茅塞顿开”的感觉真的让人很爽！！！

请注意，我这里强调的是“边干边学”，并不是蛮干。如果你只干不学，那是干不下去的，你也会被碰的头破血流的。前端框架永远只是框架，它不是万能的，内部的处理逻辑还需要你自己来写！

当然，新手在初始入门学习时，如果能有人带着是最好不过了。我在头条上已经开辟了《网站开发全攻略》系列专栏：从前端的页面开发，到后端的数据交互；从PC端到移动端；从基础知识讲解到完整的订单系统实例，全包含！预计总章节数在1500课左右，建议新手可以先从其中的第1个专栏学起，学习过程中碰到任何问题都可随时留言交流。