29天吐血整理前端学习路线，送给那些正在自学或准备自学前端的人！

本文链接：https://blog.csdn.net/2401_83641098/article/details/137129082

三大件学习
库工具
前端框架（ MVVM ）的学习
浏览器 & 计算机基础
前端工程化
性能优化
Nodejs
数据结构和算法
依葫芦画瓢

三大件学习

现在每年依旧有很多初级入门的前端开发。所以对初入门的朋友也给出一点意见。

刚入门的朋友，我觉得不应该一开始就学习像 Vue、TypeScript、Webpack 等知识。应该把重点放在 CSS & HTML & JavaScript 基础知识的学习上。

CSS & HTML

对于刚入门的朋友我依旧建议先将 CSS(3) & HTML(5) 的知识点认真学习一边。学习的途中最好是学习完一部分就自己在敲一遍代码，加深自己的记忆。

当然如果你愿意，建议你可以先仿一个网站的静态页面（掘金、知乎等都可以），有一些属性就可以了解他实际的实现场景。

当然刚开始敲代码的时候还是不要过分依赖自动补全功能，一开始就使用自动补全对你记忆一些属性时没有帮助的；踏实点学习，日后会有回报的。

关于 CSS(3) 你需要了解的一些知识点

盒模型（标准 & IE ）
flex、float、Normal Flow 等的理解
CSS 常用选择器
行内、内部、外部样式的区别
CSS 层叠规则
BFC 与 IFC 的了解
CSS3 的 transform、transition、animation 等属性的运用了解
响应式布局的理解
……

CSS 说容易也容易，说复杂也复杂；因为 CSS 总是能给你意外的惊喜。

HTML(5) 你需要了解的一些知识点

说到 HTML 我想有很多人是 div 一把梭。因为 div 用的爽，不用担心默认样式。

有人说 HTML 语义化的优点很多，比如清晰的页面结构、有利于 SEO、便于团队开发和维护；这些我都承认，不过我还是喜欢 div 一把梭。

HTML 语义化( 不是很理解为什么面试总会问 )
canvas
本地存储（ localStorage、sessionStorage、cookie 的理解）
video 和 audio 的使用
应用缓存( cache manifest )
……

JavaScript

JavaScript 一直都是我们前端的基石，一定程度上 JavaScript 的理解深度决定了你的发展。所以一定要用心学习。

现在很多人一看到闭包、原型链、作用域链、继承之类的文章都是直接跳过，你现在可以自问一下你的确理解这些基础的知识点吗？

JavaScript 的基础知识点确实很多，所以《JavaScript 高级程序设计》写了 700 多页；不过当你 JS 基础扎实后，你会发现你在学习框架、亦或是学习框架源码的时候会轻松许多。

JavaScript（ES6+）你需要了解的一些知识点

类型转换
this
作用域（作用域链）
原型链以及继承
闭包的理解
动态作用域和词法作用域
JavaScript 执行机制
promise & async
……

上面说的 CSS & HTML & JavaScript 的基础知识点并不需要你一入门就全部都理解透彻；有些虽然是基础，但却也有它的难度。就算是高级也不敢说自己全都掌握了，有句话说的挺好 —— 书读百遍、其义自见。

我们第一遍学习不可能尽懂，到最少可以给我留下一个印象。过一段时间再学习这块知识点的时候，你肯定会有一个全新的理解。学习只一个需要一直在线的任务，重复的学习可以帮助你保持持续的竞争力。

我先声明一点，我并没有说其他技术不需要去学习，只不过初入门最好重点是先将基础夯实。

其实三大件的学习不需要花费多少时间，有基础的大概 3 个月就可以大致的看一遍。是否真的理解这是后话，不过已经算是入门了。

CSS & HTML & JavaScript 推荐书籍/网站

HTML

《Head First HTML与CSS》

Head Fisrt系列书你懂的，为入门而生，文笔风趣幽默为主，配图也很丰富，简单易懂就对了。

《HTML5 权威指南》

豆瓣评分8.5的书，书是没问题，800多页的书全面性不用说，但是能不能读得完这是一个问题，就看决心和“手速”了。

网络教程
https://www.w3school.com.cn/h.asp
https://www.runoob.com/html/html-tutorial.html
https://developer.mozilla.org/

CSS

《CSS权威指南》

放在现在来看是本“老书”了，但是很多基础的东西在那摆着也得学。CSS东西就是细节多，这本就当是给CSS的知识点做了一个大梳理吧，所以这本书当工具书看是可以。

《CSS揭秘》

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8qFV7TCz-1605698383286)(//upload-images.jianshu.io/upload_images/9824247-93238fe68fe86206.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp)]

这本书展示了47个CSS的技巧，是一本注重实践的教程，虽然算进阶书，但是内容没那么难，看完对很多实现思路有启发。

网络教程
https://www.runoob.com/css/css-tutorial.html
https://www.w3school.com.cn/css/index.asp
https://developer.mozilla.org/

JavaScript语言

《你不知道的 JavaScript》

这本书是翻译过来的，分好几卷，黄油油的封面你懂的~ 应该说这本书把JavaScript里很多复杂且深度的概念进行了细致讲解，比如作用域、闭包、原型、异步等等，网上书评啥的还是可以的。

《JavaScript DOM编程艺术》

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kbsH8k1u-1605698383295)(//upload-images.jianshu.io/upload_images/9824247-f3c1b39a305f4770.png?imageMogr2/auto-orient/strip|imageView2/2/w/1052/format/webp)]

这本书并不厚，小白可用，初学时搞定并实践了这本书里的内容，应该入门没啥问题，这样后面就可以找一些经典甚至圣经类的书来加强和巩固了。

《JavaScript 高级程序设计》

大名鼎鼎的JS红宝书，是权威的JavaScript入门书籍，没错是入门书籍！不要被名字里的“高级”两个字吓跑~ 内容循序渐进，基础且全面，不能指望一遍就过，适合精读也适合回味。

《JavaScript权威指南》

上面是“红宝书”，这本是“犀牛书”，据说这两本在一起更搭配哦。

这本书是淘宝前端团队翻译的，也算是JavaScript开发者的圣经之一，内容太多太全，如果能多通读几遍并有所心得，估计成神之路也就不远了~

网络教程
菜鸟教程：https://www.runoob.com/js/js-tutorial.html
现代JavaScript教程：https://zh.javascript.info/
MDN文档：https://developer.mozilla.org/

库工具

对于库工具而言我们常用的有 JQuery、underScore、zepto、Moment 等

JQuery: 降低开发者操作 DOM 的复杂度
UnderScore: 提供实用的函数
Zepto: JQuery 的简化版
Moment: 日期和时间操作库

这些库给我们提供了很大的便利，省去了我们编写相关方法的时间，同时也是我们的程序更加稳健 —— 我们自己写的方法很可能在某些情况下就出 bug 了。

当然对于这些库我们不仅仅只是去了解 API，我们需要去学习它的源码。看看如果自己写相关方法的话是不是也想到了这种方式，这些库工具是也是一个很好地学习工具，我们不应该忽略。

比如让你自己实现节流函数，你会如何实现。
过滤对象应该如何实现
……

这种问题的答案不就在 Underscore 源码里面吗？

我们在学习库工具的时候，必定是需要回头看 JavaScript 基础的；这也就进一步夯实了基础。

前端框架（ MVVM ）的学习

当下最火的框架想必一定是 React 和 Vue，如果 JQuery 的存在是是我们更加方便的操作 DOM,那么现在 MVVM 框架则是让我们从手动更新 DOM 的繁杂操作中解放出来。

至于 React 和 Vue 该学习哪一个，更多的还是看当下公司使用的是哪一个（也不是必然）。对于 Vue(React) 该如何使用其实不用多久就能上手，我们更应该关心的是他们背后的设计思想和实现原理。

一些问题

响应式的基本原理是什么
发布订阅模式的理解
Virtual DOM 的理解
前端路由的实现原理
nextTick / setState 的实现原理
diff 算法
单页面应用（SPA）的原理和优缺点
……

我们对于框架的 API 使用没必要花太多时间，应该多研究他们背后的设计思想和实现原理。

Vue 和 React 我该选择哪一个？

对于这个问题相比很多人都有困扰（有些人两个都学，也就没有这个困扰），这个问题已经有很多人回答了。但我还是觉得不是非要选择哪一个才是政治正确，选择你需要的。

感兴趣的可以看看这篇文章：

React or Vue: Which Javascript UI Library Should You Be Using?

以下是提炼的文中观点：

Vue的优势是：

模板和渲染函数的弹性选择
简单的语法和项目配置
更快的渲染速度和更小的体积

React的优势是：

更适合大型应用和更好的可测试性
同时适用于 Web 端和原生 App
更大的生态系统，更多的支持和好用的工具

Vue 相关资料

对于框架的一些学习资料我个人更倾向于推荐官方文档，有很多问题官方文档已经说得很清楚了。市面上有些书籍也就是对官方文档进行了一个扩写（不排除有精良之作）。

浏览器 & 计算机基础

如果你希望能能快速进阶到高级工程师，那么对于浏览器 & 计算机基础的知识你就必要又有一定的掌握。因为这能让你更好的理解前端。

浏览器一直是 JavaScript 最重要的宿主环境，所以我们必须去了解 JavaScript 在浏览器中是如何执行的。

我们前端开发接触最多的应该就是浏览器了，记得工作第一年最头痛的就是处理 IE 的兼容问题。工作中出现的很多问题都和浏览器有关，所以我觉得了解浏览器工作原理是非常有必要的。

为何要学习浏览器工作原理？

准确评估 Web 开发项目的可行性
从更高维度审视页面
解决面试中遇到的绝大部分浏览器问题

计算机基础

对于计算机基础我们需要做到大体了解，这样的话我们对整体的流程会有一个大概的把握。在实际开发过程中不会过于被动。

需要了解的一些知识点

浏览器缓存机制
浏览器中 JavaScript 的执行机制
页面渲染原理
浏览器安全问题
浏览器为什么会跨域
如何系统的优化页面
HTTP 与 HTTPS 的区别
TCP/IP 协议
三次握手和四次挥手
CDN 的作用和原理
正向代理与反向代理的特点
……

这里仅仅列出了一部分知识点，如果想全面的学习可以看下面推荐的资料。

浏览器 & 网络基础推荐书籍/资料

《浏览器工作原理与实践》专栏
《图解 HTTP》
《网络是怎样连接的》

前端工程化

从事前端稍微久一点的开发就一定会有这个感受 —— 前端开发越来越工程化，越来越复杂。

对于前端开发来说，现在前端要做的不只是切页面调接口这么简单，我们需要了解的技术无疑更加广泛。

前端工程化的一点浅见

由于项目的复杂度越来越高，前端需要做的工作就越来越繁重。当项目复杂就会产生许多问题，比如：

如何进行高效的多人协作？
如何保证项目的可维护性？
如何提高项目的开发质量？
如何降低项目生产的风险？

前端工程化细分的话我觉得可以分成模块化、组件化、规范化三个方向。或者说一切能提升前端开发效率，提高前端应用质量的手段和工具都是前端工程化的实践。

模块化

JavaScript 模块化
CSS 模块化

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（资料价值较高，非无偿）

最后

你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。

我特地针对初学者整理一套前端学习资料分享给大家，戳这里即可获取

前端路线图