随着互联网的快速发展，技术型人才更是受到了企业的欢迎，更多的人倾向于学习软件开发技术，达到更有市场前景的职位。Web前端是一个入行门槛较低的开发技术，更是近几年热门的职业，Web前端不仅薪资高发展前景好，是很多年轻人向往的一个职业。看到这里很多小伙伴想问：现在Web前端的就业前景如何？学Web前端需要注意哪些问题？Web前端学习路线是怎样的？别急，下面我一一为大家答疑解惑。
 
 
一、2020年Web前端的前景
 
1、市场：
 
在中国Web前端的市场永远都是巨大的，但是随着信息的普及，人人都知道Web前端开发做的时间久了，工资高，所以必然会增加竞争程度。但这是好事，有竞争才有更多人才出现。Web前端的生态系统几乎涵盖了目前市面上所有的软硬件，Web前端在中国的地位20年都是霸主，几乎是万能的，你能想到的，Web前端基本都能实现。
 
2、需求：
 
目前智联，boss，拉勾网的招聘来看，Web前端的需求量还是排名第一，但是这个需求是有前提条件的，就是需要有工作经验，因为你没有工作经验，公司就会认为你没有开发项目的能力，自然不会要你，所以你在学习中，一定要培养自己的经验，什么是经验？就是多多遇到问题，然后解决问题，这就是解决，也可以成为解决问题的能力。有人说Web前端饱和了，这是绝对不可能的，只能说你现在竞争大，学习的人，质量差了而已。所以很多人说找不到工作。其实他自己啥都不会。
 
这只是针对一线城市而言，相对于二三线城市来说对于实际开发经验是稍微的放松的。
 
3、稳定：
 
其实想学Web前端的人完全不用担心，因为在中国Web前端一直都是第一的，需求量非常大，这么多年Web前端从未被超越，第一个问题已经说过了，Web前端是有一个庞大的生态系统，它的覆盖范围非常广，而且已经连续10几年位居开发语言的榜首，所以Web前端是相对于其他语言来说，非常稳定的，不用担心失业的问题了。
 
二、学Web前端需要注意哪些问题？
 
学Web前端需要克服以下几点，如果能按照自己的规划的去学习成功的几率会更大。
 
1、惰：
 
其实很多人都是因为看别人工资高才有想法去学的，但是事情往往都是这样，眼红别人工资高，但是自己的实际行动是真的不强，能坚持下去的没有几个，或者自己学的本来就不好，就着急找工作。
 
2、 急于求成：
 
很多初学Web前端的小伙伴都喜欢无脑的刷视频，但是视频看过了之后自己又什么都不会，这样学了无疑就是浪费时间，没有任何作用，所以不要急于求成，学了哪些知识点就掌握哪些。多动手写代码。
 
3、没有时间或者压力大：
 
没有时间可能你还在上班或者你在干别的事情给自己找的一个借口，时间不是没有而是你有没有利用起来，现在是互联网时间，想要学习真的很容易的，可以利用自己碎片化的时间去学习，比如坐公交或者坐地铁，这样你有一大把的时间去学习，就看你能不能利用起来。压力大可能是因为你目前收入已经不满足你的消费了，所以觉得压力大，想找个薪资高的来弥补，但是想法是好的，你得去做，一步一步的去做。
 
4、自控力差：
 
自控力在学习上真的很重要，如果你觉得自己的自控力差，建议还是不要自学为好，因为你有可能付出大量的时间，也不一定会有成效，不是说自控力差的人就不能学好Web前端，是不能通过自学来进入前端行业了，可以考虑网上或者是系统学习，这种会有人监督你，可以系统学习，能避免浪费不必要的时间。
 
三、Web前端学习路线有哪些？
 
基础：HTML+CSS网站页面搭建，CS核心和PC端页面开发，HTML5移动端页面开发 。
 
核心：Web前端核心技术JavaScript，ecmasript，dom，ajax，json，正则，作用域，运动框架，核心算法，高级函数，插件封装，jQuery等。
 
高级：html5+高级JavaScript开发，大数据可视化，Webapp交互接口，lbs定位，微信sdk，es6标准，高级算法，数据结构，插件封装。
 
框架：vue、react、angular企业开发应用。
 
企业要求：bootstrap，swiper，iscroll，sass，ps切图，网站上线等。
 
以上就是我分享的学习Web前端应了解的一些知识。希望本篇文章能够对正准备学习Web技术，从事Web前端相关工作的小伙伴们有所帮助。目前，Web前端仍处于高速发展的阶段，希望那些有意于学习Web前端开发的人员，抓住机遇不要再犹豫不决，赶快来学Web前端开发吧。

一、基础知识
 
CSS： 
  
目标：常见页面布局（flex等）、CSS3 新特性、
参考书籍： 
    
CSS 世界
精通 CSS
JS 
  
目标： 
    
JS的原始类型
JS中的引用类型
迭代器和生成器
面向对象编程 和 函数式编程
代理 和 反射 （ Proxy 和 Reflect ）
函数表达式：闭包、this指针、模块模式、箭头函数等  => 函数式编程
异步编程
BOM 和 DOM
Canvas
了解常用事件
了解常用API
错误处理：如何处理及处理中的几种方式
请求数据和资源的方式：XMLHttpRequest 和 Fetch API
客户端存储
模块加载方式 
工作者线程、共享工作者线程及服务工作者线程
企业级开发过程中进行JS编码的最佳实践
参考书籍： 
    
JavaScript 高级程序设计（第四版）
 
 

 
 
二、前端框架
 
Vue： 
  
目标：做过Vue项目、熟练掌握Vue基础知识、掌握Vue周边生态、了解Vue的实现原理及Diff算法、能够封装独立的组件，具有自己的开源项目
参考书籍： 
    
Vue.js 实战
Vue官方文档
React 
  
目标：浅应用React框架、使用过React完成小型项目，了解React周边，了解ReactDiff算法及Vue的区别
参考书籍： 
    
React 进阶之路
深入了解React 技术栈
 
 

 
 
三、前端工程化开发
 
webpack / gulp 
  
目标：了解webpack，掌握webpack核心配置，能够自主解决构建配置等问题
参考书籍 
    
webpack官方文档
深入浅出webpack
git 
  
目标：熟练使用 git 仓库管理自己代码，使用git进行合作开发
参考书籍： 
    
Git 版本控制管理
 
 

 
 
四、扩展语言
 
TypeScript 
  
目标：了解 TS 和 JS 的区别、JS的新特性、TS的核心语法、TS编译、TS错误处理、TS开发与测试、TS编码风格，构建小型TS项目
参考书籍： 
    
TS 中文文档
深入理解TypeScript
Scss / Less 
  
目标：熟练掌握 Scss / Less 的语法，在项目中应用
参考书籍： 
    
Scss / Less 官网
 
 

 
 
五、服务端 
 
Node 
  
目标：了解Node概念，Node模块机制、异步IO、Node中的内存控制、Buffer、Node 中支持的TCP / UDP / HTTP 编程、Node单元测试及性能测试，熟悉Express / Koa
能够使用Node搭建小型后台
参考书籍： 
 
  
 
    
深入浅出Node
Node.js 设计模式
 
 

 
 
六、其他
 
对前端性能优化具有一定的见解
了解一定的web安全相关知识
了解浏览器原理、调试、编译原理、JS解释器等底层原理
了解Echarts、HighChart、百度地图等可视化操作
了解一些算法实现：实现debounce、实现throttle、实现bind、call、apply、实现Promise、二叉树深度等
 

大致总结的web前端学习路线图
 
 
 
 
 

 
web前端进阶教程目录
 
一、学习准备
二、网页布局基础
HTML
CSS
页面布局（Layout）
相关知识
  
  
三、Javascript
ECMAScript语法
JavaScript浏览器宿主对象
文档对象模型（DOM）
浏览器对象模型（BOM）
JavaScript实现web通讯
客户端存储API
文件操作API
    
    
ES6新特性
TypeScript语法基础
JSX语法基础
  
  
四、前端框架
Vue
Vue基础
Vue进阶
   
angular
  
五、js库
六、前端高级教程

 
一、学习准备
 
WEB前端是什么
初步了解浏览器
在浏览器输入网址到看到页面经历了哪些过程？
新手理解HTML、CSS、javascript之间的关系
 
二、网页布局基础
 
HTML
 
HTML是什么,超文本是什么意思
HTML语法与文档结构
HTML文档头部head的结构与meta标签
HTML文档的标签分类 
HTML表单标签及用法详解
严格的xhtml
HTML5有什么新特性
前端要掌握的字符集知识-让网页告别乱码
 
CSS
 
CSS入门与选择器
CSS属性详解1
CSS盒模型与定位
CSS盒模型与定位相关属性
CSS3的新特性
使用CSS3制作网页动态效果入门
CSS颜色体系
CSS浏览器兼容与cssHack
CSS reset和常用样式
前端优化-css优化CSS样式的书写顺序及原理
 
页面布局（Layout）
 
前端页面布局方式的演变
前端静态网页布局经验谈
响应式布局与媒体查询原理
一步步学习Flex弹性布局
一步步学习grid网格布局
移动端页面布局经验谈
 
相关知识
 
前端SEO优化
前端优化-网页图片优化
提高前端开发效率—前端代码编辑器
提高前端开发效率—使用Emmet提高前端开发效率
提高前端开发效率—CSS预编译语言Sass、Less和Stylus
提高前端开发效率—使用浏览器开发者工具
 
三、Javascript
 
Javascript简介
 
ECMAScript语法
 
ECMAScript基础语法
Javascript变量的声明、赋值、变量提升和作用域
Javascript数据类型
用JS内存空间理解基本类型和引用类型的区别
Javascript运算符
javascript数据类型转换
Javascript语句
Javascript流程控制语句
Javascript中的对象入门
Javascript函数入门
Javascript执行顺序和执行环境
Javascript构造函数
JavaScript面向对象-创建对象
Javascript面向对象-对象属性详解
JavaScript面向对象-继承机制
JavaScript Object对象
JavaScript Number对象
JavaScript Boolean对象
JavaScript 字符串（String） 对象
JavaScript RegExp 对象
JavaScript 正则表达式语法
javascript中数组Array对象
JavaScript Date对象
JavaScript Math对象
JavaScript的JSON对象
JavaScriptJS运行机制-进程和线程
JavaScript运行机制-事件循环与任务队列
JavaScript的Error对象
 
JavaScript浏览器宿主对象
 
前端要理解的widow对象
JavaScript 调试助手 -Console 对象
 
文档对象模型（DOM）
 
Javascript中的DOM(一) DOM树和节点
Javascript中的DOM(二) DOM 对象类型
Javascript中的DOM(三) 事件与Event对象
 
浏览器对象模型（BOM）
 
浏览器对象模型BOM
 
JavaScript实现web通讯
 
AJAX和XHR实现浏览器与服务器的异步通信
前端要了解的HTTP知识
常用的HTTP请求方法
前端实现WebSocket即时通讯
 
客户端存储API
 
浏览器端的几种存储技术
前端理解cookie
localStorage和sessionStorage
离线缓存 application cache
前端优化-缓存的利用
 
文件操作API
 
Javascript操作文件（一）-文件上传
Javascript操作文件（二）-读取与解析文件
 
ES6新特性
 
ES6新特性概览
ES6 声明与表达式
ES6 String的扩展
ES6 数组的扩展
ES6-for…of循环和遍历器
ES6新增的Set、WeakSet 、Map、WeakMap数据结构
ES6-对象的扩展
ES6-函数的扩展
ES6-生成器函数（generator function)入门
ES6-终于有了Class
ES6-Promise对象获取异步操作的消息
ES6-用Proxy和Reflect操作对象
ES6-Module 模块化
 
TypeScript语法基础
 
TypeScript是什么
TypeScript数据类型
TypeScript接口
TypeScript类
装饰器
 
JSX语法基础
 
四、前端框架
 
Vue
 
Vue基础
 
简单理解MVC、MVP、MVVM框架
MVVM 模式与Vue 
Vue实例与组件入门
Vue模板语法
Vue组件（一）-常用选项methods、computed、filters、watch、props
Vue组件（二）-生命周期函数
Vue组件（三）-内置组件component、transition、 transition-group、keep-alive、slot
Vue组件（四）-组件之间的通信
Vue组件（五）- 组件的继承mixins、extends、provide、inject
Vue状态管理插件-Vuex入门
Vue中使用Axios实现Ajax异步通信入门
SPA中前端路由实现原理与Vue-Router前端路由模式
Vue中使用Vue-Router管理路由
Vue中router-link组件的属性
Vue中管理路由-vue-router路由配置
Vue异步组件和vue-router路由懒加载
Vue中管理路由-vue-router路由守卫
vue-router的addRoutes方法实现权限控制
Vue简介和知识体系
 
Vue进阶
 
windows系统搭建VUE环境(安装vue-cli)
浅谈前端工程化（一）Nodejs和NPM
浅谈前端工程化（二）Gulp和Webpack构建项目
浅谈前端工程化（三）Webpack4构建项目入门
Vue项目（Vue cli3）中的配置文件
Vue项目开发规范
Vue项目中常用到的依赖包
Vue跨域问题解决方案
Webstorm2018中配置Vue开发环境详解
前端单元测试和e2e测试
在Vue 中使用 JSX 语法
 
angular
 
Angular CLI 构建项目及命令
 
五、js库
 
前端常用的js库
Jquery 简化JavaScript 编程的js库
用JavaScript 工具库Lodash处理数据
Bootstrap 响应式布局的HTML、CSS 和 JS 框架
qs-url参数转化 (parse和stringify)的轻量级js库k
MockJs用法详解
moment 日期处理类库
echarts 可视化图表库
validator.js 前端验证工具
animate.css CSS动画库
 
六、前端高级教程
 
前端要懂的数据结构
版本管理工具SVN
版本管理工具 git
前端优化
前端安全