究竟该如何学好前端？

之前发了一个帖子关于自己的成长经历，有一些同学问我，如何学好前端，我尚不是一名优秀的前端工程师，但也算入门前端，所以今天分享一些自己的经验。

【Why】

先来点真实的，我是谁？为什么这么做？未来还会做什么？

『我是谁』楼主本科就读于山东某二本院校，专业物联网工程，硕士就读于北京某211高校，专业计算机技术。本科软件硬件都有涉猎，学过C、数据结构、Java等基础课程，除此之外就基本没有学习过相关软件的课程了。自己读研后开始广泛学习计算机编程技术，前端、C#、Java、Python、Node、Go、各种框架我都有学习，因为导师有一个Web项目，所以前端学习的更多也更扎实，因此在找工作的过程中自己选择了前端方向，但因为自己也有后端开发和Node开发的经验，所以最后找到的工作是全栈开发。

『为什么这么做』正如我上一篇文章所说，我淋过雨，所以我希望可以为更多人撑起一把伞。网上的大部分编程入门教程，都不太适合初学者，我是研一开始自学Web开发的，自己在学习的路上遇到过很多问题，也知道自学的困难，我知道相比于知识的传授，启蒙或许是更重要的，我不是授课老师，我不会告诉你具体看什么什么课程，但是我自我感觉现在已经初步入门前端，我知道需要学什么，也知道如何学习避免走一些弯路，而我也乐意分享给大家，希望你在学习的过程中可以参考我的路线，更快地入门前端。

『未来会做什么』我会整理建立ShowMeTheCode专栏，里面包括学习路线、经验分享，秋招经验分享，如何制作优秀的简历，分享我在学习编程的过程中读的书籍。争取在毕业前会做出自己的个人网站，自己的东西都会迁移到上面。再后面就是做前端的分享，做一些开源的教程，也欢迎大家可以持续关注。

【What】

许多学习前端的同学说起自己的技术栈，可能会说HTML、JavaScript、CSS，React/Vue，然后就不知道该说什么了。说起前端，一些同学的第一印象还是前端只是写写界面，把界面做的漂亮一些就可以了，比如之前Java web兴盛的时候，前端只需要做好界面把静态界面交给后端人员，后端人员再用模板引擎去处理界面，但随着大前端的兴起，Vue、React等框架的高速发展，前后端分离架构的出现，Node语言、框架（Express、Koa）的不断发展，构建工具（Webpa·ck、Vite）的不断完善，前端不再是单纯的写界面了，前端工程化越来越强大，越来越多的工作可以由前端来做。而除了单纯的开发，前端人员也需要将精力放在性能优化与安全上，毕竟用户是直接通过你做的东西与软件进行交互的，如何在保证用户信息安全的前提下让用户拥有更好的体验感，成为前端工程师的又一任务。

大部分初学者对前端没有整体的了解，在学习的过程中可能也是被动的灌输式学习，只是老师告诉你该学这个就去学这个，我觉得学习前端同样需要有自己的知识体系，或者说自己对前端技术栈的理解。在我看来，前端除了要做好普通的开发，还需要了解浏览器架构、Web网络、事件循环机制、V8、浏览器渲染、Web安全、构建工具等等。有时候很多技术其实学起来并不难，难的是不知道该按照什么顺序去学，如果抛开技术栈底层栈的内容去理解上层内容，那么就有可能陷入知识盲区，像一只无头苍蝇一样乱撞。

很多同学在学习一门编程语言的时候不知道该按照什么顺序学，我做了一份关于前端的思维导图，然后带了一点自己的经验，给大家参考，因为我读研后算是从零基础开始学的，所以自己的学习路线可能更适合没有经验的同学，不一定适用于所有人，大家可以根据自己的实际情况做自己的调整，有自己的规划。

其中需要注意的三点

里面用数字标注了我认为对应知识点的重要性，在我看来，学会1是成为入门前端的基础，学会2可以为你锦上添花，学会3可以进一步丰富你的技术栈，更好的编程。
不同的同学学习速度不同，所以我不会告诉你需要花多长时间把这些学完，你只需要尽自己的最大努力，在求职或独立完成某项工作前，把这些学完就可以。
我在每个模块下写了一些我认为比较重要的知识点，但不意味着这个模块你只需要学习这么多。

〖基础篇〗

最重要也是最基础的，HTML+JavaScript+CSS三大基础，虽然现在各大框架盛行，很少再使用原生的语言进行开发，但是不要忘记，框架的底层还是这些东西，只有将这些内容学好了，才能更好的学习后面的知识。

同时，你可以适当的了解一些标准，比如W3C标准，可以让你更好的写代码。

〖进阶篇〗

基础学习完后我认为首先要对一些框架进行学习，一方面可以继续巩固基础，另一方面优秀的框架在应用、源码等多方面都值得深入了解。

在学习Vue、React之前，如果你有足够的时间，建议你学习一下Bootstrap、JQuery。Bootstrap可以称之为最早的UI框架，JQuery虽然现在不再流行，但还是很有必要学习一下的，可以让你了解以前的开发模式，甚至可以阅读以下源码，学习其中优秀的设计模式和代码风格。

Vue/React我觉得最少要学习一个，而且不仅仅是会使用还要阅读源码，了解实现原理。

最后需要学习浏览器原理、Web安全。学习浏览器原理可以让你更好的知道自己的代码是如何在浏览器运行的，界面究竟是如何渲染的等诸多你之前从未关注过的知识。浏览器通过网络进行数据传输，浏览器又是如何保证数据、隐私安全的，这同样值得关注。

〖高级篇〗

JS拥有不同的引擎，Chrome浏览器的V8引擎是很有必要好好学习一下的，学习完后，你可以对JS的有更加深层次的理解。

项目工程化、性能优化都是在做项目的重点，如果你希望涉猎一些后端知识，你同样可以学习Node、数据库，如果你学有余力，甚至可以学习Java（Spring）、Python（Django）等，如果能掌握跨端开发和Nginx的使用，那就更好了。

〖计算机基础〗

网络是前端与后端通信的桥梁，只有学好了网络，才能更好的了解这之间的过程。例如：经典的面试题——“在浏览器URL输入一个地址，到返回界面，这之间都发生了什么？”

或许前端与操作系统关联并不是很大，但如今的浏览器，似乎逐渐成为了操作系统之上的“操作系统”（例如ChromeOS），而浏览器的底层架构也逐渐向操作系统架构方向发展，了解一些操作系统的知识，可以帮助自己更好的了解浏览器。

算法可以帮助程序员写出更高效的代码，设计模式可以帮助程序员写出更高质量的代码。前端虽然对算法的要求没有那么高，但优秀的算法能力不仅可以让你在面试中一路畅通，也可以让你在开发中更加得心应手，而学好设计模式，同样可以帮助你写出更加优雅的代码。多

少了解一些编译原理的相关知识，可以让你对JavaScript语言的编译、执行过程更加了解，让你了解AST等相关知识，让你写出更快速的JS代码，让你对JS更加了解。

【How】

仅仅了解学什么是不够的，如何学习是也是非常重要的。我觉得整体的学习路线应该是视频入门 + 上手练习 + 源码学习 + 读书巩固。

〖视频入门〗

对于没有基础的同学来说上来就读书学习是比较枯燥的，而且可能不知道该如何操作，容易一上来就产生抵触心理，放弃学习，所以我觉得对于新手来说看视频是更好的入门方式。一方面大多数授课老师会提炼比较重要的部分来给学生讲，另一方面可以跟着老师实际动手操作，接受起来会比较快。

〖上手练习

前端不像Java等后端，搭建服务器相对复杂，不论是从刚开始的静态界面，或是到后面的Vue等框架，操作相对简单，比较容易复现。因此在有了一定基础后，需要进行不断的做项目练习。项目的选取是比较多样的，一般每个教学视频课程的后面都会跟一个项目练习，刚开始可以跟着老师敲，把老师讲的都弄明白、理解，后面可以自己找一些开源项目来做。

〖读书巩固〗

仅有入门和练习我觉得是不够的，师父领进门，修行在个人，很多课程在讲解的时候，基本只会讲基础的应用，一些原理性的并不会讲的很透彻，所以在掌握好基础后需要去阅读书籍来了解一些底层的东西，比如我在学习JavaScript的时候，看的课程老师讲的事件循环比较简单，基本是草草了事，自己也不是特别明白，但刚开始不明白这个是不影响做项目的，但是在找工作的时候，确实经常容易被问到，后来读了《你不知道的JavaScript》，才彻底明白了事件循环是怎么回事。

〖源码学习〗

源码的学习有两个作用，一个是帮助我们了解框架实现原理，可以更好的使用，另一方面优秀的源码往往有着比较好的代码风格、使用了一些优秀的设计模式，我们可以从中学习到很多有用编程技巧。

一点碎碎念。

因为自己现在刚来实习，然后mentor又给了一个比较紧急的任务，需要我在两周内做完，所以可能更新、回复的都会慢一些，后面我会把自己的校招笔记整理一下，发布出来，然后陆续整理一些自己在学习不同知识时候看的视频和看的书开源出来，希望大家可以持续关注。

学习是枯燥的，是需要相互协作互相帮助的。大家可以加我的微信（kaisarh_1104），我会拉大家进编程学习讨论交流群，大家可以在里面进行提问，互相帮助，一起进步。也可以找我聊天，分享你的故事，或者你有什么问题，前后端编程学习、考研、求职方面的问题，都可以问我。

也可以关注公众号（代码行间），现在还没什么东西，我会在上面分享我的经验，大厂的故事、前端的技术，也会坚持做前端和计算机基础知识的分享。

# 希望可以帮助你更好的入门前端。

# 希望可以在你学习的路上给你一点帮助。

#学习路径#