之前和朋友聊天，她和我说到她们公司的两个实习生，都是同一水平招进来的，一个月却发生了很大变化，其中一个实习生进步飞快，另一个却进步缓慢，工作状态也日渐不佳，后来她分析出主要差距在于兴趣，有兴趣在学习工作时就是快乐的，当然进步也快。大家学前端也是一样，了解这个领域和培养学习兴趣尤为重要，这意味着你能在前端这条路走多远。
路要一步一步的走，饭要一口一口的吃，下面我来给大家整理下前端的学习路线。
初级阶段
1.Photoshop入门
图像处理基础知识、图像处理基础知识、分辨率、图像的色彩模式、常用的图像文件格式。
2.互联网基本原理
互联网基本原理、服务器、浏览器、HTTP请求的概念。
3.HTML
编程工具介绍、HTML简介。HTML语义化标签、p标签和h系列标签。
4.CSS基础和高级技巧CSS介绍，选择器。
文字属性、颜色属性。
5.静态网站制作项目
搜索引擎优化的概念、页面常用SEO技巧、学会有格调的制作页面。
iconfont字体图标。一些常见的CSS高级技巧，比如负margin、压线技术、滑动门、列自撑技术。较复杂布局网站的学习，通栏banner、大背景等时下流行的网站制作方法。
中级阶段
6.JavaScript基础
语句、执行顺序、词法结构、标识符、关键字、变量、常量、alert语句和console控制台。值和变量、数字、文本、布尔值、null和undefined。表达式和运算符、运算符概述。
7.JavaScript DOM编程
事件与事件处理概述、事件与事件名称、常用事件、事件处理程序的调用、DOM事件模型、事件流、 事件对象、注册与移除事件。文档对象的常用属性、方法与事件、输出数据。
8.JQuery页面特效
jQuery对象和DOM对象、jQ选择器、CSS操作、设置和获取HTML、文本和值。
9.JavaScript进阶
命名空间、对象扩展、数组化、主流框架引入的机制——domReady、无冲突处理。语言模块、字符串的扩展与修复、数组的扩展与修复、数值的扩展与修复、函数的扩展与修复、 日期的扩展与修复、浏览器嗅探与特征侦测 、判定浏览器、事件的支持侦测、样式的支持侦测。类工厂、JavaScript对类的支撑、各种类工厂的实现。
10.HTML5和CSS3
HTML5概述、HTML5新特性、HTML5组织、HTML5构成、HTML5页面的特征、HTML基础、HTML5全局属性、HTML5其他功能、HTML5元素分类。实战HTML5表单、新增的input输入类型。
11.移动web和响应式页面
视口、缩放 、分辨率、物理分辨率、设备像素比、dppx和dpi 、meta视口。百分比布局、流式布局、CSS3新的流式盒模型。
12.JavaScript面向对象
创建对象、属性的查询和设置、 删除属性、检测属性、枚举属性、属性getter和setter、属性的特性、对象的三个属性、序列化对象、对象方法。类和模块、类和原型、类和构造函数、类的扩充、类和类型、子类。原型、实例化和原型、 对象实例化、通过构造器判断对象、继承与原型链、构造函数和原型对象 、构造函数、原型对象 、[[Prototype]]属性 、在构造函数中使用原型对象 、改变原型对象、内建对象的原型对象。
13.服务器知识和PHP入门
后台语言和前台语言的区别。初识PHP、PHP语言的优势、PHP 5的新特性、PHP的发展趋势、PHP的应用领域。
14.Ajax
Ajax概述与Ajax初体验、Ajax技术介绍、XMLHttpRequest对象详解、动态加载和显示数据、XMLHttpRequest对象概述、方法、属性、发送请求、GET和POST请求、运行周期、使用JSON响应、Ajax实用包的封装。
15.Canvas和手机游戏
Canvas绘图、基本知识、理解canvas坐标系、获取canvas环境上下文、理解路径、路径操作API 、绘制线条 、绘制矩形 、绘制圆弧 、绘制贝塞尔曲线 、线条属性 、线条颜色 、填充 、绘图状态。
后面还会涉及到高级阶段，前端的学习过程，是一个由“难”逐渐“简单”，再由“简单”变“难”的过程。前半段是入门的过程，后半段是成为大牛的过程。总之学前端只有八个字：明确方向，兴趣主导。
最后
前端学习是一条漫长的道路，我们要学习的东西不仅仅只有表面的 技术，还要深入底层，弄明白下面的原理，只有这样，我们才能够提高自己的竞争力，在当今这个竞争激烈的世界里立足。
千里之行始于足下，愿你我共勉。
金三银四快到了，送给大家一个小福利，下面是我在工作之余整理的一些面试题，包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、react等等，共计657页PDF。
HTML 篇
- 图片中 title 和 alt 区别？
- Html5 有哪些新特性、移除了哪些元素
- 浏览器是怎么对 Html5 的离线储存资源进行管理和加载的呢
- 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
- canvas在标签上设置宽高 和在style中设置宽高有什么区别
- 浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？
CSS 篇
- CSS中link与@import的区别：
- position的absolute与fixed共同点与不同点：
- BFC 有什么用
- 清除浮动的几种方式
- Css3 新增伪类 - 伪元素
- IE盒子模型 、W3C盒子模型
- display:inline-block 什么时候不会显示间隙？
- 行内元素float:left后是否变为块级元素？
JavaScript篇
- js的各种位置，比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别？
- js拖拽功能的实现
- 异步加载js的方法
- js的防抖
- 绕不过去的闭包
- 说说你对作用域链的理解
- JavaScript原型，原型链 ? 有什么特点？
- 请解释什么是事件委托/事件代理
- Javascript如何实现继承？
Vue
- vue中 key 值的作用
- Vue 组件中 data 为什么必须是函数？
- vuex的State特性是？
- 介绍一下Vue的响应式系统
- computed与watch的区别
- 介绍一下Vue的生命周期
- 为什么组件的data必须是一个函数
- 组件之间是怎么通信的
React
- 介绍Redux，主要解决什么问题？数据流程是怎么样的？多个组件使用相同状态如何进行管理？
- React-Redux到react组件的连接过
- Redux中间件是什么东西，接受几个参数
- redux请求中间件如何处理并发
- 如何配置React-Router
- 路由的动态加载模块
- React生命周期及自己的理解，以及V16对生命周期的修改
- 为什么使用虚拟dom？
浏览器
- 跨标签页通讯
- 浏览器架构
- 浏览器下事件循环(Event Loop)
- 从输入 url 到展示的过程
- 重绘与回流
- 存储
- Web Worker
- V8垃圾回收机制
- 内存泄露
- reflow(回流)和repaint(重绘)优化
- 如何减少重绘和回流?
- 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
- localStorage 与 sessionStorage 与cookie的区别总结
