前端最努力的同学都是如何学习的？

大家好，我是二哥呀！ 先说一下我个人对前端职业发展前景的看法，希望对那些站在前端学习起点，或者已经在路上，但又有点犹豫和迷茫的小伙伴一点点启发和帮助。

我毕业那会，也就是大概 10 年前，如果你在学校的时候做过类似于“图书管理系统”这样的项目，就可以拿到淘宝的 offer，那发展到现在，能做到这一点的候选人实在是太多了！

但前端发展到现在，要求也越来越高了。比如说天猫的消费者前端导购页面，为了提高购买的转化率，用户体验做了非常多系统化的优化升级，复杂度很高。

一、通用学习方法

前端开发上手快，又容易得到反馈，页面效果即时可见，所以我推荐的学习方法是：

学一点内容就快速实战，从实战中找到成就感，发现问题，再带着问题回去系统化的学习，如此往复。

二、基础

1）HTML+CSS

这部分的学习建议到 W3School 上学习，边学边练，学习的过程中可以打开浏览器的开发者模式，方便查看和调整。

2）JavaScript

这部分的学习内容非常多，从初级到高级，有很多内容需要学习。如果没有其他编程语言基础的话，学习起来就需要多一点点耐心。

先看一下阮一峰老师的 JavaScript 入门教程，内容从最简单的开始讲，循序渐进、由浅入深，并配合了大量的代码实例，非常适合初学者。

https://wangdoc.com/javascript/

之后建议看一看《JavaScript 语言精粹》这本书，这本书能够帮你确认 JavaScript 中哪些是精华，哪些是糟粕。

像JavaScript 中变量的作用域、变量传递方式、函数的定义环境和执行环境、闭包、函数的四种调用方式（一般函数、对象的方法、apply、call）这些内容在这本书中都有详细的讲解。

就目前来说，市场比较缺的是高级前端，所以如果想要进阶的话，必须要学一下数据结构与算法。

为什么要学数据结构与算法呢？

因为这是解决复杂问题的必备武器，比如说，如何把一个多级嵌套的数据对象，转换成扁平的 Map 结构再提交到服务器。

更为关键的是，数据结构与算法是计算机的思维方式，比如说分治算法的思想，对模块设计以及系统设计都有着较大的影响。

三、初级

有了基础以后，就可以进行一般的静态网页设计了，如果想要进阶的话，还需要学习更多的知识。

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

没有什么使我停留——除了目的，纵然岸旁有玫瑰、有绿荫、有宁静的港湾，我是不系之舟。