|
花了我一周的时间，终于整理出这篇适合初学者的前端学习路线！
01 了解前端
前端，是相对后端而言的。那么怎么区分这两者？
简单来说，给用户看的、操作的就是前端，比如web网页、移动端网页、APP、小程序，凡是我们在电脑/手机/其他设备上能看到的，基本都是前端的范畴。而用户看不见的、涉及逻辑功能、应用数据处理模块的，则属于后端（或称为服务端）。
通俗来讲，前端在一个项目里的工作是这样的：拿到UI设计的设计稿，然后实现设计稿，并且调用后端程序员给的数据接口以获取数据，然后测试，最后部署上线。
在这个过程中，前端主要利用HMTL与CSS建构页面（其中HMTL构建骨架，CSS构建样式），用JavaScript获取后端数据以及完善交互和用户体验。
HTML、CSS、JavaScript，是前端开发中最基本也是最必须的三个技能。
02 前端学习的三个阶段
第一阶段学习内容包括：
开发环境搭建（开发工具、基础的计算机命令）
HTML（常用的标签、表单、语义化、多媒体、常用的api、Dom）
CSS（基础语法、样式的优先级、弹性盒模型、动画和过渡效果）
JavaScript（基础语法、队列链条哈希等常见的数据结构、JavaScript执行机制、面向对象，正则表达式等，其中闭包、promise、类型转化、作用域是重点）
网络相关基础（常见的通信、常见的响应方式和状态码、ajax通信、mock数据）
浏览器相关的知识（浏览器的兼容性、SEO、Debug）
第二阶段学习内容包括：
Git与Svn：
JavaScript进阶（基础的算法学习、函数式编程、ES6学习、模块化、typeScript）
框架学习（node.js、打包和构建、css预处理、Vue+react+angular三大主流框架、axios、uni-request）
移动端开发（小程序开发、原生开发、跨平台开发、小游戏开发）
第三阶段学习内容包括：
前端进阶（性能优化、源码解读、浏览器原理）
服务器相关（linux基础、nginx、docker）
服务端开发（了解serverless、数据库知识、node的网络框架、session/cookie）
------直接附上学习资源------
学习框架：
前端学习路线和资源-思维导图 https://wws.lanzous.com/ictDghk4tni
前端工程师必备技能-思维导图 https://wws.lanzous.com/izrh4hk4trc
web前端基础课程-思维导图 https://wws.lanzous.com/iu3xwhk4tqb
前端工程化体系打造-思维导图 https://wws.lanzous.com/iJSqChk4toj
前端HTMLl MDN文档学习大纲-思维导图 https://wws.lanzous.com/ibf2vhk4tmh
产品经理必懂的Web前端知识-思维导图 https://wws.lanzous.com/iGfTKhk4tje
前端企业开发页面布局-思维导图 https://wws.lanzous.com/iBFJrhk4tfa
前端知识大全-思维导图 https://wws.lanzous.com/ipKc6hk4tdi
前端学习路线-思维导图 https://wws.lanzous.com/iFU9ghk4tch
学习视频：
mock数据：https://www.bilibili.com/video/BV1PE411A7U6
Debug： https://www.imooc.com/learn/759
模块化: https://www.bilibili.com/video/BV1WJ411P7DH
typescript: https://www.bilibili.com/video/BV1AE41137QL
node.js: https://www.bilibili.com/video/BV1bs411E7pD
打包和构建（webpack）： https://www.bilibili.com/video/BV1e7411j7T5
打包和构建（babel）： https://www.bilibili.com/video/BV1jt411z7Wk
三大主流框架（Vue） ：https://www.bilibili.com/video/BV1H7411j7Mc?p=1
三大主流框架（react）： https://www.bilibili.com/video/BV1g4411i7po
https://www.bilibili.com/video/BV1CJ411377B
https://www.bilibili.com/video/BV1st41137hg
https://www.bilibili.com/video/BV1uT4y1G7xm
三大主流框架（angular）： https://www.bilibili.com/video/BV1bt411e71b
https://www.bilibili.com/video/BV1i741157Fj
Git与Svn https://www.bilibili.com/video/BV15J411973T
电子书&文章：
ES6学习 https://segmentfault.com/a/1190000004365693
https://segmentfault.com/a/1190000004368132
书籍推荐 https://github.com/biaochenxuying/awesome-books
学习资源有了，但还是得多敲代码，光看书看教学视频是没用的。
03 前端面试题汇总
HTML：web页面使用哪个HTML版本的指令？
CSS：盒模型；常见定位方案（normal flow、float、absolute positioning）；怎么清除浮动；选择器匹配规则
JavaScript：JS交换两个节点如何实现？异步事件驱动？JavaScript是单线程还是多线程？new 的过程？深拷贝和浅拷贝区别？AMD？iterator接口？
HTTP：get和post区别？一次http完整的过程？异步请求和同步请求的区别？https和http的差异？
浏览器：HTML加载过程？进程和线程的关系？内存泄漏实例？
框架：大三框架的比较？MVVM和Virtual Dom比较
面试题还有很多，就不一一罗列出来了。
直接附上面试题汇总 ↓↓
前端面试归纳-思维导图大全： https://wws.lanzous.com/iEblwhk4tgb
04 前端（工程师）的现状及未来
从人才需求来看，前端还属于需要人才的阶段。猎聘大数据显示，前端需求量占比9.46%，仅次于Java，是非常需要人才的。
另外，从薪资和地位方面来看，以前的前端可能处于程序员鄙视链的底端，但随着用户们不断要求更好的用户体验，前端同学会扮演越来越重要的角色，平均薪资也会水涨船高。 | 
转播
