为什么绝大多数的小姐姐最后都选择了前端？
大家好，我是可可爱爱的三妹啊。
学校安排的课程主要是 Java 后端，但其实作为一名女孩子，我其实非常想学习前端，觉得相对容易一点。
下面是我自己总结的一套前端入门的学习路线，还会顺带分享一些前端的学习资料，喜欢的小伙伴们可以收藏下。
ღ( ´･ᴗ･` )比心
一、通用学习方法
前端开发上手快，又容易得到反馈，页面效果即时可见，所以我推荐的学习方法是：
学一点内容就快速实战，从实战中找到成就感，发现问题，再带着问题回去系统化的学习，如此往复。
二、基础
1）HTML+CSS
这部分的学习建议到 W3School 上学习，边学边练，学习的过程中可以打开浏览器的开发者模式，方便查看和调整。
https://www.w3school.com.cn/h.asp
2）JavaScript
这部分的学习内容非常多，从初级到高级，有很多内容需要学习。如果没有其他编程语言基础的话，学习起来就需要多一点点耐心。
先看一下阮一峰老师的 JavaScript 入门教程，内容从最简单的开始讲，循序渐进、由浅入深，并配合了大量的代码实例，非常适合初学者。
https://wangdoc.com/javascript/
我知道，一定有小伙伴想要离线版的 PDF，贴心的三妹也帮大家整理好了。
大家可以扫描下方二维码关注后在公众号后台回复「前端」获取最新版。里面还有不少优质的前端学习资料。
▲回复「前端」，获取PDF▲
之后建议看一看《JavaScript 语言精粹》这本书，这本书能够帮你确认 JavaScript 中哪些是精华，哪些是糟粕。
像JavaScript 中变量的作用域、变量传递方式、函数的定义环境和执行环境、闭包、函数的四种调用方式（一般函数、对象的方法、apply、call）这些内容在这本书中都有详细的讲解。
就目前来说，市场比较缺的是高级前端，所以如果想要进阶的话，必须要学一下数据结构与算法。
为什么要学数据结构与算法呢？
因为这是解决复杂问题的必备武器，比如说，如何把一个多级嵌套的数据对象，转换成扁平的 Map 结构再提交到服务器。
更为关键的是，数据结构与算法是计算机的思维方式，比如说分治算法的思想，对模块设计以及系统设计都有着较大的影响。
推荐 awesome-coding-js，一个前端算法开源项目，包括很多优质的题目以及详细解析
http://conardli.top/docs/
三、初级
有了基础以后，就可以进行一般的静态网页设计了，如果想要进阶的话，还需要学习更多的知识。
1）CSS
CSS 的学习可以分为三块：基础概念、CSS 2.1 规范、CSS 3 规范。
建议到 GitHub 上看一下这份通用 CSS 笔记、建议与指导，第一部分探讨了 CSS 的语法、格式，并且分析了 CSS 的结构；第二部分围绕方法论、思维框架以及编写规划展开了对 CSS 的讨论。
https://github.com/chadluo/CSS-Guidelines
2）JavaScript
为了能胜任 JavaScript 编程，你必须在之前的基础之上进一步学习，像三个前端框架：React、Vue、Angular，可以挑选其一进行深入学习。
Vue.js 官方文档，讲真，学习一门新技术的时候，官方文档肯定是首选。我推荐的策略是以理解为主，难以理解的内容可以暂时跳过，因为死磕的东西可能一时半会用不上。快速把文章看一遍，扩充自己对这门技术的认知，对以后掌握它会很有帮助。
https://cn.vuejs.org/v2/guide/index.html
Vue.js 技术揭秘，这份开源教程的目标是全方位地解析 Vue.js 的实现原理，对源码层面有着很深入的剖析。
https://github.com/ustbhuangyi/vue-analysis
Angular 入门教程，这份官方教程会通过构建一个电子商务网站，介绍 Angular 的基本知识。
https://angular.cn/start
React 入门教程，这份教程更适合喜欢边学边做的开发者。
https://zh-hans.reactjs.org/tutorial/tutorial.html
之后，要学习一下 DOM 编程，这个也是前端工程师的核心技能之一，《DOM 编程艺术》这本书是必读的。
还有网络编程，这部分主要学习一下 fetch，websocket，jsonp，cors，formData 这些关键字。
四、中级
初级的目标是写出可以运行的页面，中级的目标是以更快的速度写出体验更好的页面。
如果说数据结构与算法会是初级到高级的第一道门槛，能否写出高内聚、低耦合的代码，则是第二道门槛。
内聚什么？解耦什么？
从变化的角度来说，未来可能变化和不太可能变化的代码需要解耦；对应的原则包括：开放—封闭原则（OCP）、Liskov替换原则（LSP）、依赖倒置原则（DIP）、接口隔离原则（ISP）
从功能的角度来说，不同职能的代码必须解耦；对应的原则包括：单一责任原则（SRP）。
在渲染引擎 webkit 和 v8 引擎出现之后，浏览器的性能得到了很大提升，以至于在多数场景下前端工程师都不会面临的什么性能问题。
这其实是从初级到中级的一道隐形的门槛，很多工作多年，由于工作场景的限制，接触不到什么问题，自己也没主动学习，导致在性能优化维度一片空白。
《高性能javascript》依然是这个领域的经典，第五章字符串和数组相关操作、第九章构建部分、第十章工具这部分可以忽略。
前端页面的极致用户体验主要围绕着：加载体验、渲染体验、操作体验这三方面。千万不可以只知道优化加载体验，5G时代即将来临，网络速度会得到进一步提升，但CPU处理速度，貌似还没看到突破性进展，未来的用户体验问题，会更加聚焦到渲染体验和操作体验。
前端项目同样面临着软件生命周期的各个环节：
代码管理必须要学会使用 Git 代码构建要学会使用 webpack
五、高级
从初级到中级，可以根据教程来快速达到目的，但进入高级后，就只能靠你自己了。这里提供一个前端的知识结构：
https://github.com/JacksonTian/fks
里面的内容就需要你自己去花时间花精力好好消化一下了。
参考链接：https://www.zhihu.com/question/19834302
前面提到的学习资料可以点击下面的公众号名片，回复关键字「前端」获取。
没有什么使我停留——除了目的，纵然岸旁有玫瑰、有绿荫、有宁静的港湾，我是不系之舟。