笔触狂放9

这个屌丝很懒，什么也没留下！

热门标签

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

作者：笔触狂放9 | 2024-04-22 12:46:47

踩

前端学习资源csdn

《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 模块化
资源模块化

组件化

从 UI 拆分下来的每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元，我们称之为组件。

也就是将复杂页面按功能拆分成多个独立的组件。

规范化

编码规范
接口规范
git 使用规范
CodeReview
UI 元素规范

前端工程化一些知识点

理解 Babel、ESLint、webpack 等工具在项目中的作用
Babel 的核心原理
Webpack 的编译原理、构建流程、热更新原理
nginx 的基本理解
理解 Git 的工作流程
Mock 的意义及优点

性能优化

提起性能优化，大家最先想到的是什么？我最先想到的是一道面试题：

从输入 URL 到页面加载完成的具体过程

因为从直观层面来看，我们前端需要优化的步骤基本都在这个加载工程当中。

性能优化现在对于前端来说已经是必不可少的技能了，当然现在有些所谓的性能优化的技巧现在都成为了一种需要遵从的规范。

我们需要关注两个方向的性能优化：

运行时的优化
开发时的优化

性能优化一些知识点

前端性能衡量指标、性能监控（performance,LightHouse）
常见的性能优化方案有哪些
SSR 方案的性能优化
Webpack 的性能优化方案
React、Vue 等框架使用性能优化方案
网络层面的优化方案
页面渲染层面的优化方案
白屏的优化方案
……