前端方向化 | 青训营笔记

88 阅读2分钟

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

1.Node.js深度优先遍历

2023-02-02_205418.png

2.AST解析器

AST指抽象语法树,通过AST解析树,我们可以将代码解析成树的结构,每个语法里对应着树的某些节点。我们可以方便地进行语法分析与转换。 对于AST解析树,最重要的是:tokenize()词法分析和parse(语法分析) 对于代码: let foo = function() {} 首先将代码分成一个个词法单元,上面代码会被分成下面token数组 ["let","foo","=","function","(",")","{","}"] Tokenizer本质上是对字符串代码进行一个个字符的扫描,然后更具一定的语法规则进行分组,关键步骤如下: 确定语法规则,包含语言内置的关键词,单字符,分隔符

2023-02-02_210938.png 一个个代码字符扫描,根据语法规则进行token分组

3.模块打包器bundler:包含Webpack, Rollup,Esbuild,Turbopack,原理

依赖图建立 循环依赖分析 bulder内部对于以来关系是如何让定位与识别的,实际上是一个有向图是否成环的问题·,可以先从入口出发,对·整张图进行后序遍历,也就是拓扑排序,

2023-02-02_212344.png

4.缓存淘汰处理

使用缓存来优化性能 SSR缓存,服务端将组件渲染成字符串之后缓存为HTML结果,在席次访问的时候可以读取内存中的缓存,跳过CPU密集操作 VU俄中keeplive组件缓存内部组件实列,避免再次渲染时重新创建组件,请求与数据的开销 webpack中对loader的结果进行缓存,在二次启动的时候可以跳过大量loader的处理,大量提升构建速度 一般设置一个阈值,缓存大小超过阈值的时候对某些缓存节点进行删除。 比较常见的算法时LRU算法,把最近使用频率较少的最低节点给删除掉,大幅提升构建速度