这篇文章是作者的普通面经，包含多方面内容。如重庆某公司前端岗位招聘信息，包括年限、薪资、技术栈等。还详述了多家公司的面试过程，涉及 Vue 相关知识、React 版本变化、状态库、组件缓存等技术问题，以及项目相关情况，最后提到面经后续会写群友的。
关联问题: Vue 路由钩子如何优化 React 18 新特性在哪 微前端如何优化性能
闲谈
是这样的，因为私信我的人比较多，在开始前先说点比较重要的事情。
第一件事：我这边重庆要离职了，有个坑就空出来了（有钱的小公司），增长稳定（一定发得起工资），招前端，工时会很高，然后现在Hc没完全放出来，但可以私我或者+我发简历。
JD：
年限：2-5年.
薪资：9-18.
技术栈：熟练掌握Vue全家桶（V2、V3、Mpvue）及其周边生态解决方案，熟练掌握JS，熟练使用TS，使用过Node及框架等。
第二件事：因为就有很多人问，对于问项目问场景该咋办。对于项目你自己的项目自己都搞不清楚那还是再准备一下把。对于场景平时多积累（看看文章，自己写写，看看开源），我也经常被问到不知道的场景，后面面试多了把，发现答不答得好是一回事，回答的思路又是另外一回事。
第三件事：我不知道骂我的人什么心态，我说了我能力不够没面大厂是吧？真就非大厂就没脸发出来洛？污染环境？原来我真写个面经就提高面试门槛污染环境洛。
第四件事：脚踏实地，不要焦虑，不要裸辞，慢慢来，校招的同学一定要在学校里就开始实习。
第五件事：沸点有加群别问了。
开始
一
这家有基建部门，我面的基建组，就感觉自己答得还行，但没过，这其实是我最想去的一家，后面面试官说是因为你的年限实在太年轻了（就是倒挂），很可惜。
一面
1、做两道题，二叉树层序遍历，哈希找字符串。
没啥参考价值，一道中等，一道简单。
2、你讲一下Vue路由有哪些钩子？
“路由有全局钩子，单个路由钩子，组件内的钩子，全局我们常用的就beforeEach、afterEach，单个的话有beforeEnter，最后组件内的话是beforeRouteEnter和beforeRouteLeave”
你平时一般用到哪些，怎么用的
“可能我平时就用到beforeEach和afterEach把，前置路由就做一些存token，重定向这些，后置路由会做一些效验，滚动条到顶这些。其他的用得比较少还是，beforeEnter的话用到过一点。”
说说param和query
"就一个展示参数，一个不展示，param刷新后会丢。"
行的
3、你了解过从编译开始的整个Vue的流程吗？
“额，您是指的从最开始的vue-loader吗？”
那就是从处理vue文件开始，也可以说说把。
“先插件预处理，注入pircher，处理vue文件，先进入vue-loader，针对不同的类型生成带type和lang的import语句和index.js，然后执行pitcher去进一步转换路径，拼接出webpack inline loader包含type对应的是自定义执行的loader, lang对应的是模块，接下来会调用vue-loader和template、babel等一系列loder去处理。之后就可以提前生成了render函数也就是template模版解析的结果，提升vue runtime的性能，。在这个过程中也通过最终匹配到的styleloader把样式注入了。”
那对于runtime-only那
“对于runtime-only是通过compileToFunction,先通过正则+循坏去生成AST,也就是Parse环节，然后gonerate生成code，最后生成render函数。然后render函数生成虚拟dom，通过patch（diff算法）把虚拟dom，生成真实节点，再解析data属性，映射到真实dom上”
刚刚你提到了style注入，你能说说一个最简实现吗？
（正好做过唉！）就是先定义规则，命中到.css文件，然后在编译时创建个style标签，把拿到的css字符串，append到style标签上，再把style标签挂到docement.head上。
这里你提到的css字符串是指的经过postcss处理过后的吗？
是的
那你说说postcss在处理css的时候遇到scoped如何处理？
em，它会给声明了scoped的样式中选择器命中的元素添加一个自定义属性，在class上把类名也加上。
我问得是这个的实现过程，就是生成这个属性的过程，你了解过吗？
emm，没有。
那你会怎么做？
“（艹）我觉得生成scoped，应该是分成两部分，一部分是生成元素上的属性，一部分是为选择器加上属性选择器，em假设我们以Vue为例把，可以在编译时解析template的时候传入一个scopedId,作为一个vnode的属性，然后渲染到真实节点上。然后postcss那块的话，我可能不是很了解，但应该也是在处理ast的时候把这个id给他加上,emmm好像vue的每个组件是有个哈希id的应该可以把”
行，下去你可以了解一下postcss，它给plugin提供了一个类似babel的vistor的方法，里面有一个Insert方法去添加属性选择器，思路还是可以的。
4、你用过模块联邦，虚拟模块吗？这个有点超纲我们随便聊聊把。
用过的。
他们是干啥的？
虚拟模块的话就给你提供一个编译时的esm模块在内存里，你可以引用这个在目录里不存在的模块。模块联邦的话就是可以去跨应用的使用模块，这个应该算是容器应用了把，就可能这个有点像那个我忘了，就那个cdn直接引入模块，不用安Npm包和构建（卧槽我到现在都没想起来）。emmm了解不是很深，没怎么用过模块联邦。
可以了已经，看得出来平时挺喜欢学习的。
二面
基本就是全问我自己的项目，组件库，puppteer，egg，虚拟列表，优化手段，指标，如何排查渲染、内存、执行问题这些。
三面
没啥好说的，技术VP和人事面，就核心是：画饼+Pua。就是现在环境不好，能给你锻炼的机会，压低薪资，接受大小周，年终给得多。
二
这家给我印象特别好，它不折磨我，就有很多重复问题我确实不想写了。
1、说说React从16-18的变化？
“React 16的话，class组件生命周期的更新变动，Hooks上线，context API不需要向下传递，api有createRef/forwordRef，Memo，Lazy、suspense等，主要是提升优化react性能，提出fiber架构，以及hooks解决状态逻辑复用问题组件嵌套地狱。
在React 17中，重构expirationTime，引入车道算法（lanes），事件代理节点从document变为root，解决16的expirationTimes算法缺陷，引入一个连续优先级算法车道模型。
React 18是React的当前版本，将默认的legcy模式变为concurrent模式，重构批处理等”
知道18有哪些在实验中的新特性吗？
不知道
好的
2、你用的是什么状态库？
redux，mbox，jotai都用过，大概说了一下几个库的差别。
3、判断空对象
"Object.keys, JSON.stringify."
4、img的alt和title属性
当时脑子短路了，没答上来。
一个描述，一个占位。
5、标签语义化
“为了提升页面的可读性和可访问性，降低维护成本，改善搜索引擎优化（SEO）。
标签语义化使代码更具有可读性，使得开发者更容易理解代码，便于开发者在未来维护和修改网站代码。 标签语义化可以更好地向搜索引擎，爬虫解释网页内容，改善网页的搜索引擎优化（SEO）。”
6、做过ssr吗
做过Nuxt，简单说了一下同构架构。
细说
不知道。
其实就是在服务端那边把浏览器搬过去实现了几个独有的API，优化了一下渲染，然后返回给客户端。
7、截取字符串
略
8、微前端
说了一下qiankun，然后谈到了遇到的一些问题，就说到了keepalive。
9、react如何实现keepalive,Offscreen(18实验新特性)。
(其实当时我心里第一个想法是react-activation这个包， 然后把KeepAlive放在路由表里,但转念一想把人面试官说的是怎么实现。)，然后头脑风暴了一下几种很蠢的方案（比如缓存fiber树这个思路的由来是因为vue的缓存vnode，存到redux里通过id去关联，样式实现，缓存组件缓存路由，结果越想越乱我甚至想到了useMemo那块去，悲~），直接说不知道。
好嘞
然后我面试结束了之后，认真想了一下这个问题。
因为面试的时候思绪有点乱，我先排除一下干扰项：从react内部去解决这个问题（并不好）？路由解决，因为路由改变后context上下文改变，然后context消费者组件渲染，我是不是应该从路由入手那？也其实不对这是侵入式的更改。
然后重新整理了一下思路，就是如果要让一个组件缓存需要做到什么？
在页面跳转或者状态控制显示切换的时候，组件不能卸载，但在页面需要消失。
紧接着我去看了一下React官网的说法，离屏渲染。
呜！这个翻译真好啊，就突然有了思路，我把keepalive包裹的组件，放在不在屏幕上渲染的地方不就好了这样不就达成缓存的效果了嘛，我需要的时候把离屏作用域里的组件实例,根据状态去改变display,回传给keepalive的父节点。
然后 createPortal 这个Api能够将子节点渲染到存在于父组件以外的DOM节点。
最后我需要控制的就是子组件的状态：失活、激活。缓存组件实例的管理。以及何时清除。
10、项目面
就又挖了一下项目。
结束
差不多我自己的面经到这因为后面都大致相同，已经面麻了，我对比了一下自己的和群友的，好像我这还算是中等模式，下一篇就主要写群友的面经（估计有点久，得等他们一个流程走完了再写）。