⭐️ 2024年更文计划，不晚~

ObjectX不知名程序员

2024-05-13 366 阅读11分钟

🧑‍💻 写在开头

本篇可以算是一个基础夯实【前端复习类似重学xxx之类的】&前端进阶【工程化、源码、Ai等等】的路线图，也可以算是一个技能树，后续会被逐渐点亮，本文仅仅是本人目前阶段的见解和成长路线图，后续会不断地修正和增加，如果你仍然处在初级阶段那么本篇文章可以作为一个进阶路线图

如果是已经晋升高级前端的同学，本篇文章对您的收益可能比较小，不过欢迎您在评论区给出建议，您的见解对我们很重要。

⭐️⭐️⭐️ 建议收藏食用

思维导图

大纲版

思维导图 (10).png

详细版

思维导图 (9).png

一、基础夯实

首先是基础夯实，我不会像社区里其他的文章罗列的那样，从xxx->xxx->xxx，不是说这种不好，很详细，也是个渐进的过程，但是，这种不容易明白，学到什么程度才能应对绝大部分工作需求，也就是学到啥程度能找工作，基础夯实这个部分即是匹配一个初级前端的基本能力，如果你都掌握了，那大多数的前端工作是难不倒你的。

1.手写原理&数据结构&算法

找过工作就知道了，算法不重要性不言而喻，美团笔试可以上来就给你开大，五个算法题，做不出来就拜拜 👋🏻👋🏻👋🏻

如果是校招，那我建议你将算法作为最重要的一部分学习
如果是社招，那我建议你在有空余时间的时候在学习算法，对于前端来说，工程的比重会更高，算法看的太重，效益不好，但是并不是说不要学，常见的还是要会。

大纲

TODO&输出

✅ 实现常见八大数据结构一
✅ 哈希表，快速计算、均匀分布、扩容实现
✅ 【JS高级】别掉进![],!{},!![],!!{}的坑里，!，!!, ?, ??,??=在js中是如何使用的？
✅ 树🌲&实现树结构
✍️ 常见排序算法实现
✍️ 数组相关算法实现
✍️ 常见链表相关算法
✍️ 常见字符串相关算法
✍️ 栈&队列相关算法
✍️ 二叉树相关算法重点⭐️
✍️ 递归算法实现
✍️ 回溯算法实现
✍️ 贪心算法实现
✍️ 动态规划算法实现
✍️ 高频手写题汇总

推荐资料

算法

手写

常见手写汇总

2.web动画&antd使用

大纲

作为前端，一比一实现UI给出的合理效果，是我们需要具备的基本能力，请注意是合理 👀👀，常见的动画需要理解原理，虽然大部分时间都是在用三方库，但是难免有时候需要手搓一个，掌握一个三方库，更为重要，这里推荐gsap，canvas&svg见仁见智，需要就学，不需要就不用，不是必须

TODO&输出

✍️ 过渡&变换&帧动画原理&API概览
✍️ 路径动画实现
✍️ 滚动动画实现
✍️ 如何用js来定义动画？
✍️ WAAPI来在canvas上绘制动画
✍️ SVG动画
✍️ GSAP一文通
✍️ WAAPI结合canvasKit + react实现动画绘制

推荐资料

3.实现常见的组件

大纲

大部分时候我们都是用的第三方库，但是如果公司有自研项目，有时候需要手搓组件。阿里的前端在国内属于一档的存在，antd的了解必不可少

TODO&输出

✅ 从0搭建一个组件库项目
✅ 【组件实现篇】"从零使用react打造瀑布流的四种方式：完美展示动态图片流"
✍️ 实现一个虚拟列表组件
✍️ 实现一个穿梭框组件
✍️ 实现一个弹窗组件
✍️ 实现一个通用右键菜单组件
✍️ 如何调试antd源码

推荐资料

4.版本管理Git

工作基本用的都是Git，需要知道常见的工作流，和工作中可能遇到的情况，工作中一般都是多人开发，没啥可说的基本必备技能。

大纲

TODO&输出

✍️ Git工作原理
✍️ 工作中如何解冲突
✍️ 如何做Code review

推荐资料

5.react+ts使用

大纲

react十分灵活，对于react我们需要学习很多的东西，但是对于ts我们会标注和使用类型工具就可以了，体操很少用到

TODO&输出

✍️ React最佳实践
✍️ TS常见类型工具

推荐资料

6.CSS预处理器

这个就不说了，公司用什么现学就行了，上手个半小时就行，熟悉在后面的开发中慢慢就熟悉了。

7.网络&浏览器

大纲

网络和浏览器对于前端非常重要，吃饭的家伙，没有他，前端不知道在哪呢，在前端中，性能优化、调试开发都在使用浏览器。

TODO&输出

✅ 【前端缓存】localStorage是同步还是异步的？为什么？
✍️ 【前端缓存】如何设计一个复合存储方案，协同、同步获取、标签隔离、大量数据我全都要
✍️ 浏览器渲染原理
✍️ 前端缓存原理
✍️ JS的运行机制
✍️ 如何做性能分析
✍️ HTTP一文通
✍️ 前端安全都需要注意哪些

推荐资料

目前还没有发现什么优质的电子书讲浏览器的，欢迎评论推荐

✊构建浏览器工作原理知识体系（开篇）

8.webpack|rollup|vite基本配置&打包流程

大纲

这部分的优先级可以先降低一些，大部分情况下我们进入公司，都不会手动去搭建项目，一般都先现成的脚手架和模板，这个阶段我们只需要了解基本配置&打包流程即可，主要先了解webpack就行，目前它仍然占据最大比重

TODO&输出

✅ 如何用rollup打包组件库
✍️ webpack常见配置&工作流程

推荐资料

二、进阶之旅

1.前端工程化

大纲

工程化是个耗费时间的工作，大多数时候基建小伙伴已经帮我们搞定了，但是如果你的公司基建不行，很多时候你需要自己处理很多工程上的问题

TODO&输出

✅ 【前端工程化】项目搭建篇-项目初始化&prettier、eslint、stylelint、lint-staged、husky
✅ 【前端工程化】项目搭建篇-配置changelog、webpack5打包
✅ 【前端工程化】项目搭建篇-引入react、ts、babel解析es6+、配置css module
✅ 【前端工程化】组件库搭建篇-引入storybook、rollup打包组件、本地测试组件库
✅ 【前端工程化】包管理器篇-三大包管理器、npm工程管理、npm发布流程
✅ 【前端工程化】自动化篇-Github Action基本使用、自动部署组件库文档、github3D指标统计
✅ 【前端工程化】自动化篇-手写脚本一键自动tag、发包、引导登录npm
✍️ webpack优化
✍️ webpack打包原理
✍️ 为什么说vite比webpack快很多，为什么？
✍️ sourceMap原理
✍️ webpack插件&加载器原理，自定义自己的插件&加载器
✍️ 前端进阶之如何实现一个脚手架
✍️ 多包仓库如何管理
✍️ 如何将自己的项目部署到服务器，如何自动化实现？

推荐资料

2.react原理探究

大纲

如果你的公司不关注员工的成长，只会pua，那么我强烈建议你选择一个前端框架，探究其原理，从中学习开发技巧，最佳实践，设计模式等等，在探究原理的时候我不建议自己去搭建这个环境，找一个别人搭建好的就行了。

TODO&输出

✅ 【react原理实践】使用babel手搓探索下jsx的原理
✅ 【喂饭式调试react源码】上手调试源码探究jsx原理
✅ 【上手调试源码系列】图解react几个核心包之间的关联
✅ 【上手调试源码系列】react启动流程，其实就是创建三大全局对象
✍️ 从宏观上理解react的render阶段
✍️ fiber是什么？工作原理？源码中长啥样？
✍️ fiber是什么？工作原理？源码中长啥样？
✍️ commit阶段的宏观理解
✍️ 调和流程fiber构造流程&diff算法
✍️ dom挂载流程
✍️ 调度原理&调度流程
✍️ 挡了fiber的路都得死，生命周期更改原因
✍️ state在react中的角色
✍️ 数据在react中是如何流动的
✍️ react设计理念
✍️ hooks原理

推荐资料

3.node原理探究&项目实践

大纲

node在前端中的重要性不言而喻，就目前而言，node的地位仍然不可撼动，虽然bun的势头很猛，但是集成越多，考虑和要处理的问题就越多，出现的问题也就会越多。

TODO&输出

✅ 包管理器篇-三大包管理器、npm工程管理、npm发布流程
✍️ express食用指南
✍️ koa和express我该如何选择？
✍️ node事件循环&异步原理
✍️ shell.js编写一个node工具，助力前端开发
✍️ nest.js进阶全栈

推荐资料

4.锦上添花

这些都可以在上面其他模块的实践过程中去尝试和使用，不需要刻意去使用，很多东西看得多了就会了，一个潜移默化的过程，特别是设计模式。

设计模式&面向对象
函数式编程
服务端渲染
...

三、前端&AI

大纲

这个时代必须赶上AI的这班列车，理解当前大模型应用的开发原理，目前可预见的就是所有的应用都可以用AI再重新开发一次

TODO&输出

✅ GPT4前端食用指南
✍️ langChain.js食用指南
✍️ LLM项目的基本原理
✍️ 公众号实现私域智能助手
✍️ 让GPT帮我做code review

推荐资料

四、图形学

大纲

这是一个学习曲线极度陡峭的方向，并且性价比不高，心理负担会比较重，但是也是一个极具区分度的方向，入行慎重，整活还是可以的

TODO&输出

✍️ canvas一文通
✍️ svg一文通
✍️ 矩阵变换原理
✍️ canvasKit等三方库使用
✍️ webgl上手指南
✍️ threejs上手指南

推荐资料

五、博客

博客对于个人的成长很重要，面试的时候也可以写到简历上，有时候可能面试不理想，但是因为博客结果可能出乎意料

我这里是有三个

作品集网站：主要是汇集一些自己做的动画，组件什么的，这个是我自己手搓的，其他哪些博客框架总感觉差点意思，仍在进行中，打算用canvasKit绘制一些东西做主页，还在进行中，今年太忙了，没时间那么多时间搞

知识库：我用的是一个notions同步的框架，在notion写完，会自动同步，而且风格很好看，我很喜欢这个，如果你也想配置一个，跟着这篇文章，你也可以用hexo
社区账号：主要就是掘金、github，其他的感觉不是很中意。

六、书签&参考文档

记录看到的好文和参考文章

七、工具&资源

工具

资源

🍋 写在最后

如果您看到这里了，并且觉得这篇文章对您有所帮助，希望您能够点赞👍和收藏⭐支持一下作者🙇🙇🙇，感谢🍺🍺！如果文中有任何不准确之处，也欢迎您指正，共同进步。感谢您的阅读，期待您的点赞👍和收藏⭐！

感兴趣的同学可以关注下我的公众号ObjectX前端实验室

🌟 少走弯路 | ObjectX前端实验室 🛠️「精选资源｜实战经验｜技术洞见」