前言
之前在技术群里和大家吹水的时候，我看到有几位群友对我是如何准备跳槽的比较感兴趣，希望我可以分享一下。
其实我对自己也并不是特别有自信，不过仅仅作为参考的话，倒还是勉强可以端到台面上来。
" 开源 " 是计算机科学领域的一种文化现象，源自极客们对智慧成果共享、自由的追求。
在本篇文章中，大家就当作我是把自己的经历 " 开源 " 了，感兴趣的同学可以fork一下，然后以此为基础做一些修改。
是的，毕竟适合自己的，才是最好的。
简历修改
其实在正式进入准备之前，我个人认为最重要的是先把简历改好。
而且简历里的项目，如果离职之后再想去写好，就不太容易了，因为从公司离职后，你就接触不到源码了。
因此，想跳槽的同学，一定要在【在职期间】，明确好自己要往简历上写的项目，然后利用在职时能够查看自己写的那些代码的条件，将项目的难点、亮点进行整理、复盘、包装。
并且一定要量化项目的成果。
我的简历在修改之前，投递了很多公司，一点反馈都没有。
我的简历在修改之后，投递了很多公司，得到了很多约面的机会，其中不乏字节、腾讯、京东、携程等大厂。
因此就我个人的经历而言，写好一份简历，对于后续的求职是大有裨益的。
不过出于篇幅考虑，本文暂不扩展地去聊如何写一份好的简历，感兴趣的同学我们下次再聊。
学习路线
思维导图
自查
👆其实我更倾向于大家对着上面这篇文章👆，完成自检，这位字节大佬真的可以说是从全方位对【前端工程师】做了一个分析与总结。
看完之后真是让我自己汗颜。
踩坑🕳
上一章节【思维导图】所展示的学习路线，其实是有待商榷的。
因为我在后续的面试（将近20场）中发现，面试官真的很少会问html和css。
因此时间紧张的同学可以不用特意去准备这两部分的内容。
不过，大多数面试官都是倾向于从你的项目中延伸出知识点的考察 ，所以我上面的说法可能也有失偏颇，举个例子🌰：
假如你是做移动端的同学，或者你是做C端的同学，那么交互上 和样式上 的要求肯定要比我这种做B端的高很多，那么面试官很有可能就会考察你很多CSS相关的知识了。、
（当然，也流传着这么一句话，我们做B端的也要拿C端的标准，来要求自己。）
因此大家还是带着 " 尽信书不如无书 " 的心态看我分享的内容。如果发现我说的不妥的地方，还望各位能不吝赐教🥲。
题外话说到这，我们继续。
我个人的建议是，算法题放到最后再刷，刷得太早，容易忘。
我 6、7、8月每天都在刷题，而且刷的还不止是 hot 100 的题，连每日一题都刷，导致我后面9月份开始真的去面试的时候，发现自己在前端工程化、性能优化上还欠缺太多了.....真是得不偿失。
推荐
Html 和 css
针对html和css，我个人推荐看一看张鑫旭大佬新出的那本关于html的书和他写的《css新世界》系列。 个人感觉写得非常不错，并且很容易理解。 我想大家应该没有什么系统性学习html和css的经历，那么他的这几本书📕，我觉得可以称之为能够带着你系统性学习知识的好工具。
JS
我个人是通过阅读经典书籍去准备JS的。
- 《你不知道的JavaScript（上卷）》
- 《你不知道的JavaScript（中卷）》
- 《你不知道的JavaScript（下卷）》
- 《JavaScript 高级程序设计》
阅读书籍能够帮助我查漏补缺，但是问题就在于，这并不是一件能够速成的事情，是要花很多时间的，所以比较适合有足够多时间进行准备的同学。
（这里建议英语能力好👍的同学，可以看还没有实体书印刷的英文版的pdf，目前市面上的中文版实体书，可太有年代感了，对于书中的内容来说，es6都属于是未来的标准😔）
我自己是之前就有看书的习惯，上面提到的几本书都有看过，因此其实在裸辞的期间，主要还是遇到某些知识点的时候，翻翻书本，并且对照着看。
比如讲生成器和迭代器这一章节，《你不知道的JavaScript（中卷）》要比《JavaScript 高级程序设计》讲得好的很多。强烈推荐大家去看《你不知道的JavaScript（中卷）》的生成器和迭代器这一章节。
如何检验自己的学习成果？那就是拿小厂、中厂练手。
把每一次面试当成一次考试，把一个问题都当成是考题。
在真实地回答问题的过程中，检验自己对于知识点的掌握程度。
也可以在反问环节，通过面试官的评价，来更客观地检验自己对于知识点的掌握程度。
每次面试记得录屏或者录音，方便后续自己的复盘，这样在面对自己心仪的公司的时候，能够游刃有余。
React
在聊推荐的React学习读物时，我想先和大家聊一聊个人对于 React 的理解。
尤其是当它从 v16 迭代至 v18 之后的变化。
回顾使用 React v16 版本的那段时期，我们可能会注意到这样一个细节：在所有的jsx或tsx文件的最顶层，几乎无一例外地包含着这样一行代码：
js
import React from 'react'这行代码似乎有些令人费解🤔，因为在很多情况下，我们的组件代码中 并没有直接使用 到 React 这个对象。
那么，为什么我们还要 不厌其烦地写下这一行看似多余的代码 呢？
原因在于，尽管我们的组件代码中没有直接引用 React ，但在幕后，React本身的工作原理却依赖于这个库。
回想一下最早我们接触 JSX 的时候，我们一边感慨能够在 JavaScript 中写类HTML代码的舒爽体验，一边好奇 JSX 究竟是如何在 JavaScript 中生效的。
由此我们了解到了 Babel，也通过它完成了对 JSX 的转义：
如上图所示，所有的 JSX 标签都被转换成了React.createElement()的调用。这也就表明，我们写的 JSX ，其实是在写React.createElement()。
这下真相大白了，👇顶层引入的 React 这个对象确实被依赖了👇
js
import React from 'react'我们需要它来调用 React.createElement() 方法。
而在后续的版本升级中，其实在 v17 就开始了， React 团队也注意到不得不在每一个jsx/tsx文件中写一遍 import React from 'react' 的痛苦。因此他们与 Babel 团队合作。更新了Babel的jsx转换插件 @babel/plugin-transform-react-jsx 以及引入了新的预设 @babel/preset-react。
在2020年的更新日志里，它们是这样介绍的：
我们同样使用在线工具，看一下转化后的结果：
可以看到 React.createElement 不见了，取而代之的是这样一行语句：
js
import { jsx as _jsx } from "react/jsx-runtime";上面的小插曲说得有点多了，跑题了，不好意思。我接着说回之前提到的地方，即我是怎么看待 React，或者说对于 React 的学习路线。
在面试中被问到最多的可能就是 React 的 Fiber 设计，考察候选人对 React 如何执行渲染任务、如何优化渲染任务、如何完成任务调度等方面的知识储备。
但是在实际业务开发中，可能与我们打交道最多的却是 onClick 等事件。因为 React 本身已经做了很多优化的事情，渲染方面留给我们发挥的空间其实不太多。
说到交互事件，自然也离不开状态管理和Hooks，它们一起合作，让我们的页面具备了丰富的功能。
我会用下面3个问题来涵盖一个 React 组件从诞生、到状态变化、到提供功能支持、到卸载的全过程：
-
jsx/tsx 写的组件代码是如何生成真实的DOM节点挂载到页面上的？
-
组件内部的状态变化又是依据什么策略实现视图层面的更新的？
- useState是如何生效的？
- useEffect的执行时机一定是在DOM渲染之后吗？
-
React 又是如何管理能够触发组件状态变化的交互事件的？
这三个问题分别对应着React的三大核心：
- React 事件机制，调度和时间片
- React 架构，调和和fiber
- React Hooks原理
我个人觉得搞清楚上面这三大内容，基本上属于一通百通了。
所以我首先会推荐大家阅读这本小册：React 进阶实践指南
不过这本小册的质量是仁者见仁的，对于很熟练的同学来说，可能讲得还是不够细节，因此我在针对比如 事件机制 等，给大家推荐几篇稀土掘金的优质博客。
事件机制：
调度和时间片：
Fiber
HOOKS 原理
Lazy import 原理
Webpack
前端工程化是面试官必问的东西，因此我也推荐大家可以先通过一本小册进行系统性的学习，然后再针对某个细节进行深挖。
和上一章节一样，我会补充一些我个人看到的觉得质量很高的博客，作为深挖内容
Loader
Plugin
配置优化
自查
学完之后想要检验学习成果的同学，可以看看下面的面试题，是否可以每一题都能回答出来。
扩展
仅仅只是了解webpack实在是太过基础以及"烂大街"了，对于新的构建工具也要熟悉才行。
vite
光是给vue3官方文档最新的基于vite的脚手架去配eslint，就会遇到很多坑，因此在准备相关理论知识的同时，不妨也多看一些实践的踩坑：
rspack
强烈推荐把webinfra的文章都看一遍，
然后再去rspack官网，尝试对现有项目进行迁移，并将迁移过程中遇到的问题进行总结。
性能优化
计算机基础知识
计算机网络
百分号编码、跨域、"粘包"、缓存策略、常用API等等，建议大家结合各大平台最新的面经，进行知识点的归纳和总结。
Https
我觉得这一篇博客是真的写得很好，很适合入门
自查
学完之后想要检验学习成果的同学，可以看看下面的面试题，是否可以每一题都能回答出来。
操作系统
这个其实我个人只是学了一下 进程 和 线程 的区别而已
（在聊浏览器事件循环的时候）
结语
"学习的过程注定是痛苦的，因为你会发现自己的无知。"
共勉