随着前端的发展，各个技术也在不断交替更新，下面小编为你精心整理了2019年前端线路图，希望对你的前端发展有所帮助。

前端线路总图：

一．前端相关概念建立
学习时长：约0.5天
学习目标： 建立起整个前端与后端的知识大体系，给之后的学习打好地基。
主要内容：
浏览器的概念介绍：
浏览器的作用、工作方式
浏览器的概念介绍：
浏览器的作用、工作方式
HTTP协议：
协议产生的原因、作用、及内容
页面加载流程：
当用户打开浏览器，输入地址栏并按下回车之后发生的事情

二．HTML-CSS-JS基础-jQuery
学习周期：约23天
学习目标：
熟悉HTML布局、CSS样式、JS内容、jQuery的使用。
熟悉CSS盒模型、CSS的各种常见属性与属性值
熟悉页面的书写过程及简单的JS交互
熟悉一些较为常见的动态效果
学习内容：
HTML及HTML5：
理解浏览器如何解析HTML、基本的语法规则、不同标签的使用方式、嵌套方式
CSS：
理解层叠式样式表的语法规则、各种盒模型及常用布局
CSS3：
伪类、新选择器及高级盒模型
JavaScript：
理解JS的作用、运行规则、语法规则、数据类型、判定、循环
对象、数组、函数、日期、正则、异常
jQuery：
$函数、选择器、常用方法、链式调用、项目实战

三．JS进阶-面向对象-H5新特性
学习周期：约16天
学习目标：
能够使用JS实现更加复杂的功能及动画
能够熟练操作DOM
能够理解面向对象的相关知识
能够使用HTML5的canvas进行小游戏的开发
主要内容：
DOM：
理解DOM的作用及使用规则
JS进阶：
快捷属性和尺寸、浏览器检测、事件流程
面向对象：
构造函数、原型、继承
H5新特性：
多线程、事件推送、前端存储、canvas、历史记录等

四．设计模式-AJAX-NodeJS-数据库
学习周期：约14天
学习目标：
能够理解函数的高级运用如闭包、IIFE、JS执行队列、垃圾回收机制
能够理解并会熟练运用设计模式
能够学会如何发送AJAX请求并处理响应
能够使用Express创建服务器应用程序
学会操作数据库
学习内容：
设计模式：
单例模式、工厂模式、闭包类、MVC思想、MVVM等
AJAX：
AJAX优缺点、异步请求、字符串模板、跨域
NodeJS：
Node服务器的相关知识、接口、文件操作、Express框架
数据库：
数据的概念、分类、使用Node操作数据库、MongoDB数据库

五．工程化-CSS预编译-ES2015-小程序
学习周期：约11天
学习目标：
能够使用工程化工具进行代码的压缩、编译、检测
能够使用Less、Sass进行CSS的开发
学会使用ES6语法、async、await等更高版本的ECMA内容
能够使用微信开发者工具进行小程序的开发
主要内容：
工程化：
Gulp使用、Webpack使用
CSS预编译：
Less使用、Sass使用
ES2016：
块级作用域、新的定义变量关键字、新的方法拓展、字符串模板与插值、新的数据结构、新的编程方式、类、继承、模块化
小程序 ：
小程序注册、介绍、组件、API、开发跨平台通用程序

六．Vue-React-Angular
学习周期：约18天
学习目标：
能够使用高级框架进行前端代码的开发
熟悉NodeJS全栈开发流程
归纳前端工作流程，重新认识前端，温故知新
学习内容：
Vue：
Vue详解、Vue插件、Vue脚手架、Vue项目实战
React与ReactNative：
React详解、React组件化、Redux状态管理、React项目实战
ReactNative详解、ReactNative创建移动端应用、ReactNative项目实战
Angular：
Angular详解、Angular特性、Angular项目实战

关注公众号：icketang 获取前端视频教程

原文地址：https://blog.51cto.com/14337100/2415082