这是我参与「第五届青训营 」笔记创作活动的第4天

一、本堂课重点内容：

前端学算法与数据结构的用处，实际算法与数据结构案例分析。

二、详细知识点介绍：

1.要重视算法与数据结构

由于第三方工具库很多，导致做一个业务或者一个项目中其实我们自己写的代码占比很少，这也使得原本复杂的逻辑，在我们通过第三方工具库的帮助下实现起来也简单了许多，这就导致我们对数据结构与算法的使用很少，所以不重视。但是一些复杂的逻辑很多都与数据结构和算法息息相关，作为一名开发人员，如果缺少数据结构与算法的知识，那么就缺少了解决复杂问题的能力，如果止步于此那么很快就会遇到职业的天花板，所以对于前端来说虽然大部分情况数据结构与算法用可能接触不到，但是我们也的有一定的知识储备，以便当我们遇到复杂的逻辑也有解决思路。

2.实例案例

遍历所有文件

例如用node.js扫描指定目录下的文件或者页面侧边栏，我们就要用到递归的思想来进行深度遍历。

AST解析器

AST又叫抽象语法树，通过AST解析器，我们可以将代码解析为一颗对象树的结构，每个语法都对应树里面的某个节点。

模块打包器（Bundler）

Bundler是前端工程化中非常核心的一环，在目前的社区中知名的Bundler包括Webpack、Rollup、 Esbuild. Turbopack等。而Bundler本身的工程复杂度也是比较高的。Bundler依赖图建立，循环依赖分析，Bundler内部有有向图的依赖关系

缓存淘汰处理

在日常开发中，我们会经常使用缓存来优化性能。比如如下的几个场景:

• SSR缓存，服务端将组件渲染为字符串之后缓存html结果，这样在下次访问时可以直接读取内存中的缓存,跳 过了CPU密集型操作。
• Vue的KeepAlive组件缓存了内部组件的实例，避免了再次渲染时重新创建组件、请求数据的开销。
• webpack中对loader的结果进行缓存，在二次启动时可以跳过loader的处理， 大幅提升构建速度。而一旦涉及缓存，往往就需要考虑缓存淘汰的问题，比如我们将SSR的结果缓存到内存中，内存是有限的，耐多的缓存内容可能会导致我们的服务稳定性出现问题。

一般情况下， 我们会设置一个阈值 ,然后在缓存大小超过阈值的时候选择将某些缓存节点进行删除。比较常用的是LRU算法(最近最少使用原则)，即把最近使用频率最低的节点删除掉，尽可能保留使用频率高的缓存，这个算法可以应对绝大多数情况了。

相似命令提示

在进行命令工具开发时，为了提升用户体验，在用户输错时给出提示，提示最接近的命令，这个底层功能是基于最小编辑距离算法来实现的。

三、课后个人总结：

通过对本次课程的学习让我对前端数据结构与算法有了一定的了解，明白了数据结构与算法对于学前端的我来说也是比较重要的，也让我了解到了一些数据结构与算法的应用场景，让我知道了数据结构与算法是一门长期伴随我们职业生涯的学科，我们需要持续的去积累和思考，触碰到编程的本质，这样才能更加有效的提升自己的技术水平以及自己对于技术的理解。

四、引用参考

前端数据结构与算法专场直播和PPT